Merge pull request #680 from bounswe/frontend/feature/add_default_pro…

…file_picture

Added default profile picture

frontend/src/components/AnswerCard.tsx

@@ -2,6 +2,7 @@ import { Card } from "@/components/ui/card";
 import { ArrowRight, CornerDownRight, Star } from "lucide-react";
 import React from "react";
 import { Link } from "react-router-dom";
+import placeholderProfile from "@/assets/placeholder_profile.png";
 
 interface AnswerCardProps {
   id: number;
@@ -48,7 +49,8 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
         <div className="flex items-center justify-between">
           <Link to={`/users/${author.id}`} className="h-10 w-10">
             <img
-              src={author.profilePicture}
+              src={author?.profilePicture ||
+                  placeholderProfile}
               alt={"Profile picture"}
               className="rounded-full object-cover"
             />

frontend/src/components/AnswerItem.tsx

@@ -6,6 +6,7 @@ import { ThumbsDown, ThumbsUp } from "lucide-react";
 import React from "react";
 import { Link } from "react-router-dom";
 import { ContentWithSnippets } from "./ContentWithSnippets";
+import placeholderProfile from "@/assets/placeholder_profile.png";
 
 interface AnswerItemProps {
   answer: AnswerDetails;
@@ -61,8 +62,7 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
             >
               <img
                 src={
-                  answer.author?.profilePicture ||
-                  "https://placehold.co/100x100"
+                  answer.author?.profilePicture || placeholderProfile
                 }
                 alt={"Profile picture"}
                 className="h-8 w-8 rounded-full object-cover"

frontend/src/components/HighlightedQuestionCard.tsx

@@ -4,6 +4,7 @@ import { QuestionSummary } from "@/services/api/programmingForumSchemas";
 import { ArrowRight, MessageSquare, Star, StarsIcon } from "lucide-react";
 import React from "react";
 import { Link } from "react-router-dom";
+import placeholderProfile from "@/assets/placeholder_profile.png";
 
 function capitalizeString(difficulty: string): React.ReactNode {
   return difficulty.charAt(0).toUpperCase() + difficulty.slice(1);
@@ -46,7 +47,7 @@ export const HighlightedQuestionCard: React.FC<Partial<QuestionSummary>> = ({
           {author && (
             <Link to={`/users/${author.id}`} className="h-10 w-10">
               <img
-                src={author.profilePicture}
+                src={author?.profilePicture || placeholderProfile}
                 alt={author.name}
                 className="h-full w-full rounded-full object-cover"
               />

frontend/src/components/QuestionCard.tsx

@@ -4,6 +4,8 @@ import { DifficultyLevel } from "@/services/api/programmingForumSchemas";
 import { ArrowRight, MessageSquare, Star, StarsIcon } from "lucide-react";
 import React from "react";
 import { Link } from "react-router-dom";
+import placeholderProfile from "@/assets/placeholder_profile.png";
+
 
 interface QuestionCardProps {
   id: number;
@@ -57,7 +59,8 @@ export const QuestionCard = React.forwardRef<HTMLDivElement, QuestionCardProps>(
             {author && (
               <Link to={`/users/${author.id}`} className="h-10 w-10">
                 <img
-                  src={author.profilePicture}
+                  src={author?.profilePicture ||
+                      placeholderProfile}
                   alt={author.name}
                   className="h-full w-full rounded-full object-cover"
                 />

frontend/src/routes/profile.tsx

@@ -19,6 +19,7 @@ import { Link, useParams } from "react-router-dom";
 
 import { Badge } from "@/components/ui/badge";
 import { Textarea } from "@/components/ui/textarea";
+import placeholderProfile from "@/assets/placeholder_profile.png";
 
 export default function Profile() {
   const { userId = "" } = useParams<{ userId: string }>();
@@ -80,7 +81,7 @@ export default function Profile() {
           <Avatar className="h-24 w-24">
             <AvatarImage
               alt={`Profile picture of ${profile.username}`}
-              src="https://placehold.co/640x640"
+              src={placeholderProfile}
             />
           </Avatar>
           <div className="flex space-x-4 text-center">

frontend/src/routes/question.test.tsx

@@ -17,7 +17,6 @@ import { DifficultyBar } from "@/components/DifficultyBar";
 
 
 
-
 const mockQuestionData = vi.hoisted(
   () =>
     ({

frontend/src/routes/question.tsx

@@ -12,6 +12,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
 import { TagDetails } from "@/services/api/programmingForumSchemas";
+import placeholderProfile from "@/assets/placeholder_profile.png";
 
 import {
   useDeleteQuestion as useDeleteQuestionById,
@@ -225,8 +226,7 @@ export default function QuestionPage() {
             className="flex items-center gap-4"
           >
             <img
-              src={
-                question.author.profilePicture || "https://placehold.co/640x640"
+              src={question.author?.profilePicture || placeholderProfile
               }
               alt={"Profile picture"}
               className="h-8 w-8 rounded-full object-cover"

frontend/src/services/api/programmingForumSchemas.ts

@@ -96,7 +96,7 @@ export type UserProfileUpdate = {
 };
 
 /**
- * @example {"id":1,"username":"john_doe","reputationPoints":100,"profilePicture":"https://placehold.co/640x640","name":"John Doe"}
+ * @example {"id":1,"username":"john_doe","reputationPoints":100,"profilePicture":"frontend\src\assets\placeholder_profile.png","name":"John Doe"}
  */
 export type UserSummary = {
   id: number;

frontend/src/services/temporaryMocks.ts

@@ -28,7 +28,7 @@ export const temporaryMocks = {
           id: 2,
           username: "john_doe",
           reputationPoints: 100,
-          profilePicture: "https://placehold.co/640x640",
+          profilePicture: "frontend\src\assets\placeholder_profile.png",
           name: "John Doe",
           experienceLevel: "INTERMEDIATE",
         },
@@ -62,7 +62,7 @@ export const temporaryMocks = {
               id: 1,
               username: "jane_doe",
               reputationPoints: 150,
-              profilePicture: "https://placehold.co/640x640",
+              profilePicture: "frontend\src\assets\placeholder_profile.png",
               name: "Jane Doe",
               experienceLevel: "EXPERT",
             },
@@ -83,7 +83,7 @@ export const temporaryMocks = {
         id: 2,
         username: "john_doe",
         reputationPoints: 100,
-        profilePicture: "https://placehold.co/640x640",
+        profilePicture: "frontend\src\assets\placeholder_profile.png",
         name: "John Doe",
         experienceLevel: "INTERMEDIATE",
       },

mobile/app/(tabs)/profile.tsx

@@ -37,6 +37,7 @@ import useAuthStore from "@/services/auth";
 import { Link, router } from "expo-router";
 import { ChevronDownIcon, Plus, Bookmark, MenuIcon, LogOutIcon } from "lucide-react-native";
 import { useEffect, useState } from "react";
+import placeholderProfile from "@/assets/images/placeholder_profile.png";
 
 export default function Profile() {
   return <UserProfile userId="me" />;
@@ -141,9 +142,7 @@ export function UserProfile({ userId }: { userId: string }) {
 
         <HStack space="lg" className="items-center justify-between py-4">
           <Image
-            source={{
-              uri: "https://placehold.co/640x640",
-            }}
+            source={profile.profilePicture ? {uri: profile.profilePicture} : placeholderProfile}
             alt={`Profile picture of ${profile.username}`}
             style={{ width: 96, height: 96, borderRadius: 48 }}
           />

mobile/app/question/[questionId].tsx

@@ -37,6 +37,8 @@ import {
 } from "lucide-react-native";
 import { useEffect, useState } from "react";
 import { ScrollView, View } from "react-native";
+import placeholderProfile from "@/assets/images/placeholder_profile.png";
+
 export default function QuestionPage() {
   const { questionId } = useLocalSearchParams();
   const router = useRouter();
@@ -257,11 +259,9 @@ export default function QuestionPage() {
               className="flex flex-row items-center gap-4"
             >
               <Image
-                source={{
-                  uri:
-                    question.author.profilePicture ||
-                    "https://placehold.co/640x640",
-                }}
+                source={
+                  question.author.profilePicture ? {uri: question.author.profilePicture} : placeholderProfile
+                }
                 alt={question.author.name}
                 width={32}
                 height={32}

mobile/components/AnswerCard.tsx

@@ -5,6 +5,7 @@ import { ArrowRight, CornerDownRight, Star } from "lucide-react-native";
 import React from "react";
 import { View } from "react-native";
 import { ContentWithSnippets } from "./ContentWithSnippets";
+import placeholderProfile from "@/assets/images/placeholder_profile.png";
 
 interface AnswerCardProps {
   id: string;
@@ -46,7 +47,7 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
         <View className="flex items-center justify-between">
           <Link href={`/users/${author.id}`}>
             <Image
-              source={{ uri: author.profilePicture }}
+              source={author.profilePicture ? {uri: author.profilePicture} : placeholderProfile}
               alt={author.name}
               className="rounded-full object-cover"
             />

mobile/components/AnswerItem.tsx

@@ -8,6 +8,7 @@ import { ThumbsDown, ThumbsUp } from "lucide-react-native";
 import React from "react";
 import { View } from "react-native";
 import { ContentWithSnippets } from "./ContentWithSnippets";
+import placeholderProfile from "@/assets/images/placeholder_profile.png";
 
 interface AnswerItemProps {
   answer: AnswerDetails;
@@ -69,11 +70,7 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
               className="flex items-center gap-2"
             >
               <Image
-                source={{
-                  uri:
-                    answer.author?.profilePicture ||
-                    "https://placehold.co/100x100",
-                }}
+                source={answer.author.profilePicture ? {uri: answer.author.profilePicture} : placeholderProfile}
                 alt={answer.author?.name}
                 className="h-8 w-8 rounded-full object-cover"
               />

mobile/components/QuestionCard.tsx

@@ -3,6 +3,7 @@ import { DifficultyLevel } from "@/services/api/programmingForumSchemas";
 import { Link } from "expo-router";
 import { ArrowRight, MessageSquare, Star, StarsIcon } from "lucide-react-native";
 import React from "react";
+import placeholderProfile from "@/assets/images/placeholder_profile.png";
 
 interface QuestionCardProps {
   id: string;
@@ -62,9 +63,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
           <HStack className="flex items-center gap-2">
             <Link href={`/users/${author.id}`} className="h-10 w-10">
               <Image
-                source={{
-                  uri: author.profilePicture || "https://placeholder.com/100",
-                }}
+                source={author.profilePicture ? {uri: author.profilePicture} : placeholderProfile}
                 alt={author.name || "Author"}
                 className="h-full w-full rounded-full object-cover"
               />

mobile/services/api/programmingForumSchemas.ts

@@ -96,7 +96,7 @@ export type UserProfileUpdate = {
 };
 
 /**
- * @example {"id":1,"username":"john_doe","reputationPoints":100,"profilePicture":"https://placehold.co/640x640","name":"John Doe"}
+ * @example {"id":1,"username":"john_doe","reputationPoints":100,"profilePicture":"@/assets/images/placeholder_profile.png","name":"John Doe"}
  */
 export type UserSummary = {
   id: number;

mobile/services/temporaryMocks.ts

@@ -28,7 +28,7 @@ export const temporaryMocks = {
           id: 2,
           username: "john_doe",
           reputationPoints: 100,
-          profilePicture: "https://placehold.co/640x640",
+          profilePicture: "@/assets/images/placeholder_profile.png",
           name: "John Doe",
           experienceLevel: "INTERMEDIATE"
         },
@@ -62,7 +62,7 @@ export const temporaryMocks = {
               id: 1,
               username: "jane_doe",
               reputationPoints: 150,
-              profilePicture: "https://placehold.co/640x640",
+              profilePicture: "@/assets/images/placeholder_profile.png",
               name: "Jane Doe",
               experienceLevel: "EXPERT"
             },
@@ -83,7 +83,7 @@ export const temporaryMocks = {
         id: 2,
         username: "john_doe",
         reputationPoints: 100,
-        profilePicture: "https://placehold.co/640x640",
+        profilePicture: "@/assets/images/placeholder_profile.png",
         name: "John Doe",
         experienceLevel: "INTERMEDIATE"
       },