Merge pull request #130 from turingschool/bug/persist-context-on-refresh

Bug/persist context on refresh
turingschool · Feb 20, 2025 · 02b874e · 02b874e
2 parents 85567dd + 192dda3
commit 02b874e
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 68 deletions.
diff --git a/cypress/downloads/downloads.html b/cypress/downloads/downloads.html
diff --git a/cypress/e2e/jobsApplicationSpec.cy.js b/cypress/e2e/jobsApplicationSpec.cy.js
@@ -681,14 +681,6 @@ describe("Editability of specific job application fields", () => {
         "Talked with recruiter, sounds like a great opportunity to learn new things"
       );
     cy.get('[data-testid="edit-modal-form-submit-button"]').click();
-
-    cy.reload();
-    cy.get("#email").type("[email protected]");
-    cy.get("#password").type("jerseyMikesRox7");
-    cy.get('[data-testid="login-button"]').click();
-    cy.get('[data-testid="applications-iconD"]').click();
-    cy.get("tbody > tr").contains("Creative").click();
-
     cy.wait("@updateJobApp");
 
     cy.get('[data-testid="job-Title"]').should("contain", "Frontend Developer");
@@ -731,13 +723,6 @@ describe("Editability of specific job application fields", () => {
     cy.get('[data-testid="edit-modal-form-submit-button"]').click();
     cy.wait("@showSingleJobAppEmptyFields");
 
-    cy.reload();
-    cy.get("#email").type("[email protected]");
-    cy.get("#password").type("jerseyMikesRox7");
-    cy.get('[data-testid="login-button"]').click();
-    cy.get('[data-testid="applications-iconD"]').click();
-    cy.get("tbody > tr").contains("Creative").click();
-
     cy.wait("@getJobApplications");
     cy.wait("@showSingleJobApp");
 

diff --git a/cypress/e2e/loginSpec.cy.js b/cypress/e2e/loginSpec.cy.js
@@ -66,4 +66,38 @@ describe('testing for Login page', () => {
     .get('.login-form-wrap > .form-inputs > .failed-login').should('be.visible')
     .get('.login-form-wrap > .form-inputs > .failed-login').should('contain', 'Error in Login: Invalid login credentials')
   });
+
+  it('persists login after a refresh', () => {
+    cy.intercept("POST", "http://localhost:3001/api/v1/sessions", {
+      statusCode: 200,
+      body: {
+        token: 'fake-token',
+        user: {
+          data: {
+            id: 1,
+            type: 'user',
+            attributes: {
+              name: 'Danny DeVito',
+              email: '[email protected]',
+              companies: []
+            }
+          }
+        }
+      }
+    }).as("mockSession");
+
+    cy.intercept(
+      'GET',
+      'http://localhost:3001/api/v1/users/1/dashboard',
+      { statusCode: 200, fixture: 'mockDashBoard' }
+    );
+
+    cy.visit("http://localhost:3000/");
+    cy.get("#email").type("[email protected]")
+    cy.get("#password").type("jerseyMikesRox7")
+    cy.get('[data-testid="login-button"]').click();
+    cy.get("h1").should("have.text", "Welcome,Danny DeVito");
+    cy.reload();
+    cy.get("h1").should("have.text", "Welcome,Danny DeVito");
+  })
 });
diff --git a/src/App.tsx b/src/App.tsx
@@ -22,37 +22,42 @@ import DashBoard from "./components/dashboard/dashboard";
 function App() {
   const { isLoggedIn,  userData } = useUserLoggedContext()
   return (
-    <Routes>
-      <Route // Public Route
-        path="/"
-        element={isLoggedIn ? <Navigate to="/home" replace /> : <LoginForm />}
-      />
-
-      {/* Protected layout using MenuBar */}
-      <Route element={isLoggedIn ? <MenuBar /> : <Navigate to="/" replace />}>
-        <Route
-          path="/home"
-          element={
-            <DashBoard/>
-          }
-        />
-        <Route path="/jobapplications/new" element={<NewJobApplication />} />
-        <Route path="/companies" element={<Companies />} />
-        <Route path="/companies/new" element={<NewCompany />} />
-        <Route path="/companies/:id/contacts" element={<CompanyShow />} />
-        <Route path="/contacts" element={<Contacts userData={userData}/>} />
-        <Route path="/contacts/new" element={<NewContact userData={userData}/>} />
-        <Route path="/job_applications" element={<ApplicationsGrid/>}/>
-        <Route path="/job_applications/:jobAppId" element={<JobApplication/>}/>
-        <Route
-          path="/userInformation"
-          element={<UserInformation userData={userData} />}
+      <Routes>
+        <Route // Public Route
+          path="/"
+          element={<ProtectedRoute/>}
         />
-        <Route path="/contacts/:contactId" element={<ShowContact />}/>
-      </Route>
-      <Route path="/UserRegistration" element={<UserRegistration/>}/>
-    </Routes>
+
+        {/* Protected layout using MenuBar */}
+        <Route element={isLoggedIn ? <MenuBar /> : <Navigate to="/" replace />}>
+          <Route
+            path="/home"
+            element={
+              <DashBoard/>
+            }
+          />
+          <Route path="/jobapplications/new" element={<NewJobApplication />} />
+          <Route path="/companies" element={<Companies />} />
+          <Route path="/companies/new" element={<NewCompany />} />
+          <Route path="/companies/:id/contacts" element={<CompanyShow />} />
+          <Route path="/contacts" element={<Contacts userData={userData}/>} />
+          <Route path="/contacts/new" element={<NewContact userData={userData}/>} />
+          <Route path="/job_applications" element={<ApplicationsGrid/>}/>
+          <Route path="/job_applications/:jobAppId" element={<JobApplication/>}/>
+          <Route
+            path="/userInformation"
+            element={<UserInformation userData={userData} />}
+          />
+          <Route path="/contacts/:contactId" element={<ShowContact />}/>
+        </Route>
+        <Route path="/UserRegistration" element={<UserRegistration/>}/>
+      </Routes>
   );
 }
 
+function ProtectedRoute() {
+  const { isLoggedIn } = useUserLoggedContext();
+  return isLoggedIn ? <Navigate to="/home" replace /> : <LoginForm />;
+}
+
 export default App;
diff --git a/src/Login.tsx b/src/Login.tsx
@@ -10,7 +10,7 @@ const LoginForm: React.FC = () => {
   const [password, setPassword] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
-  const { userLogged, setUserData } = useUserLoggedContext()
+  const { userLogged, setUserData } = useUserLoggedContext();
   const navigate = useNavigate();
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -24,9 +24,9 @@ const LoginForm: React.FC = () => {
     };
 
     loginUser(requestBody)
+
       .then((loggedInUser) => {
-        console.log("logged data:", loggedInUser)
-        setUserData({
+        const userData = {
           token: loggedInUser.token,
           user: {
             data: {
@@ -39,13 +39,12 @@ const LoginForm: React.FC = () => {
               }
             }
           }
-        });
-        // setId(loggedInUser.user.data.id);
-        // setLogin(true);
+        }
+        setUserData(userData)
+        sessionStorage.setItem("userData", JSON.stringify(userData))
         setSuccessMessage('Login successful!');
         userLogged(loggedInUser.token, loggedInUser.user.data.type)
         navigate("/")
-        console.log("User updated successfully:", loggedInUser);
       })
       .catch((error) => {
         console.error("Error updating user:", error);

diff --git a/src/context/UserLoggedContext.tsx b/src/context/UserLoggedContext.tsx
@@ -14,30 +14,45 @@ interface Value {
 const UserLoggedContext = createContext<null | Value>(null);
 
 export function UserLoggedContextProvider({ children }: React.PropsWithChildren) {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [token, setToken] = useState<null | string>(null);
-  const [roles, setRoles] = useState<[] | string[]>([]);
-  const [userData, setUserData] = useState<UserData>({
-    token: '',
-    user: {
-      data: {
-        id: 0,
-        type: 'user',
-        attributes: {
-          name: '',
-          email: '',
-          companies: []
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(() => {
+    return sessionStorage.getItem("isLoggedIn") === "true";
+  });
+  const [token, setToken] = useState<null | string>(() => {
+    return sessionStorage.getItem("token");
+  });
+  const [roles, setRoles] = useState<string[]>(() => {
+    const storedRoles = sessionStorage.getItem("roles");
+    return storedRoles ? JSON.parse(storedRoles) : [];
+  });
+
+
+  const [userData, setUserData] = useState<UserData>(() => {
+    let userData = sessionStorage.getItem("userData")
+    return userData ? JSON.parse(userData) : {    
+      token: '',
+      user: 
+      {
+        data: {
+          id: 0,
+          type: 'user',
+          attributes: {
+            name: '',
+            email: '',
+            companies: []
+          }
         }
       }
-    }
+    };
   });
-
+  
   // Function to set the logged-in state
   const userLogged = (newToken: string, userRoles: string[]) => {
     setIsLoggedIn(true);
+    sessionStorage.setItem("isLoggedIn", "true")
     setToken(newToken);
+    sessionStorage.setItem("token", newToken)
     setRoles(userRoles);
-    console.log(userData, '<-- USER DATA SHOULD SET');
+    sessionStorage.setItem("roles", JSON.stringify(userRoles))
   };
 
   // Function to clear the logged-in state
@@ -59,7 +74,6 @@ export function UserLoggedContextProvider({ children }: React.PropsWithChildren)
         }
       }
     });
-    console.log(userData, '<-- USER DATA SHOULD CLEAR');
   };
 
   // Context value