admin panel API connected

package-lock.json

@@ -4978,6 +4978,11 @@
         }
       }
     },
+    "date-fns": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
+      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ=="
+    },
     "debug": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",

package.json

@@ -7,6 +7,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "axios": "^0.19.2",
+    "date-fns": "^2.16.1",
     "notistack": "^1.0.1",
     "react": "16.8.0",
     "react-click-away-listener": "^1.4.3",

src/components/Administrator.tsx

@@ -1,12 +1,41 @@
+import { format } from 'date-fns';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components/macro';
 import { axiosInstance } from '../utils/axiosInstance';
+import { useSnackbar } from 'notistack';
+import CloseIcon from '@material-ui/icons/Close';
+import { SyncLoader } from 'react-spinners';
 
+const StyledCloseIcon = styled(CloseIcon)`
+  color: #000000;
+  &:hover {
+    color: white;
+    cursor: pointer;
+  }
+`;
+
+const SaveButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  background-color: #c7a424;
+  border: none;
+  font-weight: bold;
+  cursor: pointer;
+  height: 40px;
+  &:hover {
+    color: #ffffff;
+    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
+  }
+
+  width: 150px;
+`;
 const AdministratorWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  margin:0 auto;
+  margin: 0 auto;
-  height:100vh;
+  height: 100vh;
 `;
 
 const Wrap = styled.div`
@@ -52,6 +81,9 @@ const Form = styled.form`
 `;
 
 export const Administrator = () => {
+  const { enqueueSnackbar } = useSnackbar();
+  const { closeSnackbar } = useSnackbar();
+
   const today = new Date();
   const dd = String(today.getDate()).padStart(2, '0');
   const mm = String(today.getMonth() + 1).padStart(2, '0');
@@ -59,61 +91,118 @@ export const Administrator = () => {
 
   const date = yyyy + '-' + mm + '-' + dd;
 
-  const [selectedFile, setSelectedFile] = useState<File|null>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-
+  const [startFirstDate, setStartFirstDate] = useState<Date | null>(null);
-  const destination = `${process.env.REACT_APP_API_URL}/api/v1/configurator/config`;
+  const [endFirstDate, setEndFirstDate] = useState<Date | null>(null);
+  const [startSecondDate, setStartSecondDate] = useState<Date | null>(null);
+  const [endSecondDate, setEndSecondDate] = useState<Date | null>(null);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-  }, [selectedFile]);
+    if (startFirstDate !== null) {
+      console.log(format(startFirstDate, 'dd.MM.yyyy'));
+    }
+  }, [startFirstDate]);
 
-  const uploadFile = async (event:React.FormEvent<HTMLFormElement>) => {
+  const uploadFile = async (event: React.FormEvent<HTMLFormElement>) => {
+    const action = (key: any) => (
+      <>
+        <StyledCloseIcon
+          onClick={() => {
+            closeSnackbar(key);
+          }}
+        ></StyledCloseIcon>
+      </>
+    );
     event.preventDefault();
     const formData = new FormData();
-    formData.append("file",selectedFile as Blob);
+    formData.append('file', selectedFile as Blob);
+    if (startFirstDate !== null) {
+      formData.append('firstTourBegin', format(startFirstDate, 'dd.MM.yyyy'));
+    }
+    if (endFirstDate !== null) {
+      formData.append('firstTourEnd', format(endFirstDate, 'dd.MM.yyyy'));
+    }
+    if (startSecondDate !== null) {
+      formData.append('secondTourBegin', format(startSecondDate, 'dd.MM.yyyy'));
+    }
+    if (endSecondDate !== null) {
+      formData.append('secondTourEnd', format(endSecondDate, 'dd.MM.yyyy'));
+    }
 
-    const response = await axiosInstance.post(`${process.env.REACT_APP_API_URL}/api/v1/configurator/config`, formData)
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
 
-    console.log(response);
+    try {
-  }
+      setLoading(true);
-  
+      const response = await axiosInstance.post(
+        `${process.env.REACT_APP_API_URL}/api/v1/configurator/config/`,
+        formData,
+        config,
+      );
+      enqueueSnackbar('Plan został zapisany', {
+        variant: 'success',
+        action,
+      });
+      console.log(response);
+    } catch (e) {
+      enqueueSnackbar('Zapisywanie planu nie powiodło się', {
+        variant: 'error',
+        action,
+      });
+      console.log(e);
+    }
+    setLoading(false);
+  };
 
   return (
     <AdministratorWrapper>
       <Wrap>
-      <LogoWrapper>
+        <LogoWrapper>
-        <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
+          <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
-        <Text> plan na plan </Text>
+          <Text> plan na plan </Text>
-      </LogoWrapper>
+        </LogoWrapper>
-      <Form
+        <Form onSubmit={uploadFile}>
-        onSubmit={uploadFile}
-      >
-        <div>
-          <div>Start:</div>{' '}
           <div>
-            <input type="date" min={date} />
+            <div>Start pierwszej tury:</div>{' '}
+            <div>
+              <input type="date" min={date} onChange={(e) => setStartFirstDate(e.target.valueAsDate)} />
+            </div>
+            <div>Koniec pierwszej tury:</div>{' '}
+            <div>
+              <input type="date" min={date} onChange={(e) => setEndFirstDate(e.target.valueAsDate)} />
+            </div>
           </div>
-        </div>
-        <div>
-          <div>Koniec:</div>{' '}
           <div>
-            <input type="date" min={date} />
+            <div>Start drugiej tury:</div>{' '}
+            <div>
+              <input type="date" min={date} onChange={(e) => setStartSecondDate(e.target.valueAsDate)} />
+            </div>
           </div>
-        </div>
+          <div>
-        <div>
+            <div>Koniec drugiej tury:</div>{' '}
-          <input
+            <div>
-            type="file"
+              <input type="date" min={date} onChange={(e) => setEndSecondDate(e.target.valueAsDate)} />
-            onChange={(e) => {
+            </div>
-              if (e.target.files && e.target.files[0]) {
+          </div>
-                const file = e.target.files[0];
+          <div>
-                setSelectedFile(file);
+            <input
-              }
+              type="file"
-            }}
+              onChange={(e) => {
-          />
+                if (e.target.files && e.target.files[0]) {
-        </div>
+                  const file = e.target.files[0];
-        <div>
+                  setSelectedFile(file);
-          <input type="submit"/>
+                }
-        </div>
+              }}
-      </Form>
+            />
+          </div>
+          <div>
+            <SaveButton type="submit">{loading === false ? 'Zapisz' : <SyncLoader />} </SaveButton>
+          </div>
+        </Form>
       </Wrap>
     </AdministratorWrapper>
   );

src/contexts/CoursesProvider.tsx

@@ -150,13 +150,13 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
         `${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${userID}`,
         JSON.stringify(basketIds),
       );
-      enqueueSnackbar('Plan został zapisany', {
+      enqueueSnackbar('Ustawienia zostały zapisane', {
         variant: 'success',
         action,
       });
     } catch (e) {
       console.log('error: ', e);
-      enqueueSnackbar('Zapisywanie planu nie powiodło się', {
+      enqueueSnackbar('Ustawienia nie zostały zapisane', {
         variant: 'error',
         action,
       });