Add logout

the-deep · Jul 19, 2023 · 697b1c5 · 697b1c5
1 parent ba375ba
commit 697b1c5
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 8 deletions.
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -1,17 +1,35 @@
-import { useContext, useMemo } from 'react';
-import UserContext from '#contexts/user';
+import { useContext, useMemo, useCallback } from 'react';
 import { NavLink, Link } from 'react-router-dom';
+import { IoLogOutOutline } from 'react-icons/io5';
+import { gql, useMutation } from '@apollo/client';
 import {
     DropdownMenu,
     DropdownMenuItem,
+    useAlert,
 } from '@the-deep/deep-ui';
 
 import Avatar from '#components/Avatar';
+import UserContext from '#contexts/user';
+import {
+    LogoutMutation,
+} from '#generated/types';
 
 import styles from './index.module.css';
 
+const LOGOUT = gql`
+mutation Logout {
+    public {
+        logout {
+            ok
+            errors
+        }
+    }
+}
+`;
+
 function Navbar() {
     const { userDetails } = useContext(UserContext);
+    const alert = useAlert();
 
     const fullName = useMemo(() => (
         `${userDetails?.firstName} ${userDetails?.lastName}`
@@ -20,6 +38,45 @@ function Navbar() {
         userDetails?.lastName,
     ]);
 
+    const [
+        logoutTrigger,
+        { loading: logoutPending },
+    ] = useMutation<LogoutMutation>(
+        LOGOUT,
+        {
+            onCompleted: (response) => {
+                const logoutResponse = response.public.logout;
+                if (!logoutResponse) {
+                    return;
+                }
+                if (logoutResponse.ok) {
+                    alert.show(
+                        'Logged out successfully!',
+                        { variant: 'success' },
+                    );
+                    window.location.reload();
+                } else {
+                    alert.show(
+                        'Failed to log out!',
+                        { variant: 'error' },
+                    );
+                }
+            },
+            onError: () => {
+                alert.show(
+                    'Failed to log out!',
+                    { variant: 'error' },
+                );
+            },
+        },
+    );
+
+    const handleLogoutClick = useCallback(() => {
+        logoutTrigger();
+    }, [
+        logoutTrigger,
+    ]);
+
     return (
         <div className={styles.navbar}>
             <div className={styles.logoContainer}>
@@ -65,6 +122,15 @@ function Navbar() {
                         >
                             Profile
                         </DropdownMenuItem>
+                        <DropdownMenuItem
+                            // FIXME: Fix routes
+                            name={undefined}
+                            actions={<IoLogOutOutline />}
+                            onClick={handleLogoutClick}
+                            disabled={logoutPending}
+                        >
+                            Logout
+                        </DropdownMenuItem>
                     </DropdownMenu>
                 </div>
             </div>

diff --git a/src/index.css b/src/index.css
@@ -3,6 +3,7 @@
     --background-color-gray: #F0F0F0;
     --color-gray1: #FBFBFB;
     --color-gray2: #F5F5F5;
+    --color-gray3: #EAEAEA;
 
     --color-brand: #5A3070;
 

diff --git a/src/views/Home/index.module.css b/src/views/Home/index.module.css
@@ -15,8 +15,8 @@
             display: flex;
             flex-direction: column;
             flex-shrink: 0;
-            padding: var(--dui-spacing-medium);
             background-color: var(--color-gray1);
+            padding: var(--dui-spacing-medium);
             width: var(--width-left-pane);
             gap: var(--dui-spacing-small);
 
@@ -27,7 +27,19 @@
                 .project-item {
                     display: flex;
                     background-color: var(--color-gray2);
-                    padding: var(--dui-spacing-small);
+                    padding: var(--dui-spacing-medium);
+                    text-align: left;
+                    border: unset;
+                    border-radius: 0;
+                    width: 100%;
+
+                    &:hover, &.active {
+                        background-color: var(--color-gray3);
+                    }
+
+                    .description {
+                        display: flex;
+                    }
                 }
             }
         }

diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
@@ -1,10 +1,13 @@
 import { useMemo, useState, useCallback } from 'react';
+import { AiOutlineSearch } from 'react-icons/ai';
+import { _cs } from '@togglecorp/fujs';
 import { gql, useQuery } from '@apollo/client';
 import {
     TextInput,
     ListView,
     TextOutput,
     DateOutput,
+    Button,
 } from '@the-deep/deep-ui';
 
 import Navbar from '#components/Navbar';
@@ -49,22 +52,40 @@ const projectKeySelector = (d: ProjectType) => d.id;
 
 interface ProjectListRenderProps {
     projectItem: ProjectType;
+    onProjectItemClick: React.Dispatch<React.SetStateAction<string | undefined>>;
+    activeProject: string | undefined;
 }
 
 function ProjectListItemRender(props: ProjectListRenderProps) {
     const {
         projectItem,
+        onProjectItemClick,
+        activeProject,
     } = props;
 
     return (
-        <div className={styles.projectItem}>
+        <Button
+            name={projectItem.id}
+            className={_cs(
+                styles.projectItem,
+                activeProject === projectItem.id && styles.active,
+            )}
+            variant="general"
+            onClick={onProjectItemClick}
+        >
             <TextOutput
                 value={projectItem.title}
-                description={<DateOutput value={projectItem.createdAt} />}
+                description={(
+                    <div className={styles.description}>
+                        Created on
+                        &thinsp;
+                        <DateOutput value={projectItem.createdAt} />
+                    </div>
+                )}
                 block
                 spacing="compact"
             />
-        </div>
+        </Button>
     );
 }
 
@@ -73,6 +94,8 @@ export function Component() {
     const [searchText, setSearchText] = useState<string | undefined>();
     const debouncedSearchText = useDebouncedValue(searchText);
 
+    const [activeProject, setActiveProject] = useState<string | undefined>();
+
     const variables = useMemo(() => ({
         search: debouncedSearchText,
         limit: 10,
@@ -95,7 +118,11 @@ export function Component() {
 
     const projectListRendererParams = useCallback((_: string, datum: ProjectType) => ({
         projectItem: datum,
-    }), []);
+        onProjectItemClick: setActiveProject,
+        activeProject,
+    }), [
+        activeProject,
+    ]);
 
     return (
         <div className={styles.page}>
@@ -104,6 +131,7 @@ export function Component() {
                 <div className={styles.leftPane}>
                     <TextInput
                         name={undefined}
+                        icons={<AiOutlineSearch />}
                         placeholder="Search projects"
                         onChange={setSearchText}
                         value={searchText}

diff --git a/src/views/Login/index.tsx b/src/views/Login/index.tsx
@@ -96,6 +96,7 @@ export function Component() {
                         'Logged in successfully!',
                         { variant: 'success' },
                     );
+                    window.location.reload();
                 } else {
                     alert.show(
                         'Failed to log in!',