Add files via upload

src/hooks/App/useCurrentSkipLinkId.jsx

@@ -0,0 +1,19 @@
+import { useLocation } from "react-router-dom";
+import { PAGE_SECTIONS_ID } from "src/Data/pagesData";
+
+const useCurrentSkipLinkId = () => {
+  const { pathname } = useLocation();
+
+  function findSectionLinkIdByPath() {
+    return PAGE_SECTIONS_ID.find(
+      (sectionData) => sectionData.pagePath === pathname
+    )?.sectionId;
+  }
+
+  const sectionId = findSectionLinkIdByPath();
+  const defaultSectionId =
+    PAGE_SECTIONS_ID[PAGE_SECTIONS_ID.length - 1].sectionId;
+
+  return sectionId || defaultSectionId;
+};
+export default useCurrentSkipLinkId;

src/hooks/App/useNavToolsProps.jsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { useLocation } from "react-router-dom";
+
+const useNavToolsProps = () => {
+  const [navToolsProps, setNavToolsProps] = useState({});
+  const {
+    loginInfo: { isSignIn },
+  } = useSelector((state) => state.user);
+  const location = useLocation();
+  const path = location.pathname;
+  const navProps = {
+    signIn: {
+      showHeart: true,
+      showCart: true,
+      showUser: true,
+    },
+    notSignIn: {
+      showHeart: false,
+      showCart: false,
+      showUser: false,
+    },
+    signUpPage: {
+      showHeart: false,
+      showCart: false,
+      showUser: false,
+    },
+  };
+
+  const setSelectedNavProps = () => {
+    let selectedNavProps = navProps.default;
+
+    if (!isSignIn) {
+      selectedNavProps = navProps.notSignIn;
+    } else if (path === "/signup" || path === "/login") {
+      selectedNavProps = navProps.signUpPage;
+    } else if (isSignIn) {
+      selectedNavProps = navProps.signIn;
+    }
+
+    setNavToolsProps(selectedNavProps);
+  };
+
+  useEffect(() => {
+    setSelectedNavProps();
+  }, [isSignIn, path]);
+
+  return navToolsProps;
+};
+
+export default useNavToolsProps;

src/hooks/App/useScrollOnMount.jsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+const useScrollOnMount = (scrollY = 0) => {
+  const scrollBehavior = "instant";
+
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: scrollBehavior });
+    window.scrollTo({ top: scrollY, behavior: scrollBehavior });
+  }, []);
+};
+export default useScrollOnMount;

src/hooks/App/useSignOut.jsx

@@ -0,0 +1,38 @@
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { showAlert } from "src/Features/alertsSlice";
+import { setEmptyArrays } from "src/Features/productsSlice";
+import { signOut } from "src/Features/userSlice";
+
+const useSignOut = () => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const arraysToEmpty = [
+    "favoritesProducts",
+    "searchProducts",
+    "orderProducts",
+    "cartProducts",
+    "wishList",
+  ];
+
+  const handleSignOut = () => {
+    const emptyArraysAction = setEmptyArrays({ keys: arraysToEmpty });
+
+    dispatch(emptyArraysAction);
+    dispatch(signOut());
+
+    setTimeout(() => {
+      dispatch(
+        showAlert({
+          alertText: t("toastAlert.signOutSuccess"),
+          alertState: "warning",
+          alertType: "alert",
+        })
+      );
+    }, 500);
+  };
+
+  return handleSignOut;
+};
+
+export default useSignOut;

src/hooks/App/useSlider.jsx

