From 63fbb4e87a13028dd5856198b5526e5f6656c1a2 Mon Sep 17 00:00:00 2001
From: Jakub <jczekanski123@gmail.com>
Date: Fri, 13 Sep 2024 13:54:26 +0200
Subject: [PATCH] fix: show default avatar on image load error

---
 public/data/Om-pawarr.json         | 23 +++++++-------
 public/data/adityashah7867.json    | 51 +++++++++++++++---------------
 public/data/giuliarappo.json       | 22 ++++++-------
 src/ProfilesList.json              |  2 +-
 src/components/Profile/Profile.jsx | 20 ++++++++----
 5 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/public/data/Om-pawarr.json b/public/data/Om-pawarr.json
index b09f4260..474955e5 100644
--- a/public/data/Om-pawarr.json
+++ b/public/data/Om-pawarr.json
@@ -1,14 +1,13 @@
 {
-    "name": "Om pawar",
-    "location": "Maharashtra",
-    "bio": "A Web Developer specializing in HTML5,css, JavaScript,  and front-end frameworks",
-    "avatar": "https://avatars.githubusercontent.com/u/124502159?s=400&u=3691e22cc07794bb421cee5c655dca4d8da244c9&v=4",
-    "portfolio": "",
-    "skills": ["Front end frameworks expertise", "AWS associate level certified", "..."],
-    "social": {
-      "GitHub": "https://github.com/Om-pawarr",
-      "Twitter": "https://twitter.com/@_Parth_Dwivedi_",
-      "LinkedIn": ""
-    }
+  "name": "Om pawar",
+  "location": "Maharashtra",
+  "bio": "A Web Developer specializing in HTML5,css, JavaScript,  and front-end frameworks",
+  "avatar": "https://avatars.githubusercontent.com/u/124502159?s=400&u=3691e22cc07794bb421cee5c655dca4d8da244c9&v=4",
+  "portfolio": "",
+  "skills": ["Front end frameworks expertise", "AWS associate level certified", "..."],
+  "social": {
+    "GitHub": "https://github.com/Om-pawarr",
+    "Twitter": "https://twitter.com/@_Parth_Dwivedi_",
+    "LinkedIn": ""
   }
-  
\ No newline at end of file
+}
diff --git a/public/data/adityashah7867.json b/public/data/adityashah7867.json
index 2dfe82a8..1ae217d5 100644
--- a/public/data/adityashah7867.json
+++ b/public/data/adityashah7867.json
@@ -1,28 +1,27 @@
 {
-    "name": "Aditya Nikunj Shah",
-    "location": "Mumbai, India 🇮🇳",
-    "bio": "FULL STACK DEV",
-    "avatar": "https://adityadevappweb.s3.ap-south-1.amazonaws.com/Untitled+design.png",
-    "portfolio": "https://adityanshah.netlify.app/",
-    "skills": [
-      "Javascript",
-      "C++",
-      "Typescript",
-      "Nodejs",
-      "Expressjs",
-      "React",
-      "Next.Js",
-      "MySQL",
-      "MongoDB",
-      "Docker",
-      "Git",
-      "Tailwind CSS",
-      "REST APIs",
-      "GraphQL"
-    ],
-    "social": {
-      "GitHub": "https://github.com/adityashah7867",
-      "LinkedIn": "https://www.linkedin.com/in/adi-tya-shah"
-    }
+  "name": "Aditya Nikunj Shah",
+  "location": "Mumbai, India 🇮🇳",
+  "bio": "FULL STACK DEV",
+  "avatar": "https://adityadevappweb.s3.ap-south-1.amazonaws.com/Untitled+design.png",
+  "portfolio": "https://adityanshah.netlify.app/",
+  "skills": [
+    "Javascript",
+    "C++",
+    "Typescript",
+    "Nodejs",
+    "Expressjs",
+    "React",
+    "Next.Js",
+    "MySQL",
+    "MongoDB",
+    "Docker",
+    "Git",
+    "Tailwind CSS",
+    "REST APIs",
+    "GraphQL"
+  ],
+  "social": {
+    "GitHub": "https://github.com/adityashah7867",
+    "LinkedIn": "https://www.linkedin.com/in/adi-tya-shah"
   }
-  
\ No newline at end of file
+}
diff --git a/public/data/giuliarappo.json b/public/data/giuliarappo.json
index 1c40d822..614234a9 100644
--- a/public/data/giuliarappo.json
+++ b/public/data/giuliarappo.json
@@ -1,12 +1,12 @@
 {
-    "name": "Giulia",
-    "location": "Italy",
-    "bio": "Junior fullstack delevoper searching a project to collaborate for improve skills",
-    "avatar": "https://github.com/giuliarappo.png",
-    "portfolio": "https://github.com/giuliarappo",
-    "skills": ["Java", "Spring boot", "Angular", "React"],
-    "social": {
-      "GitHub": "https://github.com/<giuliarappo>",
-      "LinkedIn": "https://www.linkedin.com/in/<giulia-rappo>"
-    }
-  }
\ No newline at end of file
+  "name": "Giulia",
+  "location": "Italy",
+  "bio": "Junior fullstack delevoper searching a project to collaborate for improve skills",
+  "avatar": "https://github.com/giuliarappo.png",
+  "portfolio": "https://github.com/giuliarappo",
+  "skills": ["Java", "Spring boot", "Angular", "React"],
+  "social": {
+    "GitHub": "https://github.com/<giuliarappo>",
+    "LinkedIn": "https://www.linkedin.com/in/<giulia-rappo>"
+  }
+}
diff --git a/src/ProfilesList.json b/src/ProfilesList.json
index 4c4882cb..e6d7f06a 100644
--- a/src/ProfilesList.json
+++ b/src/ProfilesList.json
@@ -442,4 +442,4 @@
   "Om-pawarr.json",
   "boytur.json",
   "giuliarappo.json"
-]
\ No newline at end of file
+]
diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.jsx
index 61013fb5..0c340ea6 100644
--- a/src/components/Profile/Profile.jsx
+++ b/src/components/Profile/Profile.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { FaGithub, FaLinkedin } from 'react-icons/fa';
 import { FaXTwitter, FaLocationDot } from 'react-icons/fa6';
 import defaultAvatar from './image.png';
@@ -9,10 +9,13 @@ function Profile({ data }) {
 
 function Card({ data }) {
   const cardRef = React.useRef();
-  // const [imageSrc, setImageSrc] = useState(data.avatar);
-  // const handleImageError = () => {
-  //   setImageSrc(defaultAvatar); // Fallback to default image
-  // };
+  const [imageSrc, setImageSrc] = useState(data.avatar);
+  const handleImageError = () => {
+    setImageSrc(defaultAvatar);
+  };
+  useEffect(() => {
+    setImageSrc(data.avatar);
+  }, [data.avatar]);
 
   const handleWheel = (event) => {
     event.stopPropagation();
@@ -36,7 +39,12 @@ function Card({ data }) {
     <div className="mb-6 h-auto rounded-lg bg-white p-4 shadow dark:bg-textPrimary">
       <div className="relative flex gap-4">
         <div className="h-24 w-24 flex-shrink-0">
-          <img src={data.avatar} alt="User logo" className="h-full w-full rounded-full" />
+          <img
+            src={imageSrc + '?t=' + new Date().getTime()} // Adding timestamp to force reload
+            alt="User logo"
+            className="h-full w-full rounded-full"
+            onError={handleImageError}
+          />
         </div>
         <div className="w-[55%] sm:w-[75%]">
           <h3>