modularize a bit

Messaging-Application · Mar 1, 2024 · cc350cb · cc350cb
1 parent 55f586d
commit cc350cb
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 82 deletions.
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -3,9 +3,8 @@ import '../index.css'
 import { useState, useContext } from "react";
 import React from 'react';
 import { UserContext } from "./UserProvider";
-import {
-  UserContextType,
-} from "../types";
+import { UserContextType } from "../types";
+import { getCookie, togglePassword } from "../utils";
 import axios from 'axios';
 
 const Login: React.FC = () => {
@@ -40,7 +39,7 @@ const submitHandler = async (event: React.MouseEvent<HTMLButtonElement>) => {
         }).then(response => {
             setUser(response.data);
             localStorage.setItem("user", JSON.stringify(response.data));
-            const cookie = getCookieValue('ChatApp');
+            const cookie = getCookie('ChatApp');
             if (cookie) {
               localStorage.setItem("jwt", cookie);
             }
@@ -52,19 +51,7 @@ const submitHandler = async (event: React.MouseEvent<HTMLButtonElement>) => {
       }
     }
 }   
-
-  const togglePassword = () => {
-    const passwordField = document.getElementById("password") as HTMLInputElement | null;
-    const checkBox = document.getElementById("hs-toggle-password-checkbox") as HTMLInputElement | null;
-
-    if (passwordField && checkBox) {
-      if (checkBox.checked) {
-        passwordField.type = "text";
-      } else {
-        passwordField.type = "password";
-      }
-    }
-  }
+
   return (
     <>
       <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
@@ -157,16 +144,4 @@ const submitHandler = async (event: React.MouseEvent<HTMLButtonElement>) => {
   )
 }
 
-export default Login;
-
-function getCookieValue(cookieName: string) {
-  const cookieString = document.cookie;
-  const cookies = cookieString.split(';');
-  for (const cookie of cookies) {
-    const [name, value] = cookie.trim().split('=');
-    if (name === cookieName) {
-      return value;
-    }
-  }
-  return null; 
-}
+export default Login;
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
@@ -1,15 +1,20 @@
 import '../index.css'
-import { useState } from "react";
+import { useState, useContext } from "react";
 import React from 'react';