@@ -0,0 +1,42 @@
+import { useRef } from "react";
+import { getScrollSliderValue } from "src/Functions/componentsFunctions";
+import { buttonEffect } from "src/Functions/effects";
+
+const useSlider = (sliderRef) => {
+  const isSliderClicked = useRef(false);
+
+  function handlePrevBtn(e) {
+    const isFirstSlide = sliderRef.current.scrollLeft === 0;
+    if (isFirstSlide) return;
+
+    buttonEffect(e);
+
+    if (!isSliderClicked.current) isSliderClicked.current = true;
+    else return;
+    setTimeout(() => (isSliderClicked.current = false), 500);
+
+    sliderRef.current.scrollLeft -= getScrollSliderValue(sliderRef.current);
+  }
+
+  function handleNextBtn(e) {
+    if (isLastSlide(sliderRef)) return;
+
+    buttonEffect(e);
+
+    if (!isSliderClicked.current) isSliderClicked.current = true;
+    else return;
+    setTimeout(() => (isSliderClicked.current = false), 500);
+
+    sliderRef.current.scrollLeft += getScrollSliderValue(sliderRef.current);
+  }
+
+  return { isSliderClicked, handleNextBtn, handlePrevBtn };
+};
+export default useSlider;
+
+export function isLastSlide(sliderRef) {
+  const sliderEle = sliderRef.current;
+  return (
+    sliderEle.scrollWidth - sliderEle.clientWidth - sliderEle.scrollLeft < 2
+  );
+}

src/hooks/App/useStoreWebsiteDataToLocalStorage.jsx

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { setItemToLocalStorage } from "../Helper/useLocalStorage";
+
+const useStoreWebsiteDataToLocalStorage = () => {
+  const userData = useSelector((state) => state.user);
+  const productsData = useSelector((state) => state.products);
+  const localStorageData = useSelector((state) => state.localStorage);
+
+  useEffect(() => {
+    setItemToLocalStorage("productsSliceData", productsData);
+    setItemToLocalStorage("userSliceData", userData);
+    setItemToLocalStorage("storageSliceData", localStorageData);
+  }, [userData, productsData, localStorageData]);
+};
+export default useStoreWebsiteDataToLocalStorage;

src/hooks/App/useTimerDown.jsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  getFormattedTime,
+  getTimeInMilliseconds,
+  getTimeObj,
+} from "src/Functions/helper";
+import useLocalStorage from "../Helper/useLocalStorage";
+
+/* Props Example
+  timeEvent="3 24 60 60" Days-Hours-Minutes-Seconds
+  eventName="timerName" localStorage key name
+*/
+
+const useTimerDown = (
+  downTime,
+  { timeResetRequired, stopTimer, timerName, formattedTime }
+) => {
+  if (!timerName) throw new Error("Timer name is invalid");
+  if (timeResetRequired) localStorage.removeItem(timerName);
+
+  const times = downTime.split(" ");
+  const timeLocal = useLocalStorage(timerName);
+  const timeOrTimeLocal = timeLocal
+    ? timeLocal
+    : getTimeInMilliseconds(...times);
+  const [time, setTime] = useState(timeOrTimeLocal);
+  const [timeData, setTimeData] = useState(getTimeObj(timeOrTimeLocal));
+  const [isTimerDone, setIsTimerDone] = useState(false);
+  const isMounted = useRef(false);
+  let timerId;
+
+  function useEffectTimeUpdater() {
+    if (time <= -1000) {
+      setIsTimerDone(true);
+      return;
+    }
+
+    timerId = setTimeout(() => {
+      setTime(time - 1000);
+
+      if (formattedTime) {
+        setTimeData(getFormattedTime(getTimeObj(time)));
+        useLocalStorage(timerName, time);
+        return;
+      }
+
+      setTimeData(getTimeObj(time));
+      useLocalStorage(timerName, time);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timerId);
+    };
+  }
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+
+      if (formattedTime) {
+        setTimeData(getFormattedTime(getTimeObj(time)));
+        useLocalStorage(timerName, time);
+        useEffectTimeUpdater();
+        return;
+      }
+    }
+
+    if (stopTimer) return;
+
+    useEffectTimeUpdater();
+  }, [time]);
+
+  return { timeData, isTimerDone };
+};
+
+export default useTimerDown;

