Fix merge conflict

fadihanna123 · Sep 20, 2024 · a78bb57 · a78bb57
2 parents c2e98c9 + 63ccdb8
commit a78bb57
Show file tree

Hide file tree

Showing 40 changed files with 572 additions and 430 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1 @@
-node_modules/
+node_modules/*
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pixabayfinder",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "types": "src/types/global.d.ts",
   "private": "true",
   "license": "MIT",
@@ -27,20 +27,20 @@
     "@reduxjs/toolkit": "^2.2.7",
     "@testing-library/jest-dom": "^6.5.0",
     "@types/eslint": "^9.6.1",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.3.5",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^18.3.7",
     "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.33",
-    "@typescript-eslint/eslint-plugin": "8.3.0",
-    "@typescript-eslint/parser": "^8.2.0",
+    "@typescript-eslint/eslint-plugin": "8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
     "@vitejs/plugin-react": "^4.3.1",
     "axios": "1.7.7",
-    "eslint": "9.9.1",
+    "eslint": "9.10.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-html": "^8.1.1",
     "eslint-plugin-prettier": "^5.2.1",
     "fs": "^0.0.1-security",
-    "husky": "^9.1.5",
+    "husky": "^9.1.6",
     "jest": "^29.7.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
@@ -50,21 +50,21 @@
     "react-toastify": "^10.0.5",
     "redux": "^5.0.1",
     "sal.js": "^0.8.5",
-    "styled-components": "^6.1.12",
+    "styled-components": "^6.1.13",
     "stylelint": "^16.9.0",
     "stylelint-config-standard": "^36.0.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.3"
+    "typescript": "4.7.4",
+    "vite": "^5.4.6"
   },
   "scripts": {
     "build": "vite build",
     "dev": "vite",
     "prebuild": "rm -rf dist",
     "preview": "vite preview",
     "test": "jest --watchAll",
-    "lint": "eslint .",
+    "lint": "eslint . && stylelint **/*.css",
     "format": "prettier -w .",
     "eject": "vite eject",
     "setup": "yarn --silent --ignore-scripts",
@@ -92,12 +92,12 @@
   },
   "devDependencies": {
     "@eslint/compat": "^1.1.1",
-    "@eslint/js": "^9.9.1",
+    "@eslint/js": "^9.10.0",
     "@testing-library/react": "^16.0.1",
-    "@types/node": "^22.5.3",
-    "eslint-plugin-react": "^7.35.2",
+    "@types/node": "^22.5.5",
+    "eslint-plugin-react": "^7.36.1",
     "react-test-renderer": "^18.3.1",
-    "typescript-eslint": "^8.4.0",
+    "typescript-eslint": "^8.6.0",
     "vite-plugin-environment": "^1.1.3"
   }
 }
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -1,2 +1 @@
 export * from './apiDocs';
-export * from './request';
diff --git a/src/api/request.ts b/src/api/request.ts
diff --git a/src/app/Layout.tsx b/src/app/Layout.tsx
@@ -2,17 +2,18 @@ import { List, SearchFormComp } from '../containers';
 import React from 'react';
 import { Flip, ToastContainer } from 'react-toastify';
 import { Container } from '../styles';
