Merge pull request #91 from deepraj21/main

fixed profile section
devhub-ai · Nov 21, 2024 · e98b8f8 · e98b8f8
2 parents ba901a7 + 2dd105a
commit e98b8f8
Show file tree

Hide file tree

Showing 14 changed files with 562 additions and 378 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/Projects/AddProject.tsx b/client/src/components/Projects/AddProject.tsx
@@ -104,7 +104,7 @@ const AddProject: React.FC<{ onProjectChange: () => void }> = ({ onProjectChange
                 toast.success('Project added successfully');
                 setNewProject({ title: '', description: '', repoLink: '', tags: [], imageUrl: '' }); // Reset form
                 setImageFile(null); // Reset the image file
-                onProjectChange();
+                onProjectChange(); // Trigger refresh
             } else {
                 toast.error('Failed to add project');
             }

diff --git a/client/src/components/Settings/BannerUpdate.tsx b/client/src/components/Settings/BannerUpdate.tsx
@@ -0,0 +1,9 @@
+
+
+const BannerUpdate = () => {
+  return (
+    <div>BannerUpdate</div>
+  )
+}
+
+export default BannerUpdate
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=' 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'>
-          <div>
-            <Label htmlFor='githubUsername' className='dark:text-neutral-200'>
-              GitHub Username
+        <ScrollArea className='h-60 overflow-y-auto p-2'>
+          <div className='p-2'>
+            <Label htmlFor='profileImage' className='dark:text-neutral-200 mb-1'>
+              Profile Image
+            </Label>
+            <UploadComponent onFileChange={handleFileChange} />
+          </div>
+          <div className='p-2'>
+            <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
+          <div className='p-2'>
+            <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 className='p-2'>
+            <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 p-2'>
+            <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 Account
+      </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>