feat: add Delete Account functionality and update UI components

deepraj21 · Nov 19, 2024 · be84b4e · be84b4e
1 parent ba901a7
commit be84b4e
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -110,9 +110,6 @@ Our API is designed to give you access to all core functionalities of DevHub pro
 
 <a href="https://documenter.getpostman.com/view/37803453/2sAXxP9Cxo" target="_blank"><img src="https://img.shields.io/badge/Postman-View%20Documentation-orange?style=flat&logo=postman" /></a>
 
-For the full API documentation, visit the following link:  
-[Postman API Documentation](https://documenter.getpostman.com/view/37803453/2sAXxP9Cxo)
-
 ## Conclusion 🎉
 By integrating LLMs for natural language understanding, LangChain for workflow enhancement, and Neo4j for advanced data storage and querying, DevHub offers a comprehensive solution for devs seeking meaningful collaborations. This combination not only enhances user experience but also ensures that connections are based on relevant skills and interests, leading to more effective teamwork.
 

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -17,7 +17,6 @@ import UserPosts from './pages/UserPosts';
 import ShowPostByID from './components/Posts/ShowPostByID';
 
 const App = () => {
-
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
       <Router>

diff --git a/client/src/components/Navbar/Navbar.tsx b/client/src/components/Navbar/Navbar.tsx
@@ -6,13 +6,13 @@ export type IconProps = React.HTMLAttributes<SVGElement> & React.ImgHTMLAttribut
 
 export function Navbar() {
   const gotoGithub = () => {
-    window.location.href = "https://github.com"
+    window.location.href = "https://github.com/devhub-ai/devhub"
   }
   const gotoDiscord = () => {
     window.location.href = "https://discord.gg/u86Gy2qFHm"
   }
   const gotoFeed = () => {
-    window.location.href = "https://devhub.page/feed"
+    window.location.href = "https://devhub.page/feed" 
   }
   return (
     <div className="relative">
@@ -52,9 +52,7 @@ const Icons = {
     />
   ),
   Feed: (props: IconProps) => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" {...props}>
-      <path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1" />
-    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-gallery-vertical-end" {...props}><path d="M7 2h10" /><path d="M5 6h14" /><rect width="18" height="12" x="3" y="10" rx="2" /></svg>
   ),
   Discord:(props: IconProps) => (
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" {...props}>

diff --git a/client/src/components/Settings/DeleteAccount.tsx b/client/src/components/Settings/DeleteAccount.tsx
@@ -0,0 +1,53 @@
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import { Button } from "@/components/ui/button";
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { Icons } from "@/components/ui/icons";
+
+const username = localStorage.getItem('devhub_username');
+const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
+
+const DeleteAccount = () => {
+    const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleDelete = async () => {
+        setIsLoading(true);
+        try {
+            const response = await axios.delete(`${backendUrl}/profile/delete/${username}`);
+            if (response.status === 200) {
+                toast.success('Account deleted successfully.');
+                localStorage.removeItem('devhub_username');
+                navigate('/');
+            } else {
+                toast.error('Failed to delete account.');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            toast.error('An error occurred while deleting the account.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className='sm:w-80 grid gap-6'>
+            <p className='text-sm'>Once you delete an account, there is no going back. Please be certain.</p>
+            <Button
+                variant="destructive"
+                className='w-full mt-2'
+                onClick={handleDelete}
+                disabled={isLoading}
+            >
+                {isLoading ? (
+                    <>
+                        <Icons.spinner className="mr-2 h-4 w-4 animate-spin" /> 'Deleting...'
+                    </>
+                ) : 'Delete Account'}
+            </Button>
+        </div>
+    );
+};
+
+export default DeleteAccount;
diff --git a/client/src/components/Settings/UpdateProfile.tsx b/client/src/components/Settings/UpdateProfile.tsx
@@ -7,6 +7,7 @@ import { toast } from 'sonner';
 import { Textarea } from '../ui/textarea';
 import { Icons } from "@/components/ui/icons";
 import UploadComponent from '@/components/UploadComponent/UploadComponent';
+import { ScrollArea } from "@/components/ui/scroll-area"
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
 
@@ -100,89 +101,91 @@ const UpdateProfile = () => {
   };
 
   return (
-    <div className='p-2 mt-4 h-full overflow-auto'>
-      <h2 className='text-xl font-semibold mb-4 dark:text-neutral-100'>
+    <div className='p-2 mt-4 grid gap-6 sm:w-80'>
+      <h2 className='text-xl font-semibold dark:text-neutral-100'>
         Update Profile
       </h2>
       <form onSubmit={handleSubmit} className='grid gap-4'>
-        <div>
-          <Label htmlFor='profileImage' className='dark:text-neutral-200 mb-1'>
-            Profile Image
-          </Label>
-          <UploadComponent onFileChange={handleFileChange}/>
-        </div>
-        <div>
-          <Label htmlFor='name' className='dark:text-neutral-200'>
-            Name
-          </Label>
-          <Input
-            id='name'
-            name='name'
-            value={profileData.name || ''}
-            onChange={handleChange}
-            disabled={isLoading}
-            placeholder='Your name'
-            className='mt-1'
-          />
-        </div>
-        <div>
-          <Label htmlFor='bio' className='dark:text-neutral-200'>
-            Bio
-          </Label>
-          <Textarea
-            id='bio'
-            name='bio'
-            value={profileData.bio || ''}
-            onChange={handleChange}
-            disabled={isLoading}
-            placeholder='Write something about yourself'
-            className='mt-1'
-          />
-        </div>
-        <div>
-          <Label htmlFor='location' className='dark:text-neutral-200'>
-            Location
-          </Label>
-          <Input
-            id='location'
-            name='location'
-            value={profileData.location || ''}
-            onChange={handleChange}
-            disabled={isLoading}
-            placeholder='Your location'
-            className='mt-1'
-          />
-        </div>
-        <div className='grid grid-cols-1 sm:grid-cols-2 gap-6'>
+        <ScrollArea className='h-60 overflow-y-auto p-4'>
           <div>
-            <Label htmlFor='githubUsername' className='dark:text-neutral-200'>
-              GitHub Username
+            <Label htmlFor='profileImage' className='dark:text-neutral-200 mb-1'>
+              Profile Image
+            </Label>
+            <UploadComponent onFileChange={handleFileChange} />
+          </div>
+          <div>
+            <Label htmlFor='name' className='dark:text-neutral-200'>
+              Name
             </Label>
             <Input
-              id='githubUsername'
-              name='githubUsername'
-              value={profileData.githubUsername || ''}
+              id='name'
+              name='name'
+              value={profileData.name || ''}
               onChange={handleChange}
               disabled={isLoading}
-              placeholder='GitHub username'
+              placeholder='Your name'
               className='mt-1'
             />
           </div>
           <div>
-            <Label htmlFor='leetcodeUsername' className='dark:text-neutral-200'>
-              Leetcode Username
+            <Label htmlFor='bio' className='dark:text-neutral-200'>
+              Bio
+            </Label>
+            <Textarea
+              id='bio'
+              name='bio'
+              value={profileData.bio || ''}
+              onChange={handleChange}
+              disabled={isLoading}
+              placeholder='Write something about yourself'
+              className='mt-1'
+            />
+          </div>
+          <div>
+            <Label htmlFor='location' className='dark:text-neutral-200'>
+              Location
             </Label>
             <Input
-              id='leetcodeUsername'
-              name='leetcodeUsername'
-              value={profileData.leetcodeUsername || ''}
+              id='location'
+              name='location'
+              value={profileData.location || ''}
               onChange={handleChange}
               disabled={isLoading}
-              placeholder='Leetcode username'
+              placeholder='Your location'
               className='mt-1'
             />
           </div>
-        </div>
+          <div className='grid grid-cols-1 sm:grid-cols-2 gap-6'>
+            <div>
+              <Label htmlFor='githubUsername' className='dark:text-neutral-200'>
+                GitHub
+              </Label>
+              <Input
+                id='githubUsername'
+                name='githubUsername'
+                value={profileData.githubUsername || ''}
+                onChange={handleChange}
+                disabled={isLoading}
+                placeholder='GitHub username'
+                className='mt-1'
+              />
+            </div>
+            <div>
+              <Label htmlFor='leetcodeUsername' className='dark:text-neutral-200'>
+                Leetcode
+              </Label>
+              <Input
+                id='leetcodeUsername'
+                name='leetcodeUsername'
+                value={profileData.leetcodeUsername || ''}
+                onChange={handleChange}
+                disabled={isLoading}
+                placeholder='Leetcode username'
+                className='mt-1'
+              />
+            </div>
+          </div>
+        </ScrollArea>
         <Button type='submit' disabled={isLoading} className='w-full mt-4'>
           {isLoading ? (
             <>

diff --git a/client/src/components/Settings/WebappSettings.tsx b/client/src/components/Settings/WebappSettings.tsx
@@ -1,13 +1,18 @@
 import { ModeToggle } from "../Theme/mode-toggle"
+import DeleteAccount from "./DeleteAccount"
 
 const WebappSettings = () => {
   return (
-    <div className = 'p-2 mt-4 h-full overflow-auto'>
-          <h2 className='text-xl font-semibold mb-4 dark:text-neutral-100'>
-              Update Theme
-          </h2>
-          <ModeToggle/>
-    </div>
+    <div className='p-2 mt-4 h-full overflow-auto'>
+      <h2 className='text-xl font-semibold mb-4 dark:text-neutral-100'>
+        Update Theme
+      </h2>
+      <ModeToggle />
+      <h2 className='text-xl font-semibold mb-4 dark:text-neutral-100 mt-4'>
+        Delete Acc
+      </h2>
+      <DeleteAccount />
+    </div>  
   )
 }
 

diff --git a/client/src/components/Sidebar/Sidebar.tsx b/client/src/components/Sidebar/Sidebar.tsx
@@ -1,14 +1,14 @@
 import {
     Inbox,
-    MessageCircleQuestion,
+    CircleHelp,
     Settings,
     Sparkles,
     CircleUser,
     LogOut,
     MessagesSquare,
     ChartNetwork,
     SquarePlus,
-    Rss,
+    GalleryVerticalEnd,
     House
 } from "lucide-react"
 import { Separator } from "@/components/ui/separator"
@@ -126,7 +126,7 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
                     <SidebarMenuItem>
                         <SidebarMenuButton asChild>
                             <a href={'/feed'}>
-                                <Rss />
+                                <GalleryVerticalEnd />
                                 <span>Feed</span>
                             </a>
                         </SidebarMenuButton>
@@ -172,7 +172,7 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
                                     <SidebarMenuItem >
                                         <SidebarMenuButton asChild>
                                             <div>
-                                                <MessageCircleQuestion />
+                                                <CircleHelp />
                                                 <span>Help</span>
                                             </div>
                                         </SidebarMenuButton>