Merge pull request #219 from ita-social-projects/#186connectWithSWR

#186connect with swr
ita-social-projects · Sep 23, 2023 · a1afb1b · a1afb1b
2 parents de24efa + cdcfab9
commit a1afb1b
Show file tree

Hide file tree

Showing 11 changed files with 139 additions and 61 deletions.
diff --git a/FrontEnd/package-lock.json b/FrontEnd/package-lock.json
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
@@ -17,6 +17,7 @@
     "react-router-dom": "^6.4.1",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
+    "swr": "^2.2.2",
     "validator": "^13.11.0",
     "web-vitals": "^2.1.4"
   },

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/OneSelectChip.js b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/OneSelectChip.js
@@ -0,0 +1,88 @@
+import css from './MultipleSelectChip.module.css';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import { useTheme } from '@mui/material/styles';
+
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
+function getStyles(name, selectedOptions, theme) {
+  return {
+    fontWeight:
+      selectedOptions.indexOf(name) === -1
+        ? theme.typography.fontWeightRegular
+        : theme.typography.fontWeightMedium,
+  };
+}
+
+export default function OneSelectChip(props) {
+  const theme = useTheme();
+  return (
+    <div className={css['fields__column']}>
+      <div className={css['fields__label']}>
+        {props.requredField && <label className={css['fields__label--required']}>*</label>}
+        <label
+          className={`${css['fields__label--text']} ${!props.requredField && css['fields__field--notrequired']}`}
+        >
+          {props.label}
+        </label>
+      </div>
+      <FormControl sx={{ width: props.selectedWidth ? props.selectedWidth : 257}} size='small' >
+        <InputLabel id="demo-multiple-chip-label" className={css['choose__placeholder']}>{props.defaultValue}</InputLabel>
+        <Select
+          name={props.name}
+          labelId="demo-multiple-chip-label"
+          id="demo-multiple-chip"
+          value={props.value}
+          onChange={props.updateHandler}
+          input={<OutlinedInput id="select-multiple-chip" label={props.defaultValue} />}
+          renderValue={(selected) => (
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                <Chip
+                 label={selected} 
+                 sx={{color: '#1F9A7C', backgroundColor: 'white', border: '1px solid #1F9A7C'}}/>    
+            </Box>
+          )}
+          MenuProps={MenuProps}
+        >
+          {props.options.map((option) => (
+            <MenuItem
+              key={option.key}
+              value={option.value}
+              style={{
+                ...getStyles(option.value, props.value, theme),
+                fontFamily: 'Inter, sans-serif',
+                fontSize: '14px',
+                fontWeight: 400,
+                lineHeight: '20px',
+                letterSpacing: '-0.01em',
+                backgroundColor: props.value.includes(option.name) && '#A3AAB0',
+              }}
+            >
+              {option.value}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      {props.requredField &&
+        <div className={css['error-message']}>
+          {props.error}
+        </div>
+      }
+    </div>
+  );
+}
diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.js b/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.js
@@ -1,11 +1,13 @@
 import css from './FormComponents.module.css';
 import { useState, useEffect } from 'react';
+import useSWR from 'swr';
 
 import CheckBoxField from './FormFields/CheckBoxField';
 import FullField from './FormFields/FullField';
 import HalfFormField from './FormFields/HalfFormField';
 import ImageField from './FormFields/ImageField';
 import MultipleSelectChip from './FormFields/MultipleSelectChip';
+import OneSelectChip from './FormFields/OneSelectChip';
 import TextField from './FormFields/TextField';
 
 const LABELS = {
@@ -36,34 +38,6 @@ const CATEGORIES = [
     { name: "Спеції" },
 ];
 
-const REGIONS = [
-    { name: "Київська область" },
-    { name: "Вінницька область" },
-    { name: "Волинська область" },
-    { name: "Дніпропетровська область" },
-    { name: "Донецька область" },
-    { name: "Житомирська область" },
-    { name: "Закарпатська область" },
-    { name: "Запорізька область" },
-    { name: "Івано-Франківська область" },
-    { name: "Кіровоградська область" },
-    { name: "Крим" },
-    { name: "Луганська область" },
-    { name: "Львівська область" },
-    { name: "Миколаївська область" },
-    { name: "Одеська область" },
-    { name: "Полтавська область" },
-    { name: "Рівненська область" },
-    { name: "Сумська область" },
-    { name: "Тернопільська область" },
-    { name: "Харківська область" },
-    { name: "Херсонська область" },
-    { name: "Хмельницька область" },
-    { name: "Черкаська область" },
-    { name: "Чернівецька область" },
-    { name: "Чернігівська область" },
-];
-
 const ACTIVITIES = [
     { name: "Виробництво" },
     { name: "Роздрібна мережа" },
@@ -90,13 +64,17 @@ const ERRORS = {
 const TEXT_AREA_MAX_LENGTH = 1000;
 const IMAGE_SIZE = 50 * 1024 * 1024;
 
+const fetcher = (...args) => fetch(...args).then(res => res.json());
+
 const GeneralInfo = (props) => {
     const [user, setUser] = useState(props.user);
     const [formStateErr, setFormStateErr] = useState(ERRORS);
     const [imageBannerError, setImageBannerError] = useState(null);
     const [imageLogoError, setImageLogoError] = useState(null);
     const [edrpouError, setEdrpouError] = useState(null);
 
+    const { data: fetchedRegions, error, isLoading } = useSWR('http://127.0.0.1:8000/api/regions/', fetcher);
+
     useEffect(() => {
         props.currentFormNameHandler(props.curForm);
     }, []);
@@ -131,6 +109,13 @@ const GeneralInfo = (props) => {
         });
     };
 
+    const onUpdateOneSelectField = e => {
+        setUser((prevState) => {
+            const selectedRegion = fetchedRegions.find((el) => el.value ===  e.target.value);
+            return { ...prevState, [e.target.name]: selectedRegion.key };
+        });
+    };    
+
     const onUpdateEdrpouField = e => {
         if (e.target.value && e.target.value.length !== 8) {
             setEdrpouError('ЄДРПОУ має містити 8 символів');
@@ -248,15 +233,17 @@ const GeneralInfo = (props) => {
                             value={user.edrpou}
                             error={edrpouError}
                         />
-                        <MultipleSelectChip
+                        {!isLoading && 
+                        <OneSelectChip
                             name='regions'
-                            options={REGIONS}
+                            options={fetchedRegions}
                             label={LABELS.regions}
-                            updateHandler={onUpdateSelectField}
+                            updateHandler={onUpdateOneSelectField}
                             requredField={false}
-                            value={user.regions}
                             defaultValue="Оберіть"
+                            value={fetchedRegions.find((el) => el.key ===  user.regions)?.value ?? ''}
                         />
+                    }
                     </div>
                     <div className={css['fields-groups']}>
                         <MultipleSelectChip

diff --git a/FrontEnd/src/components/ProfilePage/ProfilePage.js b/FrontEnd/src/components/ProfilePage/ProfilePage.js
@@ -4,6 +4,7 @@ import ProfileContent from './ProfilePageComponents/ProfileContent';
 import { useState } from 'react';
 import BreadCrumbs from '../BreadCrumbs/BreadCrumbs';
 
+
 const USER = {
     'email': 'ex@gmail.com',
     'companyEmail': '',    
@@ -21,7 +22,7 @@ const USER = {
     'edrpou': '',
     'activities': [],
     'categories': [],
-    'regions': [],
+    'regions': '',
     'bannerImage': '',
     'logo': '',    
     'slogan': '',

diff --git a/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.js b/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.js
@@ -1,6 +1,5 @@
 import css from './ProfileContent.module.css';
 import { Link, NavLink, Route, Routes, Navigate } from 'react-router-dom';
-import axios from 'axios';
 import AdditionalInfo from '../FormComponents/AdditionalInfo';
 import ContactsInfo from '../FormComponents/ContactsInfo';
 import DeleteProfilePage from '../FormComponents/DeleteProfileComponent/DeleteProfilePage';
@@ -72,23 +71,12 @@ const ProfileContent = (props) => {
 
                 <Routes>
                     <Route path="/delete" element={<DeleteProfilePage user={props.user} currentFormNameHandler={props.currentFormNameHandler} curForm={FORM_NAMES[6]} />} />
-
-                    {/* {INFOLINKS.map((el, index) => (
-                        <Route
-                            path={el.link}
-                            Component={() => <el.element user={props.user} onUpdate={props.onUpdate} currentFormNameHandler={props.currentFormNameHandler} curForm={FORM_NAMES[index]}/>}
-                            key={el.title}
-                        />
-                    ))} */}
-
                     <Route path="/user-info" element={<UserInfo user={props.user} onUpdate={props.onUpdate} currentFormNameHandler={props.currentFormNameHandler} curForm={FORM_NAMES[0]} />} />
                     <Route path="/general-info" element={<GeneralInfo user={props.user} onUpdate={props.onUpdate} currentFormNameHandler={props.currentFormNameHandler} curForm={FORM_NAMES[1]} />} />
                     <Route path="/contacts" element={<ContactsInfo user={props.user} onUpdate={props.onUpdate} currentFormNameHandler={props.currentFormNameHandler} curForm={FORM_NAMES[2]} />} />
                     <Route path="/products-service-info" element={<ProductServiceInfo user={props.user} onUpdate={props.onUpdate} currentFormNameHandler={props.currentFormNameHandler} curForm={FORM_NAMES[3]} />} />
                     <Route path="/additional-info" element={<AdditionalInfo user={props.user} onUpdate={props.onUpdate} currentFormNameHandler={props.currentFormNameHandler} curForm={FORM_NAMES[4]} />} />
                     <Route path="/startup" element={<StartupInfo user={props.user} onUpdate={props.onUpdate} currentFormNameHandler={props.currentFormNameHandler} curForm={FORM_NAMES[5]} />} />
-
-
                 </Routes>
             </div>
 

diff --git a/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.js b/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.js
@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import axios from 'axios';
 import EyeInvisible from "../../../../authorization/EyeInvisible";
 import EyeVisible from "../../../../authorization/EyeVisible";
 import styles from "./SignUpFormContent.module.css";

diff --git a/FrontEnd/src/components/authorization/LoginContent.jsx b/FrontEnd/src/components/authorization/LoginContent.jsx
@@ -1,6 +1,5 @@
 import { useForm } from "react-hook-form";
 import { useState, useEffect} from "react";
-import axios from 'axios';
 import validator from "validator";
 import EyeVisible from "./EyeVisible";
 import EyeInvisible from "./EyeInvisible";

diff --git a/FrontEnd/src/components/landing-page/companies/Companies.js b/FrontEnd/src/components/landing-page/companies/Companies.js
@@ -1,17 +1,6 @@
-import axios from 'axios';
 import './Companies.css';
 import {ProductCard} from "./companies-product-cards/CompaniesProductCards";
 
-async function list_of_companies() {
-const companiesList = axios.get('http://localhost:8000/api/profiles/')
-
-    .then(function (response) {
-    return response.data;
-  })
-  .catch(error => {console.log(error)});
-return companiesList;
-}
-console.log(list_of_companies());
 
 const MainCompanies = () => {
     const companyDataList = [

diff --git a/forum/settings.py b/forum/settings.py
@@ -65,13 +65,13 @@
 CORS_ALLOW_ALL_ORIGINS = False
 
 CORS_ORIGIN_WHITELIST = [
-    'http://localhost',
+    'http://localhost:3000',
     'http://127.0.0.1',
     'http://0.0.0.0',
 ]
 
 CORS_ALLOWED_ORIGINS = [
-    'http://localhost',
+    'http://localhost:3000',
     'http://127.0.0.1',
     'http://0.0.0.0',
 ]

diff --git a/profiles/serializers.py b/profiles/serializers.py
@@ -88,4 +88,4 @@ def validate(self, attrs):
 class RegionSerializer(serializers.Serializer):
 
     def to_representation(self, obj):
-        return {obj[0]: obj[1]}
+        return {'key':obj[0], 'value': obj[1]}