Merge pull request #41 from moonshotcollective/39/fresh_user_data

39/fresh_user_data
BuidlGuidl · Sep 22, 2021 · 2af7e33 · 2af7e33
2 parents 519c2c9 + 475d676
commit 2af7e33
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 34 deletions.
diff --git a/packages/backend/index.js b/packages/backend/index.js
@@ -101,6 +101,20 @@ app.post("/sign", async (request, response) => {
   }
 });
 
+app.get("/user", userOnly, async (request, response) => {
+  console.log(`/user`);
+  const { address } = request;
+  const user = await database.collection("users").doc(address).get();
+  if (!user.exists) {
+    // It should never happen, but just in case...
+    response.status(401).send("Something went wrong. Cant find the user in the database");
+    return;
+  }
+
+  console.log("Retrieving existing user: ", address);
+  response.json(user.data());
+});
+
 app.post("/challenges", userOnly, async (request, response) => {
   const { challengeId, deployedUrl, branchUrl } = request.body;
   const address = request.address;

diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
@@ -21,6 +21,7 @@ import {
   ChallengeReviewView,
 } from "./views";
 import JwtTest from "./views/JwtTest"; // TODO debug only
+
 /*
     Welcome to 🏗 scaffold-eth !
 
@@ -252,9 +253,9 @@ function App() {
       </div>
     );
   }
-
   const isSigner = injectedProvider && injectedProvider.getSigner && injectedProvider.getSigner()._isSigner;
-  const [userObject, setUserObject] = useLocalStorage("scaffold-directory-user", {});
+  const [jwt, setJwt] = useLocalStorage("scaffold-directory-JWT", "");
+  const [isAdmin, setIsAdmin] = useLocalStorage("scaffold-directory-is-admin", false);
 
   return (
     <div className="App">
@@ -279,10 +280,11 @@ function App() {
           loadWeb3Modal={loadWeb3Modal}
           logoutOfWeb3Modal={() => {
             logoutOfWeb3Modal();
-            setUserObject({});
+            setJwt("");
+            setIsAdmin(false);
           }}
           blockExplorer={blockExplorer}
-          isAdmin={userObject.isAdmin}
+          isAdmin={isAdmin}
         />
         {faucetHint}
       </div>
@@ -309,7 +311,7 @@ function App() {
                 All Builders
               </Link>
             </Menu.Item>
-            {userObject.isAdmin && (
+            {isAdmin && (
               <Menu.Item key="/challenge-review">
                 <Link
                   onClick={() => {
@@ -325,17 +327,18 @@ function App() {
           <Switch>
             <Route exact path="/">
               <SignInView
-                userObject={userObject}
                 serverUrl={serverUrl}
                 address={address}
                 userProvider={userProvider}
-                successCallback={responseUserObject => {
-                  setUserObject(responseUserObject);
+                successCallback={({ isAdmin: isAdminReturned, token }) => {
+                  setJwt(token);
+                  setIsAdmin(isAdminReturned || false);
                 }}
+                jwt={jwt}
               />
             </Route>
             <Route path="/home">
-              <BuilderHomeView userObject={userObject} userName={address} />
+              <BuilderHomeView serverUrl={serverUrl} jwt={jwt} address={address} />
             </Route>
             <Route path="/builders" exact>
               <BuilderListView serverUrl={serverUrl} mainnetProvider={mainnetProvider} />
@@ -344,14 +347,14 @@ function App() {
               <BuilderProfileView serverUrl={serverUrl} mainnetProvider={mainnetProvider} />
             </Route>
             <Route path="/challenge/:challengeId">
-              <ChallengeDetailView userObject={userObject} serverUrl={serverUrl} address={address} />
+              <ChallengeDetailView serverUrl={serverUrl} address={address} jwt={jwt} />
             </Route>
             {/* ToDo: Protect this route on the frontend? */}
             <Route path="/challenge-review" exact>
-              <ChallengeReviewView serverUrl={serverUrl} token={userObject.token} address={address} />
+              <ChallengeReviewView serverUrl={serverUrl} jwt={jwt} address={address} />
             </Route>
             <Route path="/jwt-test">
-              <JwtTest serverUrl={serverUrl} token={userObject.token} userProvider={userProvider} />
+              <JwtTest serverUrl={serverUrl} jwt={jwt} userProvider={userProvider} />
             </Route>
           </Switch>
         </BrowserRouter>

diff --git a/packages/react-app/src/views/BuilderHomeView.jsx b/packages/react-app/src/views/BuilderHomeView.jsx
@@ -1,19 +1,41 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
+import axios from "axios";
 import ChallengeList from "../components/ChallengeList";
 
-export default function BuilderHomeView({ userObject, userName }) {
+export default function BuilderHomeView({ serverUrl, jwt, address }) {
+  const [userData, setUserData] = useState();
+
   const history = useHistory();
-  if (userObject == null || Object.keys(userObject).length === 0) {
+  if (jwt == null || jwt === "") {
     history.push("/");
   }
 
+  useEffect(() => {
+    async function fetchUserData() {
+      console.log("getting user data");
+      const fetchedUserObject = await axios.get(serverUrl + `user`, {
+        headers: {
+          authorization: `token ${jwt}`,
+          address,
+        },
+      });
+      setUserData(fetchedUserObject.data);
+      console.log(fetchedUserObject.data);
+    }
+    if (jwt != null && jwt !== "") {
+      fetchUserData();
+    }
+  }, [jwt, address]);
+
   return (
     <div className="container">
-      <h1>Welcome {userName}!</h1>
-      <div style={{ textAlign: "start" }}>
-        <ChallengeList userChallenges={userObject.challenges} />
-      </div>
+      <h1>Welcome {address}!</h1>
+      {userData ? (
+        <div style={{ textAlign: "start" }}>
+          <ChallengeList userChallenges={userData.challenges} />
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/packages/react-app/src/views/ChallengeDetailView.jsx b/packages/react-app/src/views/ChallengeDetailView.jsx
@@ -6,10 +6,10 @@ import ChallengeSubmission from "../components/ChallengeSubmission";
 
 const { Title, Paragraph, Link: AntdLink } = Typography;
 
-export default function ChallengeDetailView({ userObject, serverUrl, address }) {
+export default function ChallengeDetailView({ serverUrl, address, jwt }) {
   const { challengeId } = useParams();
   const history = useHistory();
-  if (userObject == null || Object.keys(userObject).length === 0) {
+  if (jwt == null || jwt === "") {
     history.push("/");
   }
 
@@ -30,7 +30,7 @@ export default function ChallengeDetailView({ userObject, serverUrl, address })
         <AntdLink href={challenge.url} target="_blank">
           Link to challenge
         </AntdLink>
-        <ChallengeSubmission challenge={challenge} serverUrl={serverUrl} address={address} token={userObject.token} />
+        <ChallengeSubmission challenge={challenge} serverUrl={serverUrl} address={address} token={jwt} />
       </Space>
     </div>
   );

diff --git a/packages/react-app/src/views/ChallengeReviewView.jsx b/packages/react-app/src/views/ChallengeReviewView.jsx
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import axios from "axios";
 import ChallengeReviewList from "../components/ChallengeReviewList";
 
-export default function ChallengeReviewView({ serverUrl, token, address }) {
+export default function ChallengeReviewView({ serverUrl, jwt, address }) {
   const [challenges, setChallenges] = React.useState([]);
   const [isLoading, setIsLoading] = React.useState(true);
 
@@ -12,7 +12,7 @@ export default function ChallengeReviewView({ serverUrl, token, address }) {
     const fetchedChallenges = await axios.get(serverUrl + `challenges`, {
       params: { status: "SUBMITTED" },
       headers: {
-        authorization: `token ${token}`,
+        authorization: `token ${jwt}`,
         address,
       },
     });
@@ -34,7 +34,7 @@ export default function ChallengeReviewView({ serverUrl, token, address }) {
       },
       {
         headers: {
-          authorization: `token ${token}`,
+          authorization: `token ${jwt}`,
           address,
         },
       },
@@ -51,7 +51,7 @@ export default function ChallengeReviewView({ serverUrl, token, address }) {
       },
       {
         headers: {
-          authorization: `token ${token}`,
+          authorization: `token ${jwt}`,
           address,
         },
       },

diff --git a/packages/react-app/src/views/JwtTest.jsx b/packages/react-app/src/views/JwtTest.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import axios from "axios";
 import { useUserAddress } from "eth-hooks";
 
-const JwtTest = ({ serverUrl, token, userProvider }) => {
+const JwtTest = ({ serverUrl, jwt, userProvider }) => {
   const address = useUserAddress(userProvider);
 
   return (
@@ -17,7 +17,7 @@ const JwtTest = ({ serverUrl, token, userProvider }) => {
               try {
                 const response = await axios.get(`${serverUrl}auth-jwt-restricted`, {
                   headers: {
-                    authorization: `token ${token}`,
+                    authorization: `token ${jwt}`,
                     address,
                   },
                 });
@@ -40,7 +40,7 @@ const JwtTest = ({ serverUrl, token, userProvider }) => {
               try {
                 const response = await axios.get(`${serverUrl}auth-jwt-admin-restricted`, {
                   headers: {
-                    authorization: `token ${token}`,
+                    authorization: `token ${jwt}`,
                     address,
                   },
                 });
@@ -81,7 +81,7 @@ const JwtTest = ({ serverUrl, token, userProvider }) => {
             try {
               const response = await axios.get(`${serverUrl}auth-jwt-restricted`, {
                 headers: {
-                  authorization: `token ${token}`,
+                  authorization: `token ${jwt}`,
                 },
               });
               console.log(response);
@@ -99,7 +99,7 @@ const JwtTest = ({ serverUrl, token, userProvider }) => {
             try {
               const response = await axios.get(`${serverUrl}auth-jwt-restricted`, {
                 headers: {
-                  authorization: `token ${token}`,
+                  authorization: `token ${jwt}`,
                   address: address.slice(0, -4) + "0000",
                 },
               });
@@ -118,7 +118,7 @@ const JwtTest = ({ serverUrl, token, userProvider }) => {
             try {
               const response = await axios.get(`${serverUrl}auth-jwt-restricted`, {
                 headers: {
-                  authorization: `token ${token}0000`,
+                  authorization: `token ${jwt}0000`,
                   address,
                 },
               });

diff --git a/packages/react-app/src/views/SignInView.jsx b/packages/react-app/src/views/SignInView.jsx
@@ -3,11 +3,11 @@ import axios from "axios";
 import { useHistory } from "react-router-dom";
 import { message as uiMessage, Button } from "antd";
 
-export default function SignInView({ serverUrl, address, userProvider, successCallback, userObject }) {
+export default function SignInView({ serverUrl, address, userProvider, successCallback, jwt }) {
   const history = useHistory();
   const [error, setError] = useState();
   const [loading, setLoading] = useState(false);
-  if (userObject != null && Object.keys(userObject).length !== 0) {
+  if (jwt != null && jwt !== "") {
     history.push("/home");
   }
   return (