search

src/actions/setData.ts

@@ -4,6 +4,8 @@ import {
   INewsScrollAction,
   IPostData,
   IPostDataAction,
+  ISearchResult,
+  ISearchResultAction,
 } from "../types/store.types";
 
 // NewsScroll
@@ -15,6 +17,13 @@ export const setNewsScroll = (
   payload: data,
 });
 
+export const setSearchResult = (
+  data: ISearchResult["data"]
+): ISearchResultAction => ({
+  type: "SET_SEARCH_DATA",
+  payload: data,
+});
+
 // Post
 
 export const setPost = (data: IPostData["data"]): IPostDataAction => ({

src/components/header/Search.tsx

@@ -3,6 +3,7 @@ import { Dispatch, SetStateAction } from "react";
 import { motion } from "framer-motion";
 import { useSelector, useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import { useRef } from "react";
 
 // Animations
 import {
@@ -35,8 +36,11 @@ const Search = ({ isSmall, isInputFocused, setIsInputFocused }: IProps) => {
 
   const navigate = useNavigate();
 
+  const formRef = useRef(null);
+
   return (
     <motion.form
+      ref={formRef}
       className="search"
       onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();

src/pages/SearchResult.tsx

@@ -3,22 +3,25 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Api } from "../api/Api";
 import { useSelector, useDispatch } from "react-redux";
-import { IPostData, RootState } from "../types/store.types";
+import { RootState } from "../types/store.types";
 
 // Icons
 import { ReactComponent as LoopBlack } from "../assets/icons/loop-black.svg";
 import { IurlParamAdder } from "../types/api.types";
-import { setNewsScroll } from "../actions/setData";
+import { setSearchResult } from "../actions/setData";
 
 // Components
 import CustomNewsScroll from "../components/global/CustomNewsScroll";
 import { IPostsData } from "../types/data.types";
 
+// Api
+import { url } from "../url";
+
 const SearchResult = () => {
   const { word } = useParams();
   const [params, setParams] = useState<IurlParamAdder[]>([
     {
-      name: "s",
+      name: "search",
       value: word || "",
     },
     {
@@ -30,9 +33,9 @@ const SearchResult = () => {
       value: 1,
     },
   ]);
-  const api = new Api("/post", params);
+  const api = new Api(url + "/posts", params);
   const language = api.language;
-  const [lastLanguage, setLastLanguage] = useState(language);
+  const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
 
   // redux
   const data = useSelector<RootState, RootState["searchData"]["data"]>(
@@ -41,8 +44,15 @@ const SearchResult = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    api.get(data, (data: IPostsData[]) => dispatch(setNewsScroll(data)));
+    api.get(data, (data: IPostsData[]) => dispatch(setSearchResult(data)));
   }, [params]);
+
+  useEffect(() => {
+    if (!(language === lastLanguage)) {
+      api.get(data, (data: IPostsData[]) => dispatch(setSearchResult(data)));
+    }
+  }, [language, lastLanguage]);
+
   return (
     <main className="sresult">
       <div className="container">
@@ -52,7 +62,7 @@ const SearchResult = () => {
             <h1>Результаты по поиску "{word}"</h1>
           </div>
           <div className="sresult-content">
-            <CustomNewsScroll data={data as any} word={word} />
+            <CustomNewsScroll data={data} word={word} />
           </div>
         </div>
       </div>

src/reducers/dataReducer.ts

@@ -4,6 +4,8 @@ import {
   INewsScrollAction,
   IPostData,
   IPostDataAction,
+  ISearchResult,
+  ISearchResultAction,
 } from "../types/store.types";
 
 // NewsScroll
@@ -129,12 +131,12 @@ export const postReducer = (
 };
 
 export const searchDataReducer = (
-  state: IPostData = postInitialState,
-  action: IPostDataAction
+  state: ISearchResult = newsScrollInitialState,
+  action: ISearchResultAction
 ) => {
   switch (action.type) {
-    case "SET_POST": {
-      return { ...state, data: action.payload };
+    case "SET_SEARCH_DATA": {
+      return { data: action.payload };
     }
     default: {
       return state;

src/styles/_news-article.scss

@@ -29,6 +29,11 @@
   display: flex;
   gap: 2.4rem;
   align-items: center;
+  a {
+    &:nth-child(n + 5) {
+      display: none;
+    }
+  }
 }
 
 .news-article-category {
@@ -55,7 +60,8 @@
 
 .news-article-image {
   min-height: 30rem;
-  img {
+  img,
+  span {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -97,6 +103,10 @@
 }
 
 @media (max-width: 750px) {
+  .news-article-image {
+    min-height: unset;
+    height: 25rem;
+  }
   .news-article-text {
     gap: 0.8rem;
   }
@@ -107,9 +117,19 @@
   .news-article-content {
     margin-bottom: 5.6rem;
   }
+  .news-article-left {
+    a {
+      &:nth-child(n + 4) {
+        display: none;
+      }
+    }
+  }
 }
 
 @media (max-width: 500px) {
+  .news-article-image {
+    height: 20rem;
+  }
   .news-article-category {
     font-size: 1.6rem;
   }
@@ -125,4 +145,15 @@
   .news-article-content {
     gap: 1.6rem;
   }
+
+  .news-article-status {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    gap: 1.6rem;
+  }
+
+  // .news-article-left {
+  //   flex-wrap: wrap;
+  //   row-gap: 0.8rem;
+  // }
 }

src/types/store.types.ts

@@ -56,6 +56,14 @@ export interface ISearchDataAction {
   payload: ISearchData["value"];
 }
 
+export interface ISearchResult {
+  data: IPostsData[];
+}
+export interface ISearchResultAction {
+  type: "SET_SEARCH_DATA";
+  payload: ISearchResult["data"];
+}
+
 // ALL TYPES BEFORE THIS LINE ==================
 
 export type RootState = ReturnType<typeof allReducers>;