src/hooks/App/useUpdateLoadingOnSamePage.jsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+import { useDispatch } from "react-redux";
+import { getRandomItem } from "src/Functions/helper";
+
+const useUpdateLoadingOnSamePage = ({
+  loadingState,
+  loadingKey,
+  cleanFunction,
+  delays,
+  dependencies = [],
+  actionMethod,
+}) => {
+  const dispatch = useDispatch();
+  const timerId = useRef(null);
+  let randomDelay = getRandomItem(delays);
+
+  function updateLoadingState() {
+    dispatch(actionMethod({ key: loadingKey, value: true }));
+
+    timerId.current = setTimeout(() => {
+      dispatch(actionMethod({ key: loadingKey, value: false }));
+    }, randomDelay);
+
+    randomDelay = getRandomItem(delays);
+  }
+
+  function useEffectFunction() {
+    updateLoadingState();
+
+    return () => {
+      clearTimeout(timerId.current);
+      if (cleanFunction) cleanFunction();
+    };
+  }
+
+  useEffect(useEffectFunction, dependencies);
+};
+export default useUpdateLoadingOnSamePage;

src/hooks/App/useUpdateLoadingState.jsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+import { useDispatch } from "react-redux";
+import { getRandomItem } from "src/Functions/helper";
+
+const useUpdateLoadingState = ({
+  loadingState,
+  loadingKey,
+  cleanFunction,
+  delays,
+  dependencies = [],
+  actionMethod,
+}) => {
+  const dispatch = useDispatch();
+  const timerId = useRef(null);
+  let randomDelay = getRandomItem(delays);
+
+  function updateLoadingState() {
+    if (!loadingState) return;
+
+    timerId.current = setTimeout(() => {
+      dispatch(actionMethod({ key: loadingKey, value: false }));
+    }, randomDelay);
+
+    randomDelay = getRandomItem(delays);
+  }
+
+  function useEffectFunction() {
+    updateLoadingState();
+
+    return () => {
+      clearTimeout(timerId.current);
+      if (cleanFunction) cleanFunction();
+    };
+  }
+
+  useEffect(useEffectFunction, dependencies);
+};
+export default useUpdateLoadingState;

src/hooks/Helper/useAsync.jsx

@@ -0,0 +1,32 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+const useAsync = (api, options = {}, dependencies = []) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [isDone, setIsDone] = useState(false);
+  const [data, setData] = useState(null);
+
+  async function fetchData() {
+    setIsDone(false);
+    try {
+      setIsLoading(true);
+      const res = await axios(api, options);
+      setData(res.data);
+    } catch (err) {
+      setIsError(true);
+      throw new Error(err);
+    } finally {
+      setIsLoading(false);
+      setIsDone(true);
+    }
+  }
+
+  useEffect(() => {
+    fetchData();
+  }, dependencies);
+
+  return [data, isError, isLoading, isDone];
+};
+
+export default useAsync;

src/hooks/Helper/useChangeLangDirOnKeys.jsx

@@ -0,0 +1,19 @@
+import i18n from "i18next";
+import useFunctionOnKey from "./useFunctionOnKey";
+
+const DELAY = 0;
+
+const useChangeLangDirOnKeys = () => {
+  function changeLang(lang) {
+    i18n.changeLanguage(lang);
+  }
+
+  useFunctionOnKey(() => changeLang("en"), ["KeyE"], DELAY);
+  useFunctionOnKey(() => changeLang("ar"), ["KeyA"], DELAY);
+  useFunctionOnKey(() => changeLang("ru"), ["KeyR"], DELAY);
+  useFunctionOnKey(() => changeLang("fr"), ["KeyF"], DELAY);
+  useFunctionOnKey(() => changeLang("ja"), ["KeyJ"], DELAY);
+  useFunctionOnKey(() => changeLang("hu"), ["KeyH"], DELAY);
+  useFunctionOnKey(() => changeLang("hi"), ["KeyI"], DELAY);
+};
+export default useChangeLangDirOnKeys;