api

src/api/Api.ts

@@ -0,0 +1,42 @@
+// Modules
+import axios from "axios";
+import { Dispatch, SetStateAction } from "react";
+import { useSelector } from "react-redux";
+
+// Types
+import { IurlParamAdder } from "../types/api.types";
+import { RootState } from "../types/store.types";
+
+// Helpers
+import { urlParamAdder } from "../helpers/urlParamAdder";
+
+export class Api {
+  url: string = "";
+  params?: IurlParamAdder[];
+  language = useSelector<RootState, RootState["language"]["title"]>(
+    (state) => state.language.title
+  );
+
+  constructor(url: string, params?: IurlParamAdder[]) {
+    this.url = url;
+    this.params = params;
+  }
+
+  get(state: any, setState: Dispatch<SetStateAction<any>>) {
+    const locale = { name: "locale", value: this.language };
+    if (
+      this.url.match(
+        "^(http(s)://.)[-a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)$"
+      )
+    )
+      throw new Error("Bad URL");
+    axios
+      .get(urlParamAdder(locale, this.url, this.params))
+      .then((res) => {
+        setState(res.data);
+      })
+      .catch((err) => {
+        throw new Error(err);
+      });
+  }
+}

src/components/header/SubNav.tsx

@@ -3,9 +3,10 @@ import { Link } from "react-router-dom";
 import { v4 as uuidv4 } from "uuid";
 import { motion } from "framer-motion";
 import { useDispatch, useSelector } from "react-redux";
+import { useEffect, useState } from "react";
 
 // Types
-import { ActiveLinkType, RootState } from "../../types/store.types";
+import { RootState } from "../../types/store.types";
 
 // Actions
 import { setActiveLink } from "../../actions/setActiveLink.action";
@@ -13,6 +14,10 @@ import { setActiveLink } from "../../actions/setActiveLink.action";
 // Animations
 import { linkMotion } from "../../animations/subNav.animations";
 
+// Api
+import { Api } from "../../api/Api";
+import { url } from "../../url";
+
 interface subNavDataType {
   data: string;
   link: string;
@@ -64,12 +69,26 @@ const SubNav = () => {
   const activeLink = useSelector<RootState, RootState["activeLink"]["active"]>(
     (state) => state.activeLink.active
   );
+  const language = useSelector<RootState, RootState["language"]["title"]>(
+    (state) => state.language.title
+  );
+
   const dispatch = useDispatch();
 
   const onClickLink = (active: number) => {
     dispatch(setActiveLink(active));
   };
 
+  const [data, setData] = useState<any>();
+
+  // Api
+  const api = new Api(url + "/categories");
+
+  useEffect(() => {
+    api.get(data, setData);
+  }, [language]);
+  console.log(data);
+
   return (
     <nav className="subnav">
       <div className="container">

src/helpers/urlParamAdder.ts

@@ -0,0 +1,15 @@
+import { IurlParamAdder } from "../types/api.types";
+
+export const urlParamAdder = (
+  locale: IurlParamAdder,
+  url: string,
+  params?: IurlParamAdder[]
+): string => {
+  url = url + `?${locale.name}=${(locale.value as string).toLowerCase()}`;
+  if (!params) return url;
+  let concatendated: string = "";
+  params.forEach((param: IurlParamAdder) => {
+    concatendated = concatendated + `&${param.name}=${param.value}`;
+  });
+  return url + concatendated;
+};

src/reducers/dataReducer.ts

@@ -0,0 +1,14 @@
+// Types
+import { ILanguage, ILanguageAction } from "../types/store.types";
+
+// Helpers
+import getSavedLanguage from "../helpers/getSavedLanguage";
+
+const initialState = {
+  title: getSavedLanguage(),
+};
+
+export const languageReducer = (
+  state: ILanguage = initialState,
+  action: ILanguageAction
+) => {};

src/types/api.types.ts

@@ -0,0 +1,4 @@
+export interface IurlParamAdder {
+  name: string;
+  value: string | number;
+}

src/types/data.types.ts

@@ -0,0 +1,61 @@
+// CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES
+export interface ICategoriesData {
+  data: Datum[];
+  links: Links;
+  meta: Meta;
+}
+
+export interface Datum {
+  id: number;
+  name: string;
+}
+
+export interface Links {
+  first: string;
+  last: string;
+  prev: null;
+  next: null;
+}
+
+export interface Meta {
+  current_page: number;
+  from: number;
+  last_page: number;
+  path: string;
+  per_page: number;
+  to: number;
+  total: number;
+}
+// CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES CATEGORIES
+
+// ===============================================================================================================================
+
+// POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS
+
+export interface IPostsData {
+  id: number;
+  title: string;
+  slug: string;
+  excerpt: string;
+  published_at: string;
+  featured_images: FeaturedImage[];
+  content_html: string;
+  categories: Category[];
+  powerseo_title: null | string;
+  powerseo_description: null | string;
+  powerseo_keywords: null | string;
+}
+
+export interface Category {
+  id: number;
+  name: string;
+}
+
+export interface FeaturedImage {
+  id: number;
+  disk_name: string;
+  file_name: string;
+  path: string;
+  extension: string;
+}
+// POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS POSTS

src/types/store.types.ts

@@ -1,6 +1,3 @@
-// Store
-// import { functionalityStore } from "../store/functionality";
-
 // Reducers
 import { allReducers } from "../store/functionality";
 
@@ -21,4 +18,6 @@ export interface ILanguageAction {
   payload: "RU" | "EN" | "TM";
 }
 
+// ALL TYPES BEFORE THIS LINE ==================
+
 export type RootState = ReturnType<typeof allReducers>;

src/url.ts

@@ -0,0 +1 @@
+export const url: string = "http://95.85.126.122/api/v1";