Replace && operator with optional chaining operator in get notes

Author: blazedglimmer

components/get-notes.tsx

@@ -38,64 +38,63 @@ const GetNotes = async ({
 
   return (
     <section className="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-4 p-4 mt-10">
-      {todosWithCollaborators &&
-        todosWithCollaborators.map(item => {
-          // const { data: collabs, success } = await getCollaborators(item.id);
+      {todosWithCollaborators?.map(item => {
+        // const { data: collabs, success } = await getCollaborators(item.id);
 
-          return (
-            <ListingCard
-              key={item.id}
-              item={item}
-              userId={userId}
-              className={`relative mb-4 border dark:border-slate-700 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 break-inside-avoid-column group ${getLightModeColor(
-                item.todoColor
-              )} ${getDarkModeColor(item.todoColor)}`}
-              collabs={item.collaborators}
-            >
-              <CardHeader className="py-2 px-4">
-                {item.images?.map((item: any) => (
-                  <Image
-                    src={item.url}
-                    key={item.id}
-                    alt="Image"
-                    width={200}
-                    height={200}
-                    className="h-full w-full rounded"
-                    priority={true}
-                  />
+        return (
+          <ListingCard
+            key={item.id}
+            item={item}
+            userId={userId}
+            className={`relative mb-4 border dark:border-slate-700 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 break-inside-avoid-column group ${getLightModeColor(
+              item.todoColor
+            )} ${getDarkModeColor(item.todoColor)}`}
+            collabs={item.collaborators}
+          >
+            <CardHeader className="py-2 px-4">
+              {item.images?.map((item: any) => (
+                <Image
+                  src={item.url}
+                  key={item.id}
+                  alt="Image"
+                  width={200}
+                  height={200}
+                  className="h-full w-full rounded"
+                  priority={true}
+                />
+              ))}
+              <CardTitle className="font-bold text-lg break-words">
+                {item.title}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="py-2 px-4 break-words">
+              {parseFormattedText(item.description)}
+            </CardContent>
+            <CardFooter className="mb-4">
+              {item.collaborators
+                ?.filter(item => item.user.id !== userId)
+                .map(item => (
+                  <Avatar
+                    key={item.user.id}
+                    className="flex items-center justify-center"
+                  >
+                    <AvatarImage
+                      src={item.user.profilePic as string}
+                      alt="AS"
+                      className="cursor-pointer w-7 h-7 rounded-full"
+                      width={50}
+                      height={50}
+                    />
+                    <AvatarFallback className="cursor-pointer w-7 h-7 p-2 shadow rounded-full dark:border border-gray-600 text-xs">
+                      {item.user?.firstName.charAt(0)}
+                      {item.user?.lastName.charAt(0)}
+                    </AvatarFallback>
+                  </Avatar>
                 ))}
-                <CardTitle className="font-bold text-lg break-words">
-                  {item.title}
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="py-2 px-4 break-words">
-                {parseFormattedText(item.description)}
-              </CardContent>
-              <CardFooter className="mb-4">
-                {item.collaborators
-                  ?.filter(item => item.user.id !== userId)
-                  .map(item => (
-                    <Avatar
-                      key={item.user.id}
-                      className="flex items-center justify-center"
-                    >
-                      <AvatarImage
-                        src={item.user.profilePic as string}
-                        alt="AS"
-                        className="cursor-pointer w-7 h-7 rounded-full"
-                        width={50}
-                        height={50}
-                      />
-                      <AvatarFallback className="cursor-pointer w-7 h-7 p-2 shadow rounded-full dark:border border-gray-600 text-xs">
-                        {item.user?.firstName.charAt(0)}
-                        {item.user?.lastName.charAt(0)}
-                      </AvatarFallback>
-                    </Avatar>
-                  ))}
-              </CardFooter>
-            </ListingCard>
-          );
-        })}
+            </CardFooter>
+          </ListingCard>
+        );
+      })}
     </section>
   );
 };