Add archived functionality

.nvmrc

@@ -1 +1 @@
-16.15.0
+16.16.0

components/Admin/ArchivedLinksTable/Actions.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { useArchivedLinks } from '../Context';
+import { Space, Popconfirm, Button } from 'antd';
+
+function Actions({ record }) {
+  const [isVisible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { dispatch } = useArchivedLinks();
+
+  const confirmDelete = () => {
+    setLoading(true);
+    dispatch({ type: 'DELETE', id: record._id, index: record.index });
+    setVisible(false);
+    setLoading(false);
+  };
+
+  const unarchiveLink = () => {
+    setLoading(true);
+    dispatch({ type: 'UNARCHIVE', id: record._id, link: record });
+    setLoading(false);
+  };
+
+  return (
+    <Space size="middle">
+      <Button onClick={() => unarchiveLink()} type="link" danger>
+        Unarchive
+      </Button>
+      <Popconfirm
+        title="Are you sure?"
+        okText="Yes"
+        cancelText="No"
+        visible={isVisible}
+        onConfirm={confirmDelete}
+        okButtonProps={{ loading: loading }}
+        onCancel={() => setVisible(false)}
+      >
+        <Button onClick={() => setVisible(true)} type="link" danger>
+          Delete
+        </Button>
+      </Popconfirm>
+    </Space>
+  );
+}
+
+export default Actions;

components/Admin/ArchivedLinksTable/index.js

@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react';
+import { useArchivedLinks } from '../Context';
+import { Checkbox, Table, Typography, notification } from 'antd';
+import { MenuOutlined } from '@ant-design/icons';
+import { Twemoji } from 'react-emoji-render';
+import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
+import Actions from './Actions';
+
+import API from '~/lib/api';
+import styles from './style.module.css';
+
+const Dragger = sortableHandle(() => <MenuOutlined style={{ cursor: 'pointer', color: '#999' }} />);
+
+const columns = [
+  {
+    title: '#',
+    width: 40,
+    className: styles.visible,
+    render: function Order() {
+      return <Dragger />;
+    }
+  },
+  {
+    title: 'Emoji',
+    dataIndex: 'emoji',
+    fixed: 'left',
+    align: 'center',
+    width: 40,
+    className: styles.visible,
+    render: function Emoji(emoji) {
+      return <Twemoji svg text={emoji} />;
+    }
+  },
+  {
+    title: 'Title',
+    dataIndex: 'title',
+    width: 250,
+    className: styles.visible
+  },
+  {
+    title: 'Attention',
+    dataIndex: 'attention',
+    align: 'center',
+    width: 40,
+    render: function Attention(state) {
+      return <Checkbox checked={state} disabled={true} />;
+    }
+  },
+  {
+    title: 'URL',
+    dataIndex: 'url',
+    className: styles.visible,
+    render: function Url(url) {
+      return <a href={url}>{url}</a>;
+    }
+  },
+  {
+    title: 'Link',
+    editable: false,
+    width: 300,
+    dataIndex: 'link',
+    render: function UrlLink(link) {
+      return (
+        <Typography.Link href={link} copyable>
+          {link}
+        </Typography.Link>
+      );
+    }
+  },
+  {
+    title: 'Clicks',
+    dataIndex: 'clicks',
+    align: 'center',
+    width: 40,
+    className: styles.visible
+  },
+  {
+    title: 'Action',
+    fixed: 'right',
+    render: function Action(_, record) {
+      return <Actions record={record} />;
+    }
+  }
+];
+
+const SortableItem = sortableElement((props) => <tr {...props} />);
+const SortableContainer = sortableContainer((props) => <tbody {...props} />);
+
+const DraggableContainer = (props) => {
+  const { dispatch } = useArchivedLinks();
+
+  return (
+    <SortableContainer
+      useDragHandle
+      disableAutoscroll
+      helperClass={styles.dragging}
+      onSortEnd={({ oldIndex, newIndex }) =>
+        dispatch({ type: 'SORT', oldIndex: oldIndex, newIndex: newIndex })
+      }
+      {...props}
+    />
+  );
+};
+
+const DraggableBodyRow = ({ ...restProps }) => {
+  const { archived } = useArchivedLinks();
+  // function findIndex base on Table rowKey props and should always be a right array index
+  const index = archived.findIndex((x) => x.index === restProps['data-row-key']);
+  return <SortableItem index={index} {...restProps} />;
+};
+
+function ArchivedarchivedTable() {
+  const [loading, setLoading] = useState(true);
+  const { archived, dispatch } = useArchivedLinks();
+
+  useEffect(() => {
+    API.get('/api/links?status=archived')
+      .then((response) => {
+        console.log(response.data.data);
+        dispatch({ type: 'INIT', archived: response.data.data });
+        setLoading(false);
+      })
+      .catch((error) => {
+        notification['error']({
+          message: `${error.statusText}`,
+          description: error.message
+        });
+      });
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, []);
+
+  return (
+    <Table
+      loading={loading}
+      rowKey="index"
+      columns={columns}
+      dataSource={archived}
+      bordered
+      pagination={false}
+      components={{
+        body: {
+          wrapper: DraggableContainer,
+          row: DraggableBodyRow
+        }
+      }}
+    />
+  );
+}
+
+export default ArchivedarchivedTable;

components/Admin/ArchivedLinksTable/style.module.css

@@ -0,0 +1,13 @@
+.dragging {
+  background: #fafafa;
+  border: 1px solid #ccc;
+}
+
+.dragging td {
+  padding: 16px;
+  visibility: hidden;
+}
+
+.dragging .visible {
+  visibility: visible;
+}

components/Admin/Context/archived.js

@@ -0,0 +1,24 @@
+import { useContext, createContext } from 'react';
+
+import API from '~/lib/api';
+
+export const ArchivedLinksContext = createContext();
+
+export const reducer = async (archived, action) => {
+  const { type, link, archived: links } = action;
+
+  switch (type) {
+    case 'INIT':
+      return links;
+    case 'UNARCHIVE':
+      await API.put(`/api/links/${action.id}`, { ...link, archived: false });
+      return archived.filter((link) => link._id !== action.id);
+    case 'DELETE':
+      await API.delete(`/api/links/${action.id}`);
+      return archived.filter((link) => link._id !== action.id);
+    default:
+      throw new Error(`Unknown action: ${type}`);
+  }
+};
+
+export const useArchivedLinks = () => useContext(ArchivedLinksContext);

components/Admin/Context/index.tsx

@@ -2,17 +2,21 @@ import useAsyncReducer from '~/hooks/useAsyncReducer';
 import { reducer as reducerLinks, LinksContext } from './links';
 import { reducer as reducerForms, FormsContext } from './forms';
 import { reducer as reducerRedirects, RedirectsContext } from './redirects';
+import { reducer as reducerArchived, ArchivedLinksContext } from './archived';
 
 export const AdminContextProvider = ({ children, initialState }) => {
   const [links, dispatchLinks] = useAsyncReducer(reducerLinks, initialState);
   const [forms, dispatchForms] = useAsyncReducer(reducerForms, initialState);
   const [redirects, dispatchRedirects] = useAsyncReducer(reducerRedirects, initialState);
+  const [archived, dispatchArchived] = useAsyncReducer(reducerArchived, initialState);
 
   return (
     <LinksContext.Provider value={{ links, dispatch: dispatchLinks }}>
       <FormsContext.Provider value={{ forms, dispatch: dispatchForms }}>
         <RedirectsContext.Provider value={{ redirects, dispatch: dispatchRedirects }}>
-          {children}
+          <ArchivedLinksContext.Provider value={{ archived, dispatch: dispatchArchived }}>
+            {children}
+          </ArchivedLinksContext.Provider>
         </RedirectsContext.Provider>
       </FormsContext.Provider>
     </LinksContext.Provider>
@@ -22,3 +26,4 @@ export const AdminContextProvider = ({ children, initialState }) => {
 export { useLinks } from './links';
 export { useForms } from './forms';
 export { useRedirects } from './redirects';
+export { useArchivedLinks } from './archived';

components/Admin/Context/links.js

@@ -16,8 +16,8 @@ export const reducer = async (links, action) => {
       link.index = links.length == 0 ? 0 : links[links.length - 1].index + 1;
       response = await API.post('/api/links', link);
       return [...links, response.data.data];
-    case 'DELETE':
-      await API.delete(`/api/links/${action.id}`);
+    case 'ARCHIVE':
+      await API.put(`/api/links/${action.id}`, { ...link, archived: true });
       return links.filter((link) => link._id !== action.id);
     case 'UPDATE':
       return links;

components/Admin/LinksTable/Actions.js

@@ -3,32 +3,17 @@ import { useLinks } from '../Context';
 import { Space, Popconfirm, Button } from 'antd';
 
 function Actions({ record }) {
-  const [isVisible, setVisible] = useState(false);
-  const [loading, setLoading] = useState(false);
   const { dispatch } = useLinks();
 
-  const confirmDelete = () => {
-    setLoading(true);
-    dispatch({ type: 'DELETE', id: record._id, index: record.index });
-    setVisible(false);
-    setLoading(false);
+  const archiveLink = () => {
+    dispatch({ type: 'ARCHIVE', id: record._id, link: record });
   };
 
   return (
     <Space size="middle">
-      <Popconfirm
-        title="Are you sure?"
-        okText="Yes"
-        cancelText="No"
-        visible={isVisible}
-        onConfirm={confirmDelete}
-        okButtonProps={{ loading: loading }}
-        onCancel={() => setVisible(false)}
-      >
-        <Button onClick={() => setVisible(true)} type="link" danger>
-          Delete
-        </Button>
-      </Popconfirm>
+      <Button onClick={() => archiveLink()} type="link" danger>
+        Archive
+      </Button>
     </Space>
   );
 }

components/Admin/LinksTable/index.js

@@ -117,6 +117,7 @@ function LinksTable() {
   useEffect(() => {
     API.get('/api/links')
       .then((response) => {
+        console.log(response.data.data);
         dispatch({ type: 'INIT', links: response.data.data });
         setLoading(false);
       })

components/Admin/Navbar/index.js

@@ -2,9 +2,10 @@ import { useEffect, useState } from 'react';
 import LinkTo from '~/components/LinkTo';
 import { Avatar, Col, Menu, Row, Space, Typography } from 'antd';
 import {
+  InboxOutlined,
+  FormOutlined,
   InfoCircleOutlined,
   LinkOutlined,
-  FormOutlined,
   TagsOutlined,
   UserOutlined
 } from '@ant-design/icons';
@@ -26,6 +27,10 @@ export const navbar = {
     icon: <LinkOutlined />,
     title: 'Redirects'
   },
+  archived: {
+    icon: <InboxOutlined />,
+    title: 'Archive'
+  },
   about: {
     icon: <InfoCircleOutlined />,
     title: 'About'

components/Layout/index.js → components/Layout/index.tsx

@@ -3,7 +3,12 @@ import Footer from '../Footer';
 
 import styles from './style.module.css';
 
-const Layout = ({ children, title }) => (
+interface LayoutProps {
+  children: React.ReactNode;
+  title: string;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children, title }) => (
   <div className={styles.container}>
     <Head>
       <title>{title}</title>

hooks/useAsyncReducer.ts → hooks/useAsyncReducer.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
 
 export default function useAsyncReducer(
-  reducer: (state: unknown, action: string) => Promise<unknown>,
+  reducer: (state: unknown, action) => Promise<unknown>,
   initState: unknown
 ) {
   const [state, setState] = useState(initState);
   const dispatchState = async (action) => setState(await reducer(state, action));
+
   return [state, dispatchState];
 }

models/Link.ts

@@ -12,6 +12,7 @@ export interface ILink {
   slug: string;
   link: string;
   clicks: number;
+  archived: boolean;
   created: Date;
 }
 
@@ -24,6 +25,7 @@ const Link = new Schema<ILink>(
     index: { type: Number, required: true, index: true },
     slug: { type: String, unique: true, index: true, required: true, default: () => nanoid(10) },
     clicks: { type: Number, default: 0 },
+    archived: { type: Boolean, default: false },
     created: { type: Date, default: Date.now }
   },
   {