Add store config (#136)

* Add store configuration in tab

* Fix items state

Author: bastiengrignon

package-lock.json

@@ -37,8 +37,8 @@
     "@tinymce/tinymce-react": "^5.1.1",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
-    "antd": "^5.18.1",
-    "axios": "^1.7.2",
+    "antd": "^5.22.2",
+    "axios": "^1.7.8",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
     "emailjs-com": "^3.2.0",
@@ -105,9 +105,9 @@
     "eslint-plugin-unused-imports": "^3.2.0",
     "postcss": "^8.4.38",
     "prettier": "^3.3.2",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.11",
     "typescript": "^4.9.5",
-    "vite": "^5.3.0",
+    "vite": "^5.4.11",
     "vitest": "^1.6.0"
   },
   "volta": {

package.json

@@ -0,0 +1,37 @@
+import { Form, FormInstance, FormProps } from 'antd';
+import { useCallback, useEffect, useState } from 'react';
+import { IStore, StoreService } from '../../../services/admin/store';
+
+interface IDashboardStoreHooks {
+  form: FormInstance<IStore>
+  items: IStore[]
+  onAddArticle: (values: IStore) => void
+  deleteArticle: (articleId: string) => void
+}
+
+export const useDashboardStore = (): IDashboardStoreHooks => {
+  const [form] = Form.useForm();
+  const [items, setItems] = useState<IStore[]>([]);
+
+  const onAddArticle: FormProps<IStore>['onFinish'] = useCallback(({ name, price }): void => {
+    StoreService.addArticle({ name, price, }).then((res) => setItems((prevState) => [...prevState, res]));
+    form.resetFields();
+  }, []);
+
+  const deleteArticle = useCallback((articleId: string): void => {
+    StoreService.removeArticle(articleId).then(() =>
+      setItems((prevState) => prevState.filter((item) => item.id !== articleId))
+    );
+  }, []);
+
+  useEffect(() => {
+    StoreService.getAllArticles().then(setItems);
+  }, []);
+
+  return {
+    form,
+    items,
+    onAddArticle,
+    deleteArticle,
+  };
+};

src/components/Admin/DashboardStore/DashboardStore.hooks.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import Navigation from '../../../pages/admin/Navigation';
+import { Button, Divider, Flex, Form, Input, InputNumber, Typography } from 'antd';
+import { formattedPrice } from '../../../lib/form';
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { useDashboardStore } from './DashboardStore.hooks';
+
+const DashboardStore: React.FC = () => {
+  const { form, items, onAddArticle, deleteArticle } = useDashboardStore();
+  return (
+    <Navigation>
+      <p className="text-xl mb-2">Liste des articles : </p>
+      <Form layout="inline" name="addArticle" form={form} onFinish={onAddArticle}>
+        <Form.Item name="name" rules={[{ required: true, message: 'Veuillez rentrer un nom d\'article' }]}>
+          <Input placeholder="Nom de l'article"/>
+        </Form.Item>
+        <Form.Item name="price" rules={[{ required: true, message: 'Veuillez rentrer un prix' }]}>
+          <InputNumber min={0} step={0.5} placeholder="Prix"/>
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit" className="button">Ajouter</Button>
+        </Form.Item>
+      </Form>
+      <Divider/>
+      <Flex gap={8} className="mt-4">
+        {items.length > 0 ? items.map((article) => (
+          <div key={article.id} className="flex bg-white rounded-md p-2 aspect-[1/1] w-28">
+            <Flex vertical justify="space-between" gap={8} className="w-full">
+              <Flex align="center" justify="space-between" className="w-full">
+                <Typography.Text strong>
+                  {article.name}
+                </Typography.Text>
+                <Button
+                  shape="circle"
+                  variant="filled"
+                  color="danger"
+                  size="small"
+                  icon={<CloseCircleOutlined/>}
+                  onClick={() => deleteArticle(article.id)}
+                />
+              </Flex>
+              <Typography.Text>
+                {formattedPrice(article.price)}
+              </Typography.Text>
+            </Flex>
+          </div>
+        )) : <div>Aucun article créé</div>}
+      </Flex>
+    </Navigation>
+  );
+};
+
+export default DashboardStore;

src/components/Admin/DashboardStore/index.tsx

@@ -20,6 +20,7 @@ const DashboardPartner = loadable(() => import('../Admin/DashboardPartner'));
 const DashboardTrombinoscope = loadable(() => import('../Admin/DashboardTrombinoscope'));
 const DashboardVote = loadable(() => import('../Admin/DashboardVote'));
 const DashboardVoteStatistics = loadable(() => import('../Admin/DashboardVoteStatistics'));
+const DashboardStore = loadable(() => import('../Admin/DashboardStore'));
 const Footer = loadable(() => import('../../components/Footer'));
 import Navbar from '../../components/Navbar';
 
@@ -35,6 +36,7 @@ const Routes: React.FC = () => {
       <Route path={RouterUrl.adminTrombinoscope} element={<DashboardTrombinoscope />} />
       <Route path={RouterUrl.adminVote} element={<DashboardVote />} />
       <Route path={RouterUrl.adminVoteStatistics} element={<DashboardVoteStatistics />} />
+      <Route path={RouterUrl.adminStore} element={<DashboardStore />} />
 
       <Route path={RouterUrl.home} element={<Dashboard />} />
     </RouterRoutes>

src/components/Routes/index.tsx

@@ -21,6 +21,7 @@ export enum RouterUrl {
   adminTrombinoscope = '/trombinoscope',
   adminVote = '/votes',
   adminVoteStatistics = '/votes/:voteId',
+  adminStore = '/store',
 
   notFound = '*',
 }

src/constants/index.ts

@@ -5,3 +5,8 @@ export const fillFormDataWithKeys = (form: FormData, object: string | object) =>
     }
   });
 };
+
+export const formattedPrice = (price: number): string => new Intl.NumberFormat('fr-FR', {
+  style: 'currency',
+  currency: 'EUR'
+}).format(price).padEnd(4, '0');

src/lib/form.ts

@@ -6,6 +6,7 @@ import {
   MenuOutlined,
   PlayCircleOutlined,
   QuestionCircleOutlined,
+  ShopOutlined,
   TeamOutlined,
   VideoCameraOutlined,
 } from '@ant-design/icons';
@@ -53,6 +54,11 @@ const adminRoutes = [
     link: RouterUrl.adminVote,
     icon: <QuestionCircleOutlined />,
   },
+  {
+    name: 'Magasin',
+    link: RouterUrl.adminStore,
+    icon: <ShopOutlined />,
+  },
 ];
 
 interface NavigationProps {

src/pages/admin/Navigation/index.tsx

@@ -0,0 +1,2 @@
+export * from './store.interface';
+export * from './store.service';

src/services/admin/store/index.ts

@@ -0,0 +1,6 @@
+export interface IStore {
+  id: string
+  name: string
+  price: number
+  image?: string
+}