From d5d052b9b2b89aa9c1a7707bd1b0299cd5ef43b0 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 25 May 2023 17:47:20 +0330 Subject: [PATCH] many more improvements --- components/CollectionCard.tsx | 89 ++++++++++++++++------------- components/ImageWithFallback.tsx | 27 +++++++++ components/LinkList.tsx | 4 +- components/Modal/AddCollection.tsx | 13 +++-- components/Modal/EditCollection.tsx | 13 +++-- components/Sidebar/SidebarItem.tsx | 5 +- components/Sidebar/index.tsx | 1 + pages/collections/[id].tsx | 8 ++- pages/collections/index.tsx | 11 +++- pages/tags/[id].tsx | 8 ++- 10 files changed, 118 insertions(+), 61 deletions(-) create mode 100644 components/ImageWithFallback.tsx diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index 2052f13..92f57d1 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -4,10 +4,11 @@ // You should have received a copy of the GNU General Public License along with this program. If not, see . import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faChevronRight } from "@fortawesome/free-solid-svg-icons"; +import { faChevronRight, faUser } from "@fortawesome/free-solid-svg-icons"; import Link from "next/link"; import { ExtendedCollection } from "@/types/global"; import useLinkStore from "@/store/links"; +import ImageWithFallback from "./ImageWithFallback"; export default function ({ collection }: { collection: ExtendedCollection }) { const { links } = useLinkStore(); @@ -18,47 +19,55 @@ export default function ({ collection }: { collection: ExtendedCollection }) { }); return ( - -
-
-
-

{collection.name}

- +
+ +
+
+
+

+ {collection.name} +

+ +
+

{collection.description}

-

{collection.description}

-
-
-
- {collection.members - .map((e, i) => { - return ( - - ); - }) - .reverse() - .slice(0, 3)} - {collection.members.length - 3 > 0 ? ( -
- +{collection.members.length - 3} -
- ) : null} -
-
-

- {links.filter((e) => e.collectionId === collection.id).length}{" "} - Links -

-

{formattedDate}

+
+
+ {collection.members + .map((e, i) => { + return ( + +
+ +
+ + ); + }) + .reverse() + .slice(0, 3)} + {collection.members.length - 3 > 0 ? ( +
+ +{collection.members.length - 3} +
+ ) : null} +
+
+

+ {links.filter((e) => e.collectionId === collection.id).length}{" "} + Links +

+

{formattedDate}

+
-
- + +
); } diff --git a/components/ImageWithFallback.tsx b/components/ImageWithFallback.tsx new file mode 100644 index 0000000..f125216 --- /dev/null +++ b/components/ImageWithFallback.tsx @@ -0,0 +1,27 @@ +import { ElementType, ReactElement, ReactNode, useState } from "react"; + +type Props = { + src: string; + className: string; + children: ReactNode; +}; + +const ImageWithFallback = ({ src, className, children, ...rest }: Props) => { + const [error, setError] = useState(false); + + return error ? ( + <>{children} + ) : ( + { + setError(true); + }} + /> + ); +}; + +export default ImageWithFallback; diff --git a/components/LinkList.tsx b/components/LinkList.tsx index 193c2e7..6ec06f1 100644 --- a/components/LinkList.tsx +++ b/components/LinkList.tsx @@ -45,7 +45,7 @@ export default function ({ }; return ( -
+
{editModal ? ( @@ -57,7 +57,7 @@ export default function ({ width={42} height={42} alt="" - className="select-none mt-3 z-10 rounded-full border-[3px] border-sky-100" + className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-sky-100" draggable="false" onError={(e) => { const target = e.target as HTMLElement; diff --git a/components/Modal/AddCollection.tsx b/components/Modal/AddCollection.tsx index a6e8b3c..b287d51 100644 --- a/components/Modal/AddCollection.tsx +++ b/components/Modal/AddCollection.tsx @@ -5,12 +5,13 @@ import React, { useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faClose, faPlus } from "@fortawesome/free-solid-svg-icons"; +import { faClose, faPlus, faUser } from "@fortawesome/free-solid-svg-icons"; import useCollectionStore from "@/store/collections"; import { ExtendedCollection, NewCollection } from "@/types/global"; import { useSession } from "next-auth/react"; import RequiredBadge from "../RequiredBadge"; import addMemberToCollection from "@/lib/client/addMemberToCollection"; +import ImageWithFallback from "../ImageWithFallback"; type Props = { toggleCollectionModal: Function; @@ -144,12 +145,16 @@ export default function AddCollection({ toggleCollectionModal }: Props) { }} />
- + > +
+ +
+

{e.name}

{e.email}

diff --git a/components/Modal/EditCollection.tsx b/components/Modal/EditCollection.tsx index 4340d80..a30c8cb 100644 --- a/components/Modal/EditCollection.tsx +++ b/components/Modal/EditCollection.tsx @@ -10,6 +10,7 @@ import { faPenToSquare, faPlus, faTrashCan, + faUser, } from "@fortawesome/free-solid-svg-icons"; import useCollectionStore from "@/store/collections"; import { ExtendedCollection } from "@/types/global"; @@ -18,6 +19,7 @@ import Modal from "@/components/Modal"; import DeleteCollection from "@/components/Modal/DeleteCollection"; import RequiredBadge from "../RequiredBadge"; import addMemberToCollection from "@/lib/client/addMemberToCollection"; +import ImageWithFallback from "../ImageWithFallback"; type Props = { toggleCollectionModal: Function; @@ -159,12 +161,15 @@ export default function EditCollection({ }} />
- + > +
+ +
+

{e.user.name} diff --git a/components/Sidebar/SidebarItem.tsx b/components/Sidebar/SidebarItem.tsx index be17ecd..45bf85a 100644 --- a/components/Sidebar/SidebarItem.tsx +++ b/components/Sidebar/SidebarItem.tsx @@ -11,9 +11,10 @@ interface SidebarItemProps { text: string; icon: ReactElement; path: string; + className?: string; } -export default function ({ text, icon, path }: SidebarItemProps) { +export default function ({ text, icon, path, className }: SidebarItemProps) { const router = useRouter(); const [active, setActive] = useState(false); @@ -27,7 +28,7 @@ export default function ({ text, icon, path }: SidebarItemProps) {

{React.cloneElement(icon, { className: `w-4 ${active ? "text-white" : "text-sky-300"}`, diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx index fe225fc..4851204 100644 --- a/components/Sidebar/index.tsx +++ b/components/Sidebar/index.tsx @@ -119,6 +119,7 @@ export default function ({ className }: { className?: string }) { text={e.name} icon={} path={`/collections/${e.id}`} + className="capitalize" /> ); })} diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index 9e919f6..9c10006 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -247,9 +247,11 @@ export default function () { ) : null}
- {sortedLinks.map((e, i) => { - return ; - })} +
+ {sortedLinks.map((e, i) => { + return ; + })} +
); diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx index 4a7feb3..ebd5adf 100644 --- a/pages/collections/index.tsx +++ b/pages/collections/index.tsx @@ -194,11 +194,16 @@ export default function () { })}
-

New Collection

- +

+ New Collection +

+
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx index c9c8a89..9d7dbfc 100644 --- a/pages/tags/[id].tsx +++ b/pages/tags/[id].tsx @@ -146,9 +146,11 @@ export default function () { ) : null}
- {sortedLinks.map((e, i) => { - return ; - })} +
+ {sortedLinks.map((e, i) => { + return ; + })} +
);