From e6b20fdaa4ab2dc498ca7ae6b7e697f48922f854 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Tue, 21 Feb 2023 13:05:56 +0500 Subject: [PATCH] search --- src/actions/setData.ts | 9 +++++++++ src/components/header/Search.tsx | 4 ++++ src/pages/SearchResult.tsx | 24 ++++++++++++++++------- src/reducers/dataReducer.ts | 10 ++++++---- src/styles/_news-article.scss | 33 +++++++++++++++++++++++++++++++- src/types/store.types.ts | 8 ++++++++ 6 files changed, 76 insertions(+), 12 deletions(-) diff --git a/src/actions/setData.ts b/src/actions/setData.ts index 21a307c..549474f 100644 --- a/src/actions/setData.ts +++ b/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 => ({ diff --git a/src/components/header/Search.tsx b/src/components/header/Search.tsx index c9187e2..198a3d2 100644 --- a/src/components/header/Search.tsx +++ b/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 ( ) => { event.preventDefault(); diff --git a/src/pages/SearchResult.tsx b/src/pages/SearchResult.tsx index a36fb04..72eb214 100644 --- a/src/pages/SearchResult.tsx +++ b/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([ { - 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(language); // redux const data = useSelector( @@ -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 (
@@ -52,7 +62,7 @@ const SearchResult = () => {

Результаты по поиску "{word}"

- +
diff --git a/src/reducers/dataReducer.ts b/src/reducers/dataReducer.ts index f162073..266cbcf 100644 --- a/src/reducers/dataReducer.ts +++ b/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; diff --git a/src/styles/_news-article.scss b/src/styles/_news-article.scss index c103124..7610c0e 100644 --- a/src/styles/_news-article.scss +++ b/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; + // } } diff --git a/src/types/store.types.ts b/src/types/store.types.ts index 85f7ad2..24561c3 100644 --- a/src/types/store.types.ts +++ b/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;