fix:moved requests to the server into a separate function

src/Interfaces/IContacts.ts

@@ -0,0 +1,9 @@
+export interface IContacts {
+  address: string;
+  tel: string;
+  mail: string;
+  href: string;
+  workTime: string;
+  employer: string;
+  ip: string;
+}

src/components/Dropdown/Dropdown.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import { DropdownList } from "./DropdownList/DropdownList";
 
-import { IList } from "./DropdownList/DropdownList";
+import { IListDropdown } from "./DropdownList/DropdownList";
 
 import classes from "./Dropdown.module.scss"
 
 interface IPropsDropdown {
-  data: IList[]
+  data: IListDropdown[]
 }
 export const Dropdown: FC<IPropsDropdown> = ({ data }) => {
 

src/components/Dropdown/DropdownList/DropdownList.tsx

@@ -1,12 +1,14 @@
-import { FC, useState, useEffect, useRef } from "react"
+import { FC, useState, useEffect, useRef, ReactNode } from "react"
 import { Link } from "react-router-dom"
 import { useAppDispatch, useAppSelector } from "../../../hooks/redux/redux-hooks"
 import { setSelectedData } from "../../../store/reducers/filterReducer"
 
 import { IconSvg } from "../../IconSvg/IconSvg"
 import classes from "./DropdownList.module.scss"
 
-export interface IList {
+export interface IListDropdown {
+  address: ReactNode
+  data: ReactNode
   title: string,
   isIcon?: boolean,
   list: {
@@ -18,11 +20,11 @@ export interface IList {
   }[]
 }
 
-export interface IPropsDropdownList {
-  menu: IList,
+export interface IPropsDropdown {
+  menu: IListDropdown,
 }
 
-export const DropdownList: FC<IPropsDropdownList> = ({ menu }) => {
+export const DropdownList: FC<IPropsDropdown> = ({ menu }) => {
   const dispatch = useAppDispatch()
   const { stateData } = useAppSelector(state => state.filter)
   const [isOpen, setIsOpen] = useState(false)

src/components/Footer/Footer.tsx

@@ -33,7 +33,7 @@ interface IContacts {
   href: string,
   workTime: string,
   employer: string,
-  data: string
+  ip: string
 }
 export const Footer = () => {
   const dispatch = useAppDispatch()
@@ -57,7 +57,7 @@ export const Footer = () => {
             </Logo >
             <div className={classes.contacts}>
               <span>{cont?.employer}</span>
-              <span>{cont?.data}</span>
+              <span>{cont?.ip}</span>
               <span>{cont?.address}</span>
               <span>{cont?.tel + ","}</span>
               <span>{cont?.mail}</span>

src/components/Header/Header.tsx

@@ -1,37 +1,24 @@
-import { FC, useEffect, useState } from 'react'
+import { FC } from 'react'
 import { Link } from 'react-router-dom'
 
 import { Navigation } from '../Navigation/Navigation'
 import { HeaderMenu } from './HeaderMenu/HeaderMenu'
 import { IconSvg } from '../IconSvg/IconSvg'
 
-import classes from './Header.module.scss'
 import { MyLoader } from '../../Spinner/preloader'
-type Data = {
+import { useRequest } from '../../hooks/useRequest'
+
+import classes from './Header.module.scss'
+import { NAVIGATION } from '../../constants/query'
+
+export interface IHeaderNavData {
   id: number
   item: string,
   path: string,
   isIcon?: boolean,
-}[]
+}
 export const Header: FC = () => {
-  const [data, setData] = useState<Data>([])
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
-  useEffect(() => {
-    const requestHandler = async () => {
-      try {
-        const request = await fetch('/api/navigation');
-        const response = await request.json();
-        setLoading(false);
-        setData(response);
-      } catch (error) {
-        console.log(error)
-        setError(true);
-        setLoading(false);
-      }
-    };
-    requestHandler();
-  }, []);
+  const { data, loading, error } = useRequest(NAVIGATION)
 
   return (
     <header className={classes.header}>
@@ -45,7 +32,6 @@ export const Header: FC = () => {
             className={[classes.navList, classes.navListItem]}
           />
         }
-
         <div className={classes.buttons}>
           <Link to={"/bookmarks"} className={classes.bookmark} >
             Закладки

src/components/Header/HeaderMenu/HeaderMenu.module.scss

@@ -31,4 +31,5 @@
 }
 .error {
   color: red;
+  padding: 20px 0;
 }

src/components/Header/HeaderMenu/HeaderMenu.tsx

@@ -1,32 +1,16 @@
-import { FC, useEffect, useState } from 'react'
+import { FC } from 'react'
 import { Link } from 'react-router-dom'
 import { Logo } from '../../Logo/Logo'
 import { Dropdown } from '../../Dropdown/Dropdown'
+import { MyLoader } from '../../../Spinner/preloader'
+import { useRequest } from '../../../hooks/useRequest'
 
 import classes from './HeaderMenu.module.scss'
-import { IList } from '../../Dropdown/DropdownList/DropdownList'
-import { MyLoader } from '../../../Spinner/preloader'
+import { DROPDOWN } from '../../../constants/query'
 
 export const HeaderMenu: FC = () => {
 
-  const [data, setData] = useState<IList[]>([])
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
-  useEffect(() => {
-    const requestHandler = async () => {
-      try {
-        const request = await fetch('/api/menu');
-        const response = await request.json();
-        setLoading(false);
-        setData(response);
-      } catch (error) {
-        console.log(error)
-        setError(true);
-        setLoading(false);
-      }
-    };
-    requestHandler();
-  }, []);
+  const { data, loading, error } = useRequest(DROPDOWN)
 
   return (
     <div className={classes.wrapper}>

src/constants/query.ts

@@ -3,3 +3,5 @@ export const CARS = "/api/cars";
 export const BATHS = "/api/baths";
 export const COTTAGES = "/api/cottages";
 export const NEWS = "/api/news";
+export const NAVIGATION = "/api/navigation";
+export const DROPDOWN = "/api/menu";

src/hooks/useRequest.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { IListDropdown } from "../components/Dropdown/DropdownList/DropdownList";
+import { IHeaderNavData } from "../components/Header/Header";
+
+export const useRequest = (apiUrl: string) => {
+  const [data, setData] = useState<IListDropdown[] & IHeaderNavData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const requestHandler = async () => {
+      try {
+        const request = await fetch(apiUrl);
+        const response = await request.json();
+        setLoading(false);
+        setData(response);
+      } catch (error) {
+        console.log(error);
+        setError(true);
+        setLoading(false);
+      }
+    };
+    requestHandler();
+  }, [apiUrl]);
+
+  return {
+    data,
+    loading,
+    error,
+  };
+};

src/pages/Contacts/Contacts.tsx

@@ -13,7 +13,7 @@ interface IContacts {
   href: string,
   workTime: string,
   employer: string,
-  data: string
+  ip: string
 }
 const messenger = [
   { id: "#viber", href: "https://www.viber.com/ru/" },
@@ -58,7 +58,7 @@ export const Contacts: FC = () => {
                   <div className={classes.iconWrap}>
                     <IconSvg id="#mark" className={classes.icons} />
                   </div>
-                  {cont?.address}
+                  {cont?.ip}
                 </li>
                 <li className={classes.listItem}>
                   <div className={classes.iconWrap}>
@@ -107,7 +107,7 @@ export const Contacts: FC = () => {
                 </li>
               </ul>
               <span className={classes.ownerData}>{cont?.employer}</span>
-              <span className={classes.ownerData}>{cont?.data}</span>
+              <span className={classes.ownerData}>{cont?.ip}</span>
               <div className={classes.disclaimer}>
                 <IconSvg id="#alert" className={classes.alertIcon} />
                 <span>

src/server/data/contacts.json

@@ -5,5 +5,5 @@
   "mail": "[email protected]",
   "workTime": "Режим работы: 08:00-22:00",
   "employer": "ИП Шушкевич Андрей Викторович",
-  "data": "УНП 192602485 Минским горисполкомом 10.02.2016"
+  "ip": "УНП 192602485 Минским горисполкомом 10.02.2016"
 }