diff --git a/src/Interfaces/IContacts.ts b/src/Interfaces/IContacts.ts new file mode 100644 index 0000000..7bd7348 --- /dev/null +++ b/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; +} diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 87f7908..403df8b 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/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 = ({ data }) => { diff --git a/src/components/Dropdown/DropdownList/DropdownList.tsx b/src/components/Dropdown/DropdownList/DropdownList.tsx index 22c1f68..bc75c98 100644 --- a/src/components/Dropdown/DropdownList/DropdownList.tsx +++ b/src/components/Dropdown/DropdownList/DropdownList.tsx @@ -1,4 +1,4 @@ -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" @@ -6,7 +6,9 @@ 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 = ({ menu }) => { +export const DropdownList: FC = ({ menu }) => { const dispatch = useAppDispatch() const { stateData } = useAppSelector(state => state.filter) const [isOpen, setIsOpen] = useState(false) diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 083ed3a..61e1a12 100644 --- a/src/components/Footer/Footer.tsx +++ b/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 = () => {
{cont?.employer} - {cont?.data} + {cont?.ip} {cont?.address} {cont?.tel + ","} {cont?.mail} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 2e91b22..bdeaf79 100644 --- a/src/components/Header/Header.tsx +++ b/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([]) - 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 (
@@ -45,7 +32,6 @@ export const Header: FC = () => { className={[classes.navList, classes.navListItem]} /> } -
Закладки diff --git a/src/components/Header/HeaderMenu/HeaderMenu.module.scss b/src/components/Header/HeaderMenu/HeaderMenu.module.scss index bc56425..544c437 100644 --- a/src/components/Header/HeaderMenu/HeaderMenu.module.scss +++ b/src/components/Header/HeaderMenu/HeaderMenu.module.scss @@ -31,4 +31,5 @@ } .error { color: red; + padding: 20px 0; } diff --git a/src/components/Header/HeaderMenu/HeaderMenu.tsx b/src/components/Header/HeaderMenu/HeaderMenu.tsx index 787abe2..0361cbc 100644 --- a/src/components/Header/HeaderMenu/HeaderMenu.tsx +++ b/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([]) - 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 (
diff --git a/src/constants/query.ts b/src/constants/query.ts index 728aebc..9635be1 100644 --- a/src/constants/query.ts +++ b/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"; diff --git a/src/hooks/useRequest.ts b/src/hooks/useRequest.ts new file mode 100644 index 0000000..d667588 --- /dev/null +++ b/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([]); + 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, + }; +}; diff --git a/src/pages/Contacts/Contacts.tsx b/src/pages/Contacts/Contacts.tsx index ec3a141..62bc858 100644 --- a/src/pages/Contacts/Contacts.tsx +++ b/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 = () => {
- {cont?.address} + {cont?.ip}
  • @@ -107,7 +107,7 @@ export const Contacts: FC = () => {
  • {cont?.employer} - {cont?.data} + {cont?.ip}
    diff --git a/src/server/data/contacts.json b/src/server/data/contacts.json index 839e302..50bcbaa 100644 --- a/src/server/data/contacts.json +++ b/src/server/data/contacts.json @@ -5,5 +5,5 @@ "mail": "sdaem@sdaem.by", "workTime": "Режим работы: 08:00-22:00", "employer": "ИП Шушкевич Андрей Викторович", - "data": "УНП 192602485 Минским горисполкомом 10.02.2016" + "ip": "УНП 192602485 Минским горисполкомом 10.02.2016" }