From f5e7e373a82351c7649b0c57c22f8ad41b2e6db0 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Sat, 16 Dec 2023 15:06:26 -0500 Subject: [PATCH] improvements --- components/LinkViews/CompactGridView.tsx | 16 --- .../{DefaultGridView.tsx => DefaultView.tsx} | 2 +- components/LinkViews/GridView.tsx | 20 +++ .../LinkComponents}/LinkCard.tsx | 29 +---- .../{LinkCardCompact.tsx => LinkCardGrid.tsx} | 32 ++++- .../LinkComponents/LinkCollection.tsx | 4 +- .../LinkViews/LinkComponents/LinkIcon.tsx | 2 +- .../LinkViews/LinkComponents/LinkRow.tsx | 72 +++++------ components/LinkViews/ListView.tsx | 10 +- components/ViewDropdown.tsx | 122 +++++++++--------- pages/collections/[id].tsx | 2 +- pages/dashboard.tsx | 2 +- pages/links/index.tsx | 14 +- pages/links/pinned.tsx | 2 +- pages/search.tsx | 2 +- pages/tags/[id].tsx | 2 +- types/global.ts | 2 +- 17 files changed, 167 insertions(+), 168 deletions(-) delete mode 100644 components/LinkViews/CompactGridView.tsx rename components/LinkViews/{DefaultGridView.tsx => DefaultView.tsx} (84%) create mode 100644 components/LinkViews/GridView.tsx rename components/{ => LinkViews/LinkComponents}/LinkCard.tsx (79%) rename components/LinkViews/LinkComponents/{LinkCardCompact.tsx => LinkCardGrid.tsx} (69%) diff --git a/components/LinkViews/CompactGridView.tsx b/components/LinkViews/CompactGridView.tsx deleted file mode 100644 index f71ac5c..0000000 --- a/components/LinkViews/CompactGridView.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import LinkCardCompact from "@/components/LinkViews/LinkComponents/LinkCardCompact"; -import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; - -export default function CompactGridView({ - links, -}: { - links: LinkIncludingShortenedCollectionAndTags[]; -}) { - return ( -
- {links.map((e, i) => { - return ; - })} -
- ); -} diff --git a/components/LinkViews/DefaultGridView.tsx b/components/LinkViews/DefaultView.tsx similarity index 84% rename from components/LinkViews/DefaultGridView.tsx rename to components/LinkViews/DefaultView.tsx index 7dbbc79..714ee73 100644 --- a/components/LinkViews/DefaultGridView.tsx +++ b/components/LinkViews/DefaultView.tsx @@ -1,4 +1,4 @@ -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; export default function DefaultGridView({ diff --git a/components/LinkViews/GridView.tsx b/components/LinkViews/GridView.tsx new file mode 100644 index 0000000..1b55f26 --- /dev/null +++ b/components/LinkViews/GridView.tsx @@ -0,0 +1,20 @@ +import LinkCardGrid from "@/components/LinkViews/LinkComponents/LinkCardGrid"; +import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; + +export default function CompactGridView({ + links, +}: { + links: LinkIncludingShortenedCollectionAndTags[]; +}) { + return ( +
+ {links.map((e, i) => { + return ( +
+ +
+ ); + })} +
+ ); +} diff --git a/components/LinkCard.tsx b/components/LinkViews/LinkComponents/LinkCard.tsx similarity index 79% rename from components/LinkCard.tsx rename to components/LinkViews/LinkComponents/LinkCard.tsx index 1a9c80e..a1787d1 100644 --- a/components/LinkCard.tsx +++ b/components/LinkViews/LinkComponents/LinkCard.tsx @@ -28,15 +28,15 @@ export default function LinkCard({ link, count, className }: Props) { const [collection, setCollection] = useState( collections.find( - (e) => e.id === link.collection.id, - ) as CollectionIncludingMembersAndLinkCount, + (e) => e.id === link.collection.id + ) as CollectionIncludingMembersAndLinkCount ); useEffect(() => { setCollection( collections.find( - (e) => e.id === link.collection.id, - ) as CollectionIncludingMembersAndLinkCount, + (e) => e.id === link.collection.id + ) as CollectionIncludingMembersAndLinkCount ); }, [collections, links]); @@ -84,27 +84,6 @@ export default function LinkCard({ link, count, className }: Props) { - {/* {link.tags[0] ? ( -
-
-{link.tags.map((e, i) => ( - { - e.stopPropagation(); - }} - className="btn btn-xs btn-ghost truncate max-w-[19rem]" -> - #{e.name} - -))} -
-
-
-) : ( -

No Tags

-)} */} diff --git a/components/LinkViews/LinkComponents/LinkCardCompact.tsx b/components/LinkViews/LinkComponents/LinkCardGrid.tsx similarity index 69% rename from components/LinkViews/LinkComponents/LinkCardCompact.tsx rename to components/LinkViews/LinkComponents/LinkCardGrid.tsx index 2e6f60e..ae4c77a 100644 --- a/components/LinkViews/LinkComponents/LinkCardCompact.tsx +++ b/components/LinkViews/LinkComponents/LinkCardGrid.tsx @@ -10,6 +10,7 @@ import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions"; import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate"; import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection"; import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon"; +import Link from "next/link"; type Props = { link: LinkIncludingShortenedCollectionAndTags; @@ -17,7 +18,7 @@ type Props = { className?: string; }; -export default function LinkCardCompact({ link, count, className }: Props) { +export default function LinkCardGrid({ link, count, className }: Props) { const { collections } = useCollectionStore(); const { links } = useLinkStore(); @@ -33,20 +34,20 @@ export default function LinkCardCompact({ link, count, className }: Props) { const [collection, setCollection] = useState( collections.find( - (e) => e.id === link.collection.id, - ) as CollectionIncludingMembersAndLinkCount, + (e) => e.id === link.collection.id + ) as CollectionIncludingMembersAndLinkCount ); useEffect(() => { setCollection( collections.find( - (e) => e.id === link.collection.id, - ) as CollectionIncludingMembersAndLinkCount, + (e) => e.id === link.collection.id + ) as CollectionIncludingMembersAndLinkCount ); }, [collections, links]); return ( -
+
link.url && window.open(link.url || "", "_blank")} className="flex items-center cursor-pointer p-3" @@ -83,6 +84,25 @@ export default function LinkCardCompact({ link, count, className }: Props) { ·
+

{unescapeString(link.description)}

+ {link.tags[0] ? ( +
+
+ {link.tags.map((e, i) => ( + { + e.stopPropagation(); + }} + className="btn btn-xs btn-ghost truncate max-w-[19rem]" + > + #{e.name} + + ))} +
+
+ ) : undefined}
diff --git a/components/LinkViews/LinkComponents/LinkCollection.tsx b/components/LinkViews/LinkComponents/LinkCollection.tsx index 606352a..16c9bb5 100644 --- a/components/LinkViews/LinkComponents/LinkCollection.tsx +++ b/components/LinkViews/LinkComponents/LinkCollection.tsx @@ -18,14 +18,14 @@ export default function LinkCollection({ return (
{ - e.preventDefault(); + e.stopPropagation(); router.push(`/collections/${link.collection.id}`); }} className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100" >

{collection?.name}

diff --git a/components/LinkViews/LinkComponents/LinkIcon.tsx b/components/LinkViews/LinkComponents/LinkIcon.tsx index e9d08cb..cc5f385 100644 --- a/components/LinkViews/LinkComponents/LinkIcon.tsx +++ b/components/LinkViews/LinkComponents/LinkIcon.tsx @@ -13,7 +13,7 @@ export default function LinkIcon({ isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined; const iconClasses: string = - "w-12 bg-primary/20 text-primary shadow rounded-md p-2 select-none z-10"; + "w-12 bg-white text-primary shadow rounded-md p-1 select-none z-10"; return (
diff --git a/components/LinkViews/LinkComponents/LinkRow.tsx b/components/LinkViews/LinkComponents/LinkRow.tsx index 2c2f5c9..6b9fda8 100644 --- a/components/LinkViews/LinkComponents/LinkRow.tsx +++ b/components/LinkViews/LinkComponents/LinkRow.tsx @@ -33,60 +33,56 @@ export default function LinkCardCompact({ link, count, className }: Props) { const [collection, setCollection] = useState( collections.find( - (e) => e.id === link.collection.id, - ) as CollectionIncludingMembersAndLinkCount, + (e) => e.id === link.collection.id + ) as CollectionIncludingMembersAndLinkCount ); useEffect(() => { setCollection( collections.find( - (e) => e.id === link.collection.id, - ) as CollectionIncludingMembersAndLinkCount, + (e) => e.id === link.collection.id + ) as CollectionIncludingMembersAndLinkCount ); }, [collections, links]); return ( -
-
link.url && window.open(link.url || "", "_blank")} - className="flex items-center cursor-pointer p-3" - > -
- -
+ <> +
+
link.url && window.open(link.url || "", "_blank")} + className="flex items-center cursor-pointer p-3" + > +
+ +
-
-

- {unescapeString(link.name || link.description) || link.url} -

+
+

+ {unescapeString(link.name || link.description) || link.url} +

-
-
- - · - {link.url ? ( -
{ - e.preventDefault(); - window.open(link.url || "", "_blank"); - }} - className="flex items-center hover:opacity-60 cursor-pointer duration-100" - > +
+
+ + · + {link.url ? (

{shortendURL}

-
- ) : ( -
- {link.type} -
- )} + ) : ( +
+ {link.type} +
+ )} +
+ · +
- · -
+ +
- -
+
+ ); } diff --git a/components/LinkViews/ListView.tsx b/components/LinkViews/ListView.tsx index bb06327..8b08add 100644 --- a/components/LinkViews/ListView.tsx +++ b/components/LinkViews/ListView.tsx @@ -7,12 +7,10 @@ export default function ListView({ links: LinkIncludingShortenedCollectionAndTags[]; }) { return ( -
-
- {links.map((e, i) => { - return ; - })} -
+
+ {links.map((e, i) => { + return ; + })}
); } diff --git a/components/ViewDropdown.tsx b/components/ViewDropdown.tsx index 2d2ea4a..ac547e6 100644 --- a/components/ViewDropdown.tsx +++ b/components/ViewDropdown.tsx @@ -1,71 +1,71 @@ -import React, {Dispatch, SetStateAction, useEffect, useState} from "react"; +import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; import useLocalSettingsStore from "@/store/localSettings"; -import {ViewMode} from "@/types/global"; +import { ViewMode } from "@/types/global"; type Props = { - viewMode: string; - setViewMode: Dispatch>; + viewMode: string; + setViewMode: Dispatch>; }; -export default function ViewDropdown({viewMode, setViewMode}: Props) { - const {updateSettings} = useLocalSettingsStore(); +export default function ViewDropdown({ viewMode, setViewMode }: Props) { + const { updateSettings } = useLocalSettingsStore(); - const onChangeViewMode = (e: React.MouseEvent, viewMode: ViewMode) => { - setViewMode(viewMode); - } + const onChangeViewMode = ( + e: React.MouseEvent, + viewMode: ViewMode + ) => { + setViewMode(viewMode); + }; - useEffect(() => { - updateSettings({viewMode: viewMode as ViewMode}); - }, [viewMode]); + useEffect(() => { + updateSettings({ viewMode: viewMode as ViewMode }); + }, [viewMode]); - return ( -
- - - -
- ); + return ( +
+ + {/* */} + +
+ ); } diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index 08ff8dc..8e1cf1d 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -1,4 +1,4 @@ -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import useCollectionStore from "@/store/collections"; import useLinkStore from "@/store/links"; import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global"; diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 0cd4bde..5788b73 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -13,7 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import MainLayout from "@/layouts/MainLayout"; import useLinkStore from "@/store/links"; import useTagStore from "@/store/tags"; -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import { useEffect, useState } from "react"; import useLinks from "@/hooks/useLinks"; import Link from "next/link"; diff --git a/pages/links/index.tsx b/pages/links/index.tsx index 0c4670d..6eddd6e 100644 --- a/pages/links/index.tsx +++ b/pages/links/index.tsx @@ -1,4 +1,4 @@ -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import NoLinksFound from "@/components/NoLinksFound"; import SortDropdown from "@/components/SortDropdown"; import useLinks from "@/hooks/useLinks"; @@ -9,21 +9,23 @@ import { faLink } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useState } from "react"; import ViewDropdown from "@/components/ViewDropdown"; -import DefaultGridView from "@/components/LinkViews/DefaultGridView"; -import CompactGridView from "@/components/LinkViews/CompactGridView"; +import DefaultView from "@/components/LinkViews/DefaultView"; +import GridView from "@/components/LinkViews/GridView"; import ListView from "@/components/LinkViews/ListView"; export default function Links() { const { links } = useLinkStore(); - const [viewMode, setViewMode] = useState(localStorage.getItem('viewMode') || ViewMode.Default); + const [viewMode, setViewMode] = useState( + localStorage.getItem("viewMode") || ViewMode.Default + ); const [sortBy, setSortBy] = useState(Sort.DateNewestFirst); useLinks({ sort: sortBy }); const components = { - [ViewMode.Default]: DefaultGridView, - [ViewMode.Compact]: CompactGridView, + [ViewMode.Default]: DefaultView, + // [ViewMode.Grid]: GridView, [ViewMode.List]: ListView, }; diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx index ac52af2..d6ba326 100644 --- a/pages/links/pinned.tsx +++ b/pages/links/pinned.tsx @@ -1,4 +1,4 @@ -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import SortDropdown from "@/components/SortDropdown"; import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; diff --git a/pages/search.tsx b/pages/search.tsx index d05a20a..ac54ca7 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -1,5 +1,5 @@ import FilterSearchDropdown from "@/components/FilterSearchDropdown"; -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import SortDropdown from "@/components/SortDropdown"; import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx index 29c417f..8adfdc4 100644 --- a/pages/tags/[id].tsx +++ b/pages/tags/[id].tsx @@ -1,4 +1,4 @@ -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import useLinkStore from "@/store/links"; import { faCheck, diff --git a/types/global.ts b/types/global.ts index c2356b5..49505bd 100644 --- a/types/global.ts +++ b/types/global.ts @@ -59,7 +59,7 @@ export interface PublicCollectionIncludingLinks extends Collection { export enum ViewMode { Default = "default", - Compact = "compact", + Grid = "grid", List = "list", }