+import { UserContext } from "./UserProvider";
+import { UserContextType } from "../types";
 import { 
   validateEmail, 
   validatePassword,  
   validateUsername,  
   passwordsMatch,
   validateName,  
+  togglePasswordConfirm
 } from "../utils";
 
 const Profile: React.FC = () => {
+  const { setUser } = useContext(UserContext) as UserContextType;
+  const user = localStorage.getItem("user");
   const [username, setUsername] = useState<string>("session");
   const [firstname, setFirstname] = useState<string>("session");
   const [lastname, setLastname] = useState<string>("session");
@@ -85,24 +90,31 @@ const Profile: React.FC = () => {
         lastname
       };
       console.log(body);
-      fetch("http://localhost:8080/auth/profile", {
-        method: "PUT",
+      fetch("http://localhost:8080/auth/edit", {
+        method: "PATCH",
         headers: { 
           "Content-Type": "application/json",
-          'Authorization': 'Bearer <your_access_token>', 
+          'Authorization': 'Bearer ' + localStorage.getItem("jwt"), 
         },
         body: JSON.stringify(body),
       })
       .then((response) => {
         console.log('Response status code:', response.status); 
         if (!response.ok) {
-          setErrorMessage("Username already exists");
+          response.json().then(data => {
+            console.log(data.message); 
+            setErrorMessage(data.message);
+          })
           throw new Error("Failed to update profile");
         }
-        // Handle success
-        // setUser(body);
-        // Redirect user to profile page
-        window.location.href = "/profile";
+        // const bodyWithRoles = {
+        //   ...body,
+        //   roles: user.roles
+        // };
+        // localStorage.setItem("user", JSON.stringify(bodyWithRoles));
+        // setUser(bodyWithRoles);
+        window.location.href = "/chat";
+
       })
       .catch((err) => {
         console.error(err.message);
@@ -116,26 +128,6 @@ const Profile: React.FC = () => {
 
   };
 
-  function togglePassword() {
-    const passwordField = document.getElementById("password") as HTMLInputElement | null;
-    const confirmField = document.getElementById("confirm") as HTMLInputElement | null;
-    const checkBox = document.getElementById("hs-toggle-password-checkbox") as HTMLInputElement | null;
-
-    if (passwordField && checkBox) {
-      if (checkBox.checked) {
-        passwordField.type = "text";
-      } else {
-        passwordField.type = "password";
-      }
-    }
-    if (confirmField && checkBox) {
-      if (checkBox.checked) {
-        confirmField.type = "text";
-      } else {
-        confirmField.type = "password";
-      }
-    }
-  }
   return (
     <>
       <div className="justify-center px-6 py-12 lg:px-8">
@@ -284,7 +276,7 @@ const Profile: React.FC = () => {
                 <div className="flex mt-4">
                   <input data-hs-toggle-password='{
                       "target": "#password, #confirm"
-                    }' onChange={togglePassword} id="hs-toggle-password-checkbox" type="checkbox" className="shrink-0 mt-0.5 border-gray-200 rounded"/>
+                    }' onChange={togglePasswordConfirm} id="hs-toggle-password-checkbox" type="checkbox" className="shrink-0 mt-0.5 border-gray-200 rounded"/>
                   <label htmlFor="hs-toggle-password-checkbox" className="text-sm text-gray-500 ms-3 dark:text-gray-400">Show password</label>
                 </div>
 

diff --git a/src/components/Register.tsx b/src/components/Register.tsx
@@ -8,6 +8,7 @@ import {
   validateUsername,  
   passwordsMatch,
   validateName,  
+  togglePasswordConfirm
 } from "../utils";
 
 const Register: React.FC = () => {
@@ -80,26 +81,6 @@ const Register: React.FC = () => {
 
   };
 
-  function togglePassword() {
-    const passwordField = document.getElementById("password") as HTMLInputElement | null;
-    const confirmField = document.getElementById("confirm") as HTMLInputElement | null;
-    const checkBox = document.getElementById("hs-toggle-password-checkbox") as HTMLInputElement | null;
-
-    if (passwordField && checkBox) {
-      if (checkBox.checked) {
-        passwordField.type = "text";
-      } else {
-        passwordField.type = "password";
-      }
-    }
-    if (confirmField && checkBox) {
-      if (checkBox.checked) {
-        confirmField.type = "text";
-      } else {
-        confirmField.type = "password";
-      }
-    }
-  }
   return (
     <>
       <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
@@ -248,7 +229,7 @@ const Register: React.FC = () => {
                 <div className="flex mt-4">
                   <input data-hs-toggle-password='{
                       "target": "#password, #confirm"
-                    }' onChange={togglePassword} id="hs-toggle-password-checkbox" type="checkbox" className="shrink-0 mt-0.5 border-gray-200 rounded"/>
+                    }' onChange={togglePasswordConfirm} id="hs-toggle-password-checkbox" type="checkbox" className="shrink-0 mt-0.5 border-gray-200 rounded"/>
                   <label htmlFor="hs-toggle-password-checkbox" className="text-sm text-gray-500 ms-3 dark:text-gray-400">Show password</label>
                 </div>
 

diff --git a/src/utils/getCookie.tsx b/src/utils/getCookie.tsx
@@ -0,0 +1,11 @@
+export const getCookie = (cookieName: string) => {
+    const cookieString = document.cookie;
+    const cookies = cookieString.split(';');
+    for (const cookie of cookies) {
+      const [name, value] = cookie.trim().split('=');
+      if (name === cookieName) {
+        return value;
+      }
+    }
+    return null; 
+  }
diff --git a/src/utils/index.tsx b/src/utils/index.tsx
@@ -1 +1,4 @@
-export * from "./validation";
+export * from "./validation";
+export * from "./toggle";
+export * from "./getCookie";
+
diff --git a/src/utils/toggle.tsx b/src/utils/toggle.tsx
@@ -0,0 +1,34 @@
+export const togglePasswordConfirm = () => {
+    const passwordField = document.getElementById("password") as HTMLInputElement | null;
+    const confirmField = document.getElementById("confirm") as HTMLInputElement | null;
+    const checkBox = document.getElementById("hs-toggle-password-checkbox") as HTMLInputElement | null;
+
+    if (passwordField && checkBox) {
+      if (checkBox.checked) {
+        passwordField.type = "text";
+      } else {
+        passwordField.type = "password";
+      }
+    }
+    if (confirmField && checkBox) {
+      if (checkBox.checked) {
+        confirmField.type = "text";
+      } else {
+        confirmField.type = "password";
+      }
+    }
+  }
+
+
+  export const togglePassword = () => {
+    const passwordField = document.getElementById("password") as HTMLInputElement | null;
+    const checkBox = document.getElementById("hs-toggle-password-checkbox") as HTMLInputElement | null;
+
+    if (passwordField && checkBox) {
+      if (checkBox.checked) {
+        passwordField.type = "text";
+      } else {
+        passwordField.type = "password";
+      }
+    }
+  }