-import { MainFooter } from '../ui';
+import Header from '../inc/Header';
+import Footer from '../inc/Footer';
 
 const Layout: React.FC = () => {
   return (
     <Container>
+      <Header />
+      <br />
       <h1>PixaBay Finder</h1>
       <SearchFormComp />
       <List />
-      <MainFooter dataSal='fade'>
-        <i>Created by Fadi Hanna</i>
-      </MainFooter>
+      <Footer />
       <ToastContainer transition={Flip} />
     </Container>
   );

diff --git a/src/containers/App.tsx b/src/containers/App.tsx
@@ -1,67 +1,52 @@
 import React, { useEffect } from 'react';
-import { Flip, toast } from 'react-toastify';
-import { setImgList } from '../redux/reducers/imgList';
-import { setLoading } from '../redux/reducers/loading';
-import { setVideoList } from '../redux/reducers/videoList';
-import sal from 'sal.js';
-import { PacmanLoader } from 'react-spinners';
-import { setMediaLoading } from '../redux/reducers';
-import { PixabayKey } from '../utils';
-import { getImages, getVideos, log } from '../functions';
+import { toast } from 'react-toastify';
+import { PixabayBaseURL, PixabayKey } from '../utils';
 
 // Components
 import { Layout } from '../app';
+import axios from 'axios';
+import useLog from '../hooks/useLog';
+import { setImgList, setVideoList } from '../redux';
 import useReduxConsts from '../hooks/useReduxConsts';
+import useAPI from '../hooks/useAPI';
+import { sessionStorageKeys } from '../utils/consts';
+import { setLang } from '../redux/reducers/lang';
 
 const App = () => {
-  const { searchForm, loading, dispatch } = useReduxConsts();
+  const globalHeader: string = 'application/json';
+
+  axios.defaults.baseURL = PixabayBaseURL;
+  axios.defaults.headers.common['Content-Type'] = globalHeader;
+
+  const { dispatch, searchForm } = useReduxConsts();
+  const imagesEndPoint: string = `?key=${PixabayKey}&q=${searchForm.query}`;
+  const videosEndPoint: string = `videos/?key=${PixabayKey}&q=${searchForm.query}`;
+  const { data: imgData } = useAPI(imagesEndPoint, 'get', searchForm);
+  const { data: videoData } = useAPI(videosEndPoint, 'get', searchForm);
 
   if (!PixabayKey) {
     toast.error('Missing apiKey? Add it and restart the app!');
-    log('Missing apiKey? Add it and restart the app!', 'error');
+    useLog('Missing apiKey? Add it and restart the app!', 'error');
   }
 
   useEffect(() => {
-    let mounted = true;
-    sal();
-
-    dispatch(setLoading(true));
-    dispatch(setMediaLoading(true));
+    const lang = sessionStorage.getItem(sessionStorageKeys.Lang);
 
-    getImages<string>(searchForm.query)
-      .then((imagesData) => {
-        if (mounted) {
-          dispatch(setImgList(imagesData));
-        }
-        dispatch(setMediaLoading(false));
-      })
-      .catch((err) => toast.error(err.message, { transition: Flip }));
+    if (lang === '') {
+      dispatch(setLang('en'));
+    }
 
-    getVideos<string>(searchForm.query)
-      .then((videosData) => {
-        if (mounted) {
-          dispatch(setVideoList(videosData));
-          dispatch(setMediaLoading(false));
-        }
-      })
-      .catch((err) => toast.error(err.message, { transition: Flip }));
+    if (lang === null || undefined) {
+      sessionStorage.setItem(sessionStorageKeys.Lang, 'en');
+    }
 
-    dispatch(setLoading(false));
+    dispatch(setLang(lang!));
+  }, []);
 
-    return () => {
-      mounted = false;
-    };
-  }, [searchForm]);
-
-  if (loading) {
-    return (
-      <PacmanLoader
-        cssOverride={{ margin: '0 auto' }}
-        loading={loading}
-        color='#36d7b7'
-      />
-    );
-  }
+  useEffect(() => {
+    dispatch(setImgList(imgData!));
+    dispatch(setVideoList(videoData!));
+  }, [imgData]);
 
   return <Layout />;
 };

diff --git a/src/containers/List.tsx b/src/containers/List.tsx
@@ -5,9 +5,10 @@ import PhotoItem from './PhotoItem';
 import Loader from '../ui/Loader';
 import { ImageRow, NoData, VideoItem, VideoRow } from '../styles';
 import useReduxConsts from '../hooks/useReduxConsts';
