added profile image to dashboard

Lina0Elman · Lina0Elman · commit 880fe5a7a5eb · 2025-06-14T19:22:54.000+03:00
diff --git a/nextstep-frontend/src/components/NewPost.tsx b/nextstep-frontend/src/components/NewPost.tsx
@@ -45,10 +45,7 @@ const NewPostModal: React.FC<NewPostModalProps> = ({ open, onClose, onPostCreate
   const [content, setContent] = useState<string>("")
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [resumeData, setResumeData] = useState<any>(null)
   const [resumeFile, setResumeFile] = useState<File | null>(null)
-  const [isLoadingResume, setIsLoadingResume] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
   const editorRef = useRef<any>(null)
   const auth = getUserAuth();
   const [mountedEditor, setMountedEditor] = useState(false)
@@ -148,7 +145,6 @@ const NewPostModal: React.FC<NewPostModalProps> = ({ open, onClose, onPostCreate
       setTitle("")
       setContent("<p> I wanted to share.... </p>")
       setError(null)
-      setResumeData(null)
       setResumeFile(null)
     }
   }, [open, withResume])
@@ -174,7 +170,6 @@ const NewPostModal: React.FC<NewPostModalProps> = ({ open, onClose, onPostCreate
 
   const fetchResumeData = async () => {
     try {
-      setIsLoadingResume(true)
       const resumeResponse = await api.get("/resume")
 
       if (resumeResponse.data && resumeResponse.data.rawContentLink) {
@@ -187,54 +182,13 @@ const NewPostModal: React.FC<NewPostModalProps> = ({ open, onClose, onPostCreate
           type: "application/pdf",
         })
 
-        setResumeData(resumeResponse.data)
         setResumeFile(resumeFileObj)
       } else {
         setError("No resume found. Please upload a resume first.")
       }
     } catch (err) {
       console.error("Failed to fetch resume data:", err)
       setError("Failed to load resume. Please try again later.")
-    } finally {
-      setIsLoadingResume(false)
-    }
-  }
-
-  const handleFroalaImageUpload = async (file: File) => {
-    try {
-      const formData = new FormData()
-      formData.append("file", file)
-
-      const response = await api.post("/resource/image", formData, {
-        headers: {
-          "Content-Type": "multipart/form-data",
-          Authorization: `Bearer ${auth.accessToken}`,
-        },
-      })
-
-      return JSON.stringify({ link: response.data.url })
-    } catch (error) {
-      console.error("Error uploading image:", error)
-      throw error
-    }
-  }
-
-  const handleFroalaFileUpload = async (file: File) => {
-    try {
-      const formData = new FormData()
-      formData.append("file", file)
-
-      const response = await api.post("/resource/file", formData, {
-        headers: {
-          "Content-Type": "multipart/form-data",
-          Authorization: `Bearer ${auth.accessToken}`,
-        },
-      })
-
-      return JSON.stringify({ link: response.data.url, name: file.name })
-    } catch (error) {
-      console.error("Error uploading file:", error)
-      throw error
     }
   }
 
diff --git a/nextstep-frontend/src/pages/Feed.tsx b/nextstep-frontend/src/pages/Feed.tsx
@@ -149,11 +149,6 @@ const Feed: React.FC = () => {
     setSavedPosts((prev) => (prev.includes(postId) ? prev.filter((id) => id !== postId) : [...prev, postId]))
   }
 
-  const formatContent = (content: string) => {
-    // Strip HTML tags for preview
-    const strippedContent = content.replace(/<[^>]*>?/gm, "")
-    return strippedContent.length > 150 ? strippedContent.substring(0, 150) + "..." : strippedContent
-  }
 
   const formatDate = (dateString: string) => {
     if (!dateString) return ""
diff --git a/nextstep-frontend/src/pages/MainDashboard.tsx b/nextstep-frontend/src/pages/MainDashboard.tsx
@@ -39,11 +39,13 @@ import {
   Business,
   CheckCircle,
   InsertDriveFile,
+  Delete,
 } from "@mui/icons-material"
 import { connectToGitHub, initiateGitHubOAuth, fetchRepoLanguages, handleGitHubOAuth } from "../handlers/githubAuth"
 import api from "../serverApi"
 import LinkedinJobs from "../components/LinkedinJobs"
 import { motion } from "framer-motion"
+import { getUserAuth } from "../handlers/userAuth"
 
 const roles = [
   "Software Engineer",
@@ -72,7 +74,7 @@ const skillsList = [
 ]
 
 const MainDashboard: React.FC = () => {
-  const theme = useTheme()
+  const theme = useTheme();
   const [aboutMe, setAboutMe] = useState(() => localStorage.getItem("aboutMe") || "")
   const [skills, setSkills] = useState<string[]>(() => JSON.parse(localStorage.getItem("skills") || "[]"))
   const [newSkill, setNewSkill] = useState("")
@@ -87,6 +89,9 @@ const MainDashboard: React.FC = () => {
   const [roleMatch, setRoleMatch] = useState<string>("")
   const [resumeFileName, setResumeFileName] = useState<string>("")
 
+  // Profile image state
+  const [image, setImage] = useState<string | null>(null)
+  
   // Skills toggle
   const [showAllSkills, setShowAllSkills] = useState(false)
   const SKILL_DISPLAY_LIMIT = 4
@@ -186,6 +191,22 @@ const MainDashboard: React.FC = () => {
     }
   }
 
+   useEffect(() => {
+      const fetchProfileImage = async () => {
+        try {
+          const response = await api.get(`/resource/image/${getUserAuth().imageFilename}`, {
+            responseType: 'blob',
+          });
+          const imageUrl = URL.createObjectURL(response.data as Blob);
+          setImage(imageUrl);
+        } catch (error) {
+          console.log('Error fetching profile image.');
+          setImage(null);
+        }
+      };
+     getUserAuth().imageFilename && fetchProfileImage();
+    }, []);
+
   // Upload & parse resume
   const handleResumeUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
 
@@ -267,6 +288,10 @@ const MainDashboard: React.FC = () => {
 
   const profileCompletion = calculateProfileCompletion()
 
+  const handleRemoveAllSkills = () => {
+    setSkills([]);
+  };
+
   return (
     <Box sx={{ minHeight: "100vh", py: 4 }}>
       <Container maxWidth="xl">
@@ -357,7 +382,7 @@ const MainDashboard: React.FC = () => {
                     {/* Upload Section */}
                     <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3 }}>
                       <Box sx={{ display: "flex", alignItems: "center" }}>
-                        <Avatar
+                        { !image ? <Avatar
                           sx={{
                             bgcolor: alpha(theme.palette.primary.main, 0.1),
                             color: theme.palette.primary.main,
@@ -367,7 +392,10 @@ const MainDashboard: React.FC = () => {
                           }}
                         >
                           <PersonIcon sx={{ fontSize: 28 }} />
-                        </Avatar>
+                        </Avatar> : 
+                        <Avatar src={image} alt="Profile" style={{ width: 56, height: 56, marginTop: '16px', objectFit: 'cover', margin:7 }} />
+
+                        }
                         <Box>
                           <Typography variant="h5" fontWeight={700} sx={{ mb: 0.5 }}>
                             About Me
@@ -463,6 +491,7 @@ const MainDashboard: React.FC = () => {
                         border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
                         boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
                         transition: "all 0.3s ease",
+                        position: 'relative', // Add position relative
                         "&:hover": {
                           transform: "translateY(-4px)",
                           boxShadow: `0 12px 48px ${alpha(theme.palette.common.black, 0.15)}`,
@@ -491,7 +520,11 @@ const MainDashboard: React.FC = () => {
                             </Typography>
                           </Box>
                         </Box>
-
+                        <Tooltip title="Remove all skills" arrow>
+                          <Button size="small" onClick={handleRemoveAllSkills} sx={{ mb: 2, position: 'absolute', top: 8, right: 8 }}>
+                            <Delete/>
+                          </Button>
+                        </Tooltip>
                         <Stack direction="row" spacing={1} sx={{ flexWrap: "wrap", mb: 2, gap: 1 }}>
                           {(showAllSkills ? skills : skills.slice(0, SKILL_DISPLAY_LIMIT)).map((skill, index) => (
                             <Chip
diff --git a/nextstep-frontend/src/pages/Profile.tsx b/nextstep-frontend/src/pages/Profile.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Container, Typography, Box, Button, Alert, TextField, Collapse } from '@mui/material';
 import { ExpandMore, ExpandLess } from '@mui/icons-material';
-import {getUserAuth} from "../handlers/userAuth.ts";
+import {getUserAuth, setUserAuth} from "../handlers/userAuth.ts";
 import api from "../serverApi.ts";
 import {UserProfile} from "../models/UserProfile.ts";
 import defaultProfileImage from '../../assets/defaultProfileImage.jpg';
@@ -36,6 +36,7 @@ const Profile: React.FC = () => {
       const response = await api.get(`/user/${getUserAuth().userId}`);
       const userProfile = response.data as UserProfile;
       // setProfile(userProfile);
+      setUserAuth({...auth, imageFilename: userProfile.imageFilename})
       setUserName(userProfile.username);
       setEmail(userProfile.email);
       return userProfile;
@@ -67,7 +68,6 @@ const Profile: React.FC = () => {
         },
       });
 
-      // setUserAuth({...auth, imageFilename: (response.data as LoginResponse).imageFilename})
       if (response.status === 201) {
         setSuccess(true);
         setError('');
