Add forms admin panel

.eslintrc

@@ -11,7 +11,8 @@
   ],
   "env": {
     "browser": true,
-    "node": true
+    "node": true,
+    "es6": true
   },
   "settings": {
     "react": {

components/Admin/Context/forms.js

@@ -0,0 +1,28 @@
+import { useContext, createContext } from 'react';
+
+import API from '../../../utils/api';
+
+export const FormsContext = createContext();
+
+export const reducer = async (forms, action) => {
+  const { type, slug, form, id, forms: newForms } = action;
+  let response;
+
+  switch (type) {
+    case 'INIT':
+      return newForms;
+    case 'CREATE':
+      response = await API.post('/forms', form);
+      return [...forms, response.data.data];
+    case 'UPDATE':
+      response = await API.put(`/forms/${slug}`, form);
+      return forms.map((item) => (item._id === id ? { ...item, ...response.data.data } : item));
+    case 'DELETE':
+      await API.delete(`/forms/${slug}`);
+      return forms.filter((form) => form.slug !== slug);
+    default:
+      throw new Error(`Unknown action: ${type}`);
+  }
+};
+
+export const useForms = () => useContext(FormsContext);

components/Admin/Context/index.js

@@ -0,0 +1,19 @@
+import useAsyncReducer from '../../../utils/useAsyncReducer';
+import { reducer as reducerLinks, LinksContext } from './links';
+import { reducer as reducerForms, FormsContext } from './forms';
+
+export const AdminContextProvider = ({ children, initialState }) => {
+  const [links, dispatchLinks] = useAsyncReducer(reducerLinks, initialState);
+  const [forms, dispatchForms] = useAsyncReducer(reducerForms, initialState);
+
+  return (
+    <LinksContext.Provider value={{ links, dispatch: dispatchLinks }}>
+      <FormsContext.Provider value={{ forms, dispatch: dispatchForms }}>
+        {children}
+      </FormsContext.Provider>
+    </LinksContext.Provider>
+  );
+};
+
+export { useLinks } from './links';
+export { useForms } from './forms';

components/Admin/Context.js → components/Admin/Context/links.js

@@ -1,12 +1,11 @@
 import { useContext, createContext } from 'react';
-import useAsyncReducer from '../../utils/useAsyncReducer';
 import { arrayMove } from 'react-sortable-hoc';
 
-import API from '../../utils/api';
+import API from '../../../utils/api';
 
-const LinksContext = createContext();
+export const LinksContext = createContext();
 
-const reducer = async (links, action) => {
+export const reducer = async (links, action) => {
   const { type, link, links: newLinks, oldIndex, newIndex } = action;
   let response;
 
@@ -35,10 +34,4 @@ const reducer = async (links, action) => {
   }
 };
 
-export const AdminContextProvider = ({ children, initialState }) => {
-  const [links, dispatch] = useAsyncReducer(reducer, initialState);
-
-  return <LinksContext.Provider value={{ links, dispatch }}>{children}</LinksContext.Provider>;
-};
-
 export const useLinks = () => useContext(LinksContext);

components/Admin/FormsTable/Actions.js

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { Button, Popconfirm, Space, notification } from 'antd';
+import { CloseOutlined, DeleteOutlined, EditOutlined, SaveOutlined } from '@ant-design/icons';
+import { useForms } from '../Context';
+import { useEditing } from './Context';
+
+function Actions({ record }) {
+  const [isVisible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { forms, dispatch: dispatchForms } = useForms();
+  const { editing, dispatch: dispatchEditing } = useEditing();
+
+  const edit = (record) => {
+    editing.form.setFieldsValue({
+      name: '',
+      slug: '',
+      url: '',
+      ...record
+    });
+    dispatchEditing({ type: 'EDIT', key: record._id });
+  };
+
+  const save = async (id) => {
+    const row = await editing.form.validateFields();
+    if (forms.some((elem) => elem.slug === row.slug && row.slug !== record.slug)) {
+      notification['error']({
+        message: 'Invalid fields',
+        description: 'Slug already exists'
+      });
+    } else {
+      dispatchForms({ type: 'UPDATE', form: row, slug: record.slug, id });
+      dispatchEditing({ type: 'CANCEL' });
+    }
+  };
+
+  const confirmDelete = () => {
+    setLoading(true);
+    dispatchForms({ type: 'DELETE', slug: record.slug });
+    setVisible(false);
+    setLoading(false);
+  };
+
+  return record._id === editing.key ? (
+    <Space>
+      <Button onClick={() => save(record._id)} type="link">
+        <SaveOutlined />
+      </Button>
+      <Button onClick={() => dispatchEditing({ type: 'CANCEL' })} type="link" danger>
+        <CloseOutlined />
+      </Button>
+    </Space>
+  ) : (
+    <Space size="middle">
+      <Button disabled={editing.key !== ''} onClick={() => edit(record)} type="link">
+        <EditOutlined />
+      </Button>
+      <Popconfirm
+        title="Are you sure you?"
+        okText="Yes"
+        cancelText="No"
+        visible={isVisible}
+        onConfirm={confirmDelete}
+        okButtonProps={{ loading: loading }}
+        onCancel={() => setVisible(false)}>
+        <Button onClick={() => setVisible(true)} type="link" danger>
+          <DeleteOutlined />
+        </Button>
+      </Popconfirm>
+    </Space>
+  );
+}
+
+export default Actions;

components/Admin/FormsTable/Context/index.js

@@ -0,0 +1,20 @@
+import { useContext, createContext } from 'react';
+
+export const EditingContext = createContext();
+
+export const reducer = async (editing, action) => {
+  // {key: '',
+  // form: Form.useForm()}
+  const { type, key } = action;
+
+  switch (type) {
+    case 'EDIT':
+      return { ...editing, key };
+    case 'CANCEL':
+      return { ...editing, key: '' };
+    default:
+      throw new Error(`Unknown action: ${type}`);
+  }
+};
+
+export const useEditing = () => useContext(EditingContext);

components/Admin/FormsTable/NewForm.js

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { useForms } from '../Context';
+import { Modal, Tooltip, Button, Input, Space, Form } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+
+const { Item } = Form;
+
+function NewForm() {
+  const { forms, dispatch } = useForms();
+  const [isVisible, setVisible] = useState(false);
+  const [form] = Form.useForm();
+
+  const ok = () => {
+    form.submit();
+    setVisible(false);
+  };
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setVisible(true)}>
+        New
+      </Button>
+      <Modal title="New Entry" visible={isVisible} onOk={ok} onCancel={() => setVisible(false)}>
+        <Form
+          form={form}
+          onFinish={(values) => dispatch({ type: 'CREATE', form: values }) && form.resetFields()}>
+          <Item
+            name="name"
+            label={
+              <Space>
+                Name
+                <Tooltip title="Don't worry, no one can see it.">
+                  <QuestionCircleOutlined />
+                </Tooltip>
+              </Space>
+            }
+            rules={[
+              {
+                required: true,
+                message: 'Please insert a name.'
+              }
+            ]}>
+            <Input placeholder="Nome do Formulário" />
+          </Item>
+          <Item
+            name="slug"
+            label="Slug"
+            rules={[
+              {
+                required: true,
+                message: 'Please insert a slug.'
+              },
+              {
+                validator: async (_, value) => {
+                  if (forms.some((elem) => elem.slug === value)) {
+                    return Promise.reject(new Error('Slug already exists'));
+                  } else {
+                    Promise.resolve();
+                  }
+                }
+              }
+            ]}>
+            <Input placeholder="id" />
+          </Item>
+          <Item
+            name="url"
+            label="URL"
+            rules={[
+              {
+                required: true,
+                message: 'Please insert a url.'
+              },
+              {
+                type: 'url',
+                message: 'This field must be a valid url.'
+              }
+            ]}>
+            <Input placeholder="https://goo.gl/form" />
+          </Item>
+        </Form>
+      </Modal>
+    </>
+  );
+}
+
+export default NewForm;

components/Admin/FormsTable/index.js

@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import { Form, Typography, notification } from 'antd';
+import { DateTime } from 'luxon';
+import useAsyncReducer from '../../../utils/useAsyncReducer';
+import { EditingContext, reducer as reducerEditing } from './Context';
+import EditableTable from '../../EditableTable';
+import Actions from './Actions';
+import NewForm from './NewForm';
+
+import API from '../../../utils/api';
+import { useForms } from '../Context';
+
+function FormsTable() {
+  const [loading, setLoading] = useState(true);
+  const { forms, dispatch } = useForms();
+  const [form] = Form.useForm();
+  const [editing, dispatchEditing] = useAsyncReducer(reducerEditing, { key: '', form: form });
+
+  const isEditing = (record) => record._id === editing.key;
+
+  useEffect(() => {
+    API.get('/forms')
+      .then((response) => {
+        dispatch({ type: 'INIT', forms: response.data.data });
+        setLoading(false);
+      })
+      .catch((error) => {
+        notification['error']({
+          message: `${error.statusText}`,
+          description: error.message
+        });
+      });
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, []);
+
+  const columns = [
+    {
+      title: 'Name',
+      editable: true,
+      required: false,
+      width: 300,
+      dataIndex: 'name'
+    },
+    {
+      title: 'Slug',
+      editable: true,
+      width: 175,
+      dataIndex: 'slug'
+    },
+    {
+      title: 'URL',
+      editable: true,
+      width: 500,
+      dataIndex: 'url',
+      render: function Url(url) {
+        return <a href={url}>{url}</a>;
+      }
+    },
+    {
+      title: 'Link',
+      editable: false,
+      width: 500,
+      dataIndex: 'slug',
+      render: function UrlLink(slug) {
+        const link = `${process.env.NEXT_PUBLIC_APP_URL}/f/${slug}`;
+
+        return (
+          <Typography.Link href={link} copyable>
+            {link}
+          </Typography.Link>
+        );
+      }
+    },
+    {
+      title: 'Visits',
+      editable: false,
+      align: 'center',
+      dataIndex: 'visits'
+    },
+    {
+      title: 'Last edited',
+      editable: false,
+      dataIndex: 'updated',
+      render: function Updated(updated) {
+        const formatted = DateTime.fromISO(updated)
+          .toRelative(Date.now())
+          .toLocaleString(DateTime.DATETIME_MED);
+        return <Typography.Text>{formatted}</Typography.Text>;
+      }
+    },
+    {
+      title: 'Actions',
+      fixed: 'right',
+      render: function Action(_, record) {
+        return <Actions record={record} />;
+      }
+    }
+  ];
+
+  return (
+    <EditingContext.Provider value={{ editing, dispatch: dispatchEditing }}>
+      <EditableTable
+        loading={loading}
+        rowKey="slug"
+        isEditing={isEditing}
+        columns={columns}
+        dataSource={forms}
+        bordered
+        form={form}
+        pagination={{
+          onChange: () => dispatchEditing({ type: 'CANCEL' }),
+          position: ['bottomCenter']
+        }}
+        footer={() => <NewForm />}
+      />
+    </EditingContext.Provider>
+  );
+}
+
+export default FormsTable;