Merge pull request #13 from frank-mendez/hotfix/handle-null-values

fix: handle null values
frank-mendez · Aug 24, 2024 · 9599c19 · 9599c19
2 parents 3919b96 + d4f385f
commit 9599c19
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 19 deletions.
diff --git a/public/assets/images/man.png b/public/assets/images/man.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/components/Header/AccountBar.tsx b/src/components/Header/AccountBar.tsx
@@ -15,7 +15,7 @@ const AccountBar = () => {
   const { data, isPending } = useProfileQuery(accessToken ?? "");
 
   const { setCurrentContent } = useContentStore();
-
+  const srcImage = "/assets/images/man.png";
   return (
     <div
       data-testid="accountbar-element"
@@ -38,10 +38,7 @@ const AccountBar = () => {
             className={`w-10 rounded-full ${isPending ? "skeleton" : ""}`}
           >
             {!isPending && (
-              <img
-                alt="Tailwind CSS Navbar component"
-                src={data ? data?.images[0].url : ""}
-              />
+              <img alt="Tailwind CSS Navbar component" src={srcImage} />
             )}
           </div>
         </div>
@@ -53,7 +50,7 @@ const AccountBar = () => {
           <li>
             <Link
               target="_blank"
-              to={data?.external_urls.spotify ?? ""}
+              to={data?.external_urls?.spotify ?? ""}
               className="justify-between"
             >
               Account

diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx
@@ -8,6 +8,7 @@ const MainContent = () => {
   const { currentContent } = useContentStore();
   const { accessToken } = useAuth();
   const { data, isPending } = useProfileQuery(accessToken ?? "");
+  const srcImage = "/assets/images/man.png";
   return (
     <div
       data-testid="main-content-element"
@@ -17,24 +18,19 @@ const MainContent = () => {
         <div className={`card-body ${isPending ? "skeleton" : ""}`}>
           {!isPending && data && (
             <div className="flex flex-row gap-4 items-center">
-              <img
-                className="mask mask-circle w-[300px]"
-                src={data.images[1].url}
-              />
+              <img className="mask mask-circle w-[300px]" src={srcImage} />
               <div className="flex flex-col justify-around align-middle gap-4">
                 <p className="text-sm">Profile</p>
-                <h1 className="font-bold text-6xl">{data.display_name}</h1>
-                <p className="text-sm">{data.followers.total} Followers</p>
+                <h1 className="font-bold text-6xl">
+                  {data?.display_name ?? "John Doe"}
+                </h1>
+                <p className="text-sm">
+                  {data?.followers?.total ?? 100} Followers
+                </p>
                 <ReactCountryFlag countryCode={data.country} />
               </div>
             </div>
           )}
-          <iframe
-            className="rounded-xl w-full"
-            src="https://open.spotify.com/embed/playlist/37i9dQZEVXbNBz9cRCSFkY?utm_source=generator&theme=0"
-            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-            loading="lazy"
-          ></iframe>
         </div>
       )}
     </div>