Refactor component imports and add new NotesTable component

Author: staszekz

src/components/atoms/add-new-button/add-new-button.tsx

@@ -11,7 +11,7 @@ export const AddNewButton = ({ openModal }) => {
       variant="notes-transparent-border"
       onClick={handleClick}
       aria-label="Add new"
-      style={{ marginBottom: '1rem' }}
+      p={'sm'}
     >
       Add
     </Button>

src/components/templates/data-display.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { AddNewButton, openNoteModal } from '@notes/components';
+import { ComboboxItem, Grid, Select, Title } from '@mantine/core';
+import { MainLayout } from '@notes/layout';
+import { ViewType, viewTypes } from '@notes/types';
+import { formOption } from '@notes/utils';
+
+type Props = {
+  isData: boolean;
+  title: string;
+  Table: React.FC<{ isLoading: boolean }>;
+  Stickers?: React.FC;
+  Tiles?: React.FC;
+};
+
+export function DataDisplay({ isData, title, Table, Stickers, Tiles }: Props) {
+  const [viewType, setViewType] = useState<ComboboxItem>(formOption<ViewType>(viewTypes.TABLE));
+
+  const options = [
+    formOption<ViewType>(viewTypes.TABLE),
+    formOption<ViewType>(viewTypes.GRID),
+    formOption<ViewType>(viewTypes.STICKERS)
+  ];
+
+  return (
+    <MainLayout>
+      <Grid align="center" justify="space-between" p="xl">
+        <Grid.Col span={3} order={{ base: 1, sm: 2, lg: 1 }}>
+          <AddNewButton openModal={openNoteModal} />
+        </Grid.Col>
+        <Grid.Col span={3} order={{ base: 1, sm: 2, lg: 1 }}>
+          <Title order={2}>{title}</Title>
+        </Grid.Col>
+        <Grid.Col span={3} order={{ base: 1, sm: 2, lg: 1 }}>
+          <Select
+            c={'var(--primary)'}
+            label="Change display view:"
+            data={options}
+            value={viewType.value}
+            allowDeselect={false}
+            onChange={(_value, option) => setViewType(option)}
+          />
+        </Grid.Col>
+      </Grid>
+      {viewType.value === viewTypes.TABLE && <Table isLoading={!isData} />}
+      {viewType.value === viewTypes.STICKERS && <Stickers isLoading={!isData} />}
+      {viewType.value === viewTypes.GRID && <Tiles isLoading={!isData} />}
+
+      {!isData && <Title order={3}>Your list is empty! </Title>}
+    </MainLayout>
+  );
+}

src/types/index.ts

@@ -1,3 +1,4 @@
 export * from './contexts'
 export * from './collections'
-export * from './table'
+export * from './table'
+export * from './views'

src/types/views.ts

@@ -0,0 +1,8 @@
+export const viewTypes = {
+  TABLE: 'TABLE',
+  GRID: 'GRID',
+  STICKERS: 'STICKERS',
+} as const
+
+
+export type ViewType = typeof viewTypes[keyof typeof viewTypes]

src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './colors'
 export * from './remove-id'
 export * from './routes-def'
-export * from './table-controls-config'
+export * from './table-controls-config'
+export * from './options'

src/utils/options.ts

@@ -0,0 +1,8 @@
+export function formOption<T extends string>(value: T, label?: T) {
+  const newLabel = label || value[0] + value.slice(1)?.toLowerCase() as T
+
+  return ({
+    value,
+    label: newLabel,
+  })
+}

src/views/pages/notes.tsx

@@ -1,22 +1,19 @@
-import { AddNewButton, openNoteModal, NotesTable } from '@notes/components';
-import { MainLayout } from '@notes/layout';
-
-import { Title } from '@mantine/core';
+import { NotesTable } from '@notes/components';
 import { useQuery } from '@tanstack/react-query';
 import { getNotesQueryOptions } from '@notes/rq';
+import { DataDisplay } from 'src/components/templates/data-display';
+import { Box } from '@mantine/core';
 
 export const Notes = () => {
   const { data: notes } = useQuery(getNotesQueryOptions());
 
   return (
-    <MainLayout>
-      <Title pt="xl" order={2}>
-        My Private Notes
-      </Title>
-      <AddNewButton openModal={openNoteModal} />
-      <br />
-      <NotesTable isLoading={!notes?.length} />
-      {!notes?.length && <Title order={3}>Your note list is empty! Enter a new note! </Title>}
-    </MainLayout>
+    <DataDisplay
+      isData={Boolean(notes?.length)}
+      title="My Private Notes"
+      Table={NotesTable}
+      Stickers={() => <Box style={{ color: 'white' }}>strckers</Box>}
+      Tiles={() => <Box style={{ color: 'white' }}>Tiles</Box>}
+    />
   );
 };