From 5a8bda0322b8818e24e2016b2eb9ca35a6cbdeb0 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Tue, 14 May 2024 13:19:49 +0200
Subject: [PATCH] refactor: rename link_list with a proper name

---
 .../collection_container.tsx}                 | 33 ++++---------------
 .../{link_list => link}/link_controls.tsx     |  0
 .../{link_list => link}/link_item.tsx         |  2 +-
 .../components/dashboard/link/link_list.tsx   | 31 +++++++++++++++++
 .../dashboard/{link_list => link}/no_item.tsx |  0
 inertia/pages/dashboard.tsx                   |  4 +--
 6 files changed, 40 insertions(+), 30 deletions(-)
 rename inertia/components/dashboard/{link_list/link_list.tsx => collection/collection_container.tsx} (69%)
 rename inertia/components/dashboard/{link_list => link}/link_controls.tsx (100%)
 rename inertia/components/dashboard/{link_list => link}/link_item.tsx (97%)
 create mode 100644 inertia/components/dashboard/link/link_list.tsx
 rename inertia/components/dashboard/{link_list => link}/no_item.tsx (100%)

diff --git a/inertia/components/dashboard/link_list/link_list.tsx b/inertia/components/dashboard/collection/collection_container.tsx
similarity index 69%
rename from inertia/components/dashboard/link_list/link_list.tsx
rename to inertia/components/dashboard/collection/collection_container.tsx
index 58ef0ab..4dff6c9 100644
--- a/inertia/components/dashboard/link_list/link_list.tsx
+++ b/inertia/components/dashboard/collection/collection_container.tsx
@@ -4,8 +4,8 @@ import { RxHamburgerMenu } from 'react-icons/rx';
 import CollectionControls from '~/components/dashboard/collection/collection_controls';
 import CollectionDescription from '~/components/dashboard/collection/collection_description';
 import CollectionHeader from '~/components/dashboard/collection/collection_header';
-import LinkItem from '~/components/dashboard/link_list/link_item';
-import { NoCollection, NoLink } from '~/components/dashboard/link_list/no_item';
+import LinkList from '~/components/dashboard/link/link_list';
+import { NoCollection } from '~/components/dashboard/link/no_item';
 import Footer from '~/components/footer/footer';
 import useActiveCollection from '~/hooks/use_active_collection';
 
@@ -32,15 +32,15 @@ const CollectionHeaderWrapper = styled.h2(({ theme }) => ({
   },
 }));
 
-interface LinksProps {
+interface CollectionContainerProps {
   isMobile: boolean;
   openSideMenu: () => void;
 }
 
-export default function Links({
+export default function CollectionContainer({
   isMobile,
   openSideMenu,
-}: Readonly<LinksProps>) {
+}: Readonly<CollectionContainerProps>) {
   const { activeCollection } = useActiveCollection();
 
   if (activeCollection === null) {
@@ -66,29 +66,8 @@ export default function Links({
         <CollectionControls />
       </CollectionHeaderWrapper>
       <CollectionDescription />
-      {activeCollection?.links.length !== 0 ? (
-        <LinkListStyle>
-          {activeCollection?.links.map((link) => (
-            <LinkItem link={link} key={link.id} showUserControls />
-          ))}
-        </LinkListStyle>
-      ) : (
-        <NoLink />
-      )}
+      <LinkList links={activeCollection.links} />
       <Footer />
     </LinksWrapper>
   );
 }
-
-const LinkListStyle = styled.ul({
-  height: '100%',
-  width: '100%',
-  minWidth: 0,
-  display: 'flex',
-  flex: 1,
-  gap: '0.5em',
-  padding: '3px',
-  flexDirection: 'column',
-  overflowX: 'hidden',
-  overflowY: 'scroll',
-});
diff --git a/inertia/components/dashboard/link_list/link_controls.tsx b/inertia/components/dashboard/link/link_controls.tsx
similarity index 100%
rename from inertia/components/dashboard/link_list/link_controls.tsx
rename to inertia/components/dashboard/link/link_controls.tsx
diff --git a/inertia/components/dashboard/link_list/link_item.tsx b/inertia/components/dashboard/link/link_item.tsx
similarity index 97%
rename from inertia/components/dashboard/link_list/link_item.tsx
rename to inertia/components/dashboard/link/link_item.tsx
index 6433537..3d67499 100644
--- a/inertia/components/dashboard/link_list/link_item.tsx
+++ b/inertia/components/dashboard/link/link_item.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { AiFillStar } from 'react-icons/ai';
 import ExternalLink from '~/components/common/external_link';
 import LinkFavicon from '~/components/dashboard/link/link_favicon';
-import LinkControls from '~/components/dashboard/link_list/link_controls';
+import LinkControls from '~/components/dashboard/link/link_controls';
 
 const LinkWrapper = styled.li(({ theme }) => ({
   userSelect: 'none',
diff --git a/inertia/components/dashboard/link/link_list.tsx b/inertia/components/dashboard/link/link_list.tsx
new file mode 100644
index 0000000..137769a
--- /dev/null
+++ b/inertia/components/dashboard/link/link_list.tsx
@@ -0,0 +1,31 @@
+import type Link from '#models/link';
+import styled from '@emotion/styled';
+import LinkItem from '~/components/dashboard/link/link_item';
+import { NoLink } from '~/components/dashboard/link/no_item';
+
+const LinkListStyle = styled.ul({
+  height: '100%',
+  width: '100%',
+  minWidth: 0,
+  display: 'flex',
+  flex: 1,
+  gap: '0.5em',
+  padding: '3px',
+  flexDirection: 'column',
+  overflowX: 'hidden',
+  overflowY: 'scroll',
+});
+
+export default function LinkList({ links }: { links: Link[] }) {
+  if (links.length === 0) {
+    return <NoLink />;
+  }
+
+  return (
+    <LinkListStyle>
+      {links.map((link) => (
+        <LinkItem link={link} key={link.id} showUserControls />
+      ))}
+    </LinkListStyle>
+  );
+}
diff --git a/inertia/components/dashboard/link_list/no_item.tsx b/inertia/components/dashboard/link/no_item.tsx
similarity index 100%
rename from inertia/components/dashboard/link_list/no_item.tsx
rename to inertia/components/dashboard/link/no_item.tsx
diff --git a/inertia/pages/dashboard.tsx b/inertia/pages/dashboard.tsx
index abfb9b7..defc1ae 100644
--- a/inertia/pages/dashboard.tsx
+++ b/inertia/pages/dashboard.tsx
@@ -7,7 +7,7 @@ import { router } from '@inertiajs/react';
 import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSwipeable } from 'react-swipeable';
-import Links from '~/components/dashboard/link_list/link_list';
+import CollectionContainer from '~/components/dashboard/collection/collection_container';
 import SideNavigation from '~/components/dashboard/side_nav/side_navigation';
 import SwiperHandler from '~/components/dashboard/swiper_handler';
 import DashboardLayout from '~/components/layouts/dashboard_layout';
@@ -54,7 +54,7 @@ export default function DashboardPage(props: Readonly<DashboardPageProps>) {
               <SideNavigation />
             </SideBar>
           )}
-          <Links isMobile={isMobile} openSideMenu={open} />
+          <CollectionContainer isMobile={isMobile} openSideMenu={open} />
         </SwiperHandler>
       </DashboardProviders>
     </DashboardLayout>