diff --git a/src/App.tsx b/src/App.tsx
index 7d421bc..c3b5dec 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,6 +15,7 @@ import "./styles/style.scss";
import Main from "./pages/Main";
import NewsArticle from "./pages/NewsArticle";
import Category from "./pages/Category";
+import SearchResult from "./pages/SearchResult";
// Components
import Header from "./components/header/Header";
@@ -31,6 +32,7 @@ const App = () => {
} />
} />
} />
+ } />
diff --git a/src/assets/icons/loop-black.svg b/src/assets/icons/loop-black.svg
new file mode 100644
index 0000000..5245e5b
--- /dev/null
+++ b/src/assets/icons/loop-black.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/global/CustomNewsScroll.tsx b/src/components/global/CustomNewsScroll.tsx
new file mode 100644
index 0000000..a72197c
--- /dev/null
+++ b/src/components/global/CustomNewsScroll.tsx
@@ -0,0 +1,52 @@
+// Modules
+import { v4 as uuidv4 } from "uuid";
+
+// Components
+import News from "../news/News";
+import Loader from "./Loader";
+
+// Types
+import { IPostsData } from "../../types/data.types";
+
+interface IProps {
+ data: IPostsData[];
+ word: string | undefined;
+}
+
+const CustomNewsScroll = ({ data, word }: IProps) => {
+ return (
+
+
+
+ {data.length > 0 ? (
+ data[0].id > -1 ? (
+ data.map((dataEl) => {
+ return (
+
+ );
+ })
+ ) : (
+
+ )
+ ) : (
+
Нет новостей для "{word || ""}"
+ )}
+
+
+
+ );
+};
+
+export default CustomNewsScroll;
diff --git a/src/components/header/Search.tsx b/src/components/header/Search.tsx
index 05bc433..c9187e2 100644
--- a/src/components/header/Search.tsx
+++ b/src/components/header/Search.tsx
@@ -2,6 +2,7 @@
import { Dispatch, SetStateAction } from "react";
import { motion } from "framer-motion";
import { useSelector, useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
// Animations
import {
@@ -32,12 +33,15 @@ const Search = ({ isSmall, isInputFocused, setIsInputFocused }: IProps) => {
(state) => state.search.value
);
+ const navigate = useNavigate();
+
return (
) =>
- event.preventDefault()
- }
+ onSubmit={(event: React.FormEvent) => {
+ event.preventDefault();
+ navigate(`/search/${inputValue}`);
+ }}
variants={searchMobileMotion}
initial={isSmall ? "borderRest" : {}}
animate={isSmall ? (isInputFocused ? "borderActive" : "borderRest") : {}}
@@ -53,6 +57,7 @@ const Search = ({ isSmall, isInputFocused, setIsInputFocused }: IProps) => {
}}
onBlur={() => {
setIsInputFocused(false);
+ onInputChange("");
}}
/>
{
+ const { word } = useParams();
+ const [params, setParams] = useState([
+ {
+ name: "s",
+ value: word || "",
+ },
+ {
+ name: "count",
+ value: 10,
+ },
+ {
+ name: "page",
+ value: 1,
+ },
+ ]);
+ const api = new Api("/post", params);
+ const language = api.language;
+ const [lastLanguage, setLastLanguage] = useState(language);
+
+ // redux
+ const data = useSelector(
+ (state) => state.searchData.data
+ );
+ const dispatch = useDispatch();
+
+ useEffect(() => {
+ api.get(data, (data: IPostsData[]) => dispatch(setNewsScroll(data)));
+ }, [params]);
+ return (
+
+
+
+
+
+
Результаты по поиску "{word}"
+
+
+
+
+
+
+
+ );
+};
+
+export default SearchResult;
diff --git a/src/reducers/dataReducer.ts b/src/reducers/dataReducer.ts
index f1acf78..f162073 100644
--- a/src/reducers/dataReducer.ts
+++ b/src/reducers/dataReducer.ts
@@ -127,3 +127,17 @@ export const postReducer = (
}
}
};
+
+export const searchDataReducer = (
+ state: IPostData = postInitialState,
+ action: IPostDataAction
+) => {
+ switch (action.type) {
+ case "SET_POST": {
+ return { ...state, data: action.payload };
+ }
+ default: {
+ return state;
+ }
+ }
+};
diff --git a/src/store/functionality.ts b/src/store/functionality.ts
index 9282aa1..7e64220 100644
--- a/src/store/functionality.ts
+++ b/src/store/functionality.ts
@@ -4,7 +4,11 @@ import { combineReducers, configureStore } from "@reduxjs/toolkit";
// Reducers
import { activeLinkReducer } from "../reducers/activeLink.reducer";
import { languageReducer } from "../reducers/language.reducer";
-import { newsScrollReducer, postReducer } from "../reducers/dataReducer";
+import {
+ newsScrollReducer,
+ postReducer,
+ searchDataReducer,
+} from "../reducers/dataReducer";
import { searchReducer } from "../reducers/searchReducer";
export const allReducers = combineReducers({
@@ -13,6 +17,7 @@ export const allReducers = combineReducers({
newsScroll: newsScrollReducer,
post: postReducer,
search: searchReducer,
+ searchData: searchDataReducer,
});
export const functionalityStore = configureStore({
diff --git a/src/styles/_category.scss b/src/styles/_category.scss
index a03a080..8ff4e78 100644
--- a/src/styles/_category.scss
+++ b/src/styles/_category.scss
@@ -57,6 +57,7 @@
span {
width: fit-content;
+ white-space: nowrap;
}
}
}
diff --git a/src/styles/_search-result.scss b/src/styles/_search-result.scss
new file mode 100644
index 0000000..14b1115
--- /dev/null
+++ b/src/styles/_search-result.scss
@@ -0,0 +1,16 @@
+.sresult-inner {
+ display: flex;
+ flex-direction: column;
+ gap: 5.6rem;
+ padding: 5.6rem 0;
+}
+
+.sresult-title {
+ display: flex;
+ align-items: center;
+ gap: 2.4rem;
+
+ h1 {
+ font-size: 2.4rem;
+ }
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index b83dbf4..fc8e8a8 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -14,3 +14,4 @@
@import "./category";
@import "./calendar";
@import "./loader";
+@import "./search-result";