added signout button

Watts-Lab · Jul 19, 2024 · 900d99b · 900d99b
1 parent 2cdc950
commit 900d99b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -68,6 +68,7 @@
     "answers": "Answers",
     "browse-list": "Browse the list of statements you have answered so far",
     "delete-account": "Delete account",
+    "signout": "Sign out",
     "insight": "Insight",
     "is-it-common-sense": "Is it common sense?",
     "i-agree": "I agree with this statement",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -196,4 +196,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
@@ -6,6 +6,8 @@ import Footer from "../partials/Footer";
 import DashboardChart from "../partials/DashboardChart";
 import StatementForm from "../components/StatementForm";
 import Backend from "../apis/backend";
+import { useAppDispatch } from '../redux/hooks';
+import { clearUserData } from '../redux/slices/loginSlice';
 
 import { useAppSelector } from "../redux/hooks";
 interface Statement {
@@ -50,6 +52,7 @@ const Dashboard: React.FC = () => {
   const surveySession = useAppSelector((state) => state.login.surveySession);
   const tokenString = localStorage.getItem("token");
   const token = tokenString !== null ? JSON.parse(tokenString) : null;
+  const dispatch = useAppDispatch();
 
   const handleTabClick = (tabId: string) => {
     setActiveTab(tabId);
@@ -67,16 +70,9 @@ const Dashboard: React.FC = () => {
     }
   };
 
-  const signOut = async () => {
-    try {
-      Backend.defaults.headers.common["Authorization"] = token;
-      const response = await Backend.post("/users/deleteaccount", {
-        email: "",
-      });
-      return response.data.ok;
-    } catch (error) {
-      console.log(error);
-    }
+  const signOut = () => {
+    dispatch(clearUserData());
+    navigate('/');
   };
 
   useEffect(() => {
@@ -406,14 +402,24 @@ const Dashboard: React.FC = () => {
                     role="tabpanel"
                     aria-labelledby="settings-tab"
                   >
-                    <button onClick={deleteAccount}>
-                      {/* Delete account */}
-                      {t("dashboard.delete-account")}
-                    </button>
-                    <button onClick={signOut}>
-                      {/* Delete account */}
-                      {t("dashboard.signout")}
-                    </button>
+                    <div className="mb-4">
+                      <button
+                        onClick={deleteAccount}
+                        className="bg-white text-black font-bold py-2 px-4 rounded shadow transition duration-300 ease-in-out hover:shadow-lg"
+                      >
+                        {/* Delete account */}
+                        {t("dashboard.delete-account")}
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        onClick={signOut}
+                        className="bg-white text-black font-bold py-2 px-4 rounded shadow transition duration-300 ease-in-out hover:shadow-lg"
+                      >
+                        {/* Sign out*/}
+                        {t("dashboard.signout")}
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>