+import useTranslate from '../hooks/useTranslate';
 
 const List: React.FC = () => {
-  const { imgList, mediaLoading, searchForm, searchType, videoList } =
+  const { mediaLoading, searchForm, searchType, imgList, videoList, lang } =
     useReduxConsts();
 
   if (mediaLoading) {
@@ -22,7 +23,8 @@ const List: React.FC = () => {
         ''
       ) : (
         <>
-          <b>Results found:</b> {imgList?.hits.length}
+          <b>{useTranslate('RESULTS_FOUND_TXT', lang)}:</b>{' '}
+          {imgList?.hits.length}
         </>
       )}
       <ImageRow>
@@ -33,7 +35,7 @@ const List: React.FC = () => {
                 return <PhotoItem key={i} item={image} />;
               })
             ) : (
-              <NoData>No images found! 😔</NoData>
+              <NoData>{useTranslate('NO_PHOTOS_FOUND_TXT', lang)}! 😔</NoData>
             )
           ) : (
             ''
@@ -44,12 +46,12 @@ const List: React.FC = () => {
           (searchForm.query ? (
             videoList && videoList.totalHits ? (
               !mediaLoading ? (
-                videoList?.hits.map((video: any, i: number) => {
+                videoList?.hits.map((video: HitsOfList, i: number) => {
                   return (
                     <VideoItem
                       key={i}
                       controls
-                      src={video.videos.small.url}
+                      src={video.videos?.small.url}
                       autoPlay={true}
                       muted={true}
                     ></VideoItem>
@@ -59,7 +61,7 @@ const List: React.FC = () => {
                 <Loader className={['spinner']} />
               )
             ) : (
-              <NoData>No videos found! 😔</NoData>
+              <NoData>{useTranslate('NO_VIDEOS_FOUND_TXT', lang)}! 😔</NoData>
             )
           ) : (
             ''

diff --git a/src/containers/PhotoItem.tsx b/src/containers/PhotoItem.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect } from 'react';
-import { Dispatch } from 'redux';
 import { setImage } from '../redux/reducers/image';
 import { setToggler } from '../redux/reducers/toggler';
 import sal from 'sal.js';
 import { Loader } from '../ui';
-import { ImageCol, Modal, ModalContent } from '../styles';
+import { ImageCol, Modal, ModalContent, ImgItem, ModalImg } from '../styles';
 import { setMediaLoading } from '../redux/reducers';
 import useReduxConsts from '../hooks/useReduxConsts';
 
@@ -21,10 +20,8 @@ const PhotoItem: React.FC<{
    * @param { Dispatch<any> } dispatch
    * @returns { object }
    */
-  const hideImagePreviewer = (
-    toggler: boolean,
-    dispatch: Dispatch<any>
-  ): object => dispatch(setToggler(!toggler));
+  const hideImagePreviewer = (toggler: boolean, dispatch: any): object =>
+    dispatch(setToggler(!toggler));
 
   /**
    * Hide image previewer.
@@ -33,10 +30,7 @@ const PhotoItem: React.FC<{
    * @param { Dispatch<any> } dispatch
    * @returns { void }
    */
-  const toggleImagePreviewer = (
-    item: HitsOfList,
-    dispatch: Dispatch<any>
-  ): void => {
+  const toggleImagePreviewer = (item: HitsOfList, dispatch: any): void => {
     dispatch(setToggler(true));
     dispatch(setImage(item.webformatURL));
   };
@@ -52,22 +46,20 @@ const PhotoItem: React.FC<{
   return (
     <ImageCol data-sal='zoom-in'>
       {item?.webformatURL && (
-        <img
+        <ImgItem
           aria-label={searchForm.query}
           src={item.webformatURL}
           alt={searchForm.query}
           onClick={() => toggleImagePreviewer(item, dispatch)}
           width='500'
           height='500'
           style={{
-            maxWidth: '100%',
-            height: '100%',
+            aspectRatio: '1 / 1',
             display: mediaLoading ? 'none' : 'block',
           }}
           onLoad={() => dispatch(setMediaLoading(false))}
         />
       )}
-
       {toggler && (
         <Modal
           className='modal'
@@ -76,13 +68,7 @@ const PhotoItem: React.FC<{
         >
           <ModalContent>
             {image && (
-              <img
-                width='500'
-                height='500'
-                style={{ maxWidth: '100%', height: '100%' }}
-                alt='preview'
-                src={image}
-              />
+              <ModalImg width='500' height='500' alt='preview' src={image} />
             )}
           </ModalContent>
         </Modal>
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from './apiDocs';
		export * from './request';