diff --git a/src/actions/setSearch.ts b/src/actions/setSearch.ts new file mode 100644 index 0000000..e9fa4c3 --- /dev/null +++ b/src/actions/setSearch.ts @@ -0,0 +1,7 @@ +// Types +import { ISearchData, ISearchDataAction } from "../types/store.types"; + +export const setSearch = (value: ISearchData["value"]): ISearchDataAction => ({ + type: "SET_SEARCH", + payload: value, +}); diff --git a/src/components/header/Search.tsx b/src/components/header/Search.tsx index 16496ee..a218eab 100644 --- a/src/components/header/Search.tsx +++ b/src/components/header/Search.tsx @@ -1,6 +1,6 @@ // Modules -import { useState } from "react"; import { motion } from "framer-motion"; +import { useSelector, useDispatch } from "react-redux"; // Animations import { searchMotion } from "../../animations/search.animation"; @@ -8,8 +8,22 @@ import { searchMotion } from "../../animations/search.animation"; // Icons import { ReactComponent as Loop } from "../../assets/icons/loop.svg"; +// Types +import { RootState } from "../../types/store.types"; + +// Actions +import { setSearch } from "../../actions/setSearch"; + const Search = () => { - const [input, setInput] = useState(""); + const onInputChange = (value: string) => { + dispatch(setSearch(value)); + }; + // redux + const dispatch = useDispatch(); + const inputValue = useSelector( + (state) => state.search.value + ); + return (
{ > ) => - setInput(event.target.value) + onInputChange(event.target.value) } /> 0 ? "active" : "rest"} + animate={inputValue.length > 0 ? "active" : "rest"} variants={searchMotion} > diff --git a/src/reducers/searchReducer.ts b/src/reducers/searchReducer.ts new file mode 100644 index 0000000..e38a329 --- /dev/null +++ b/src/reducers/searchReducer.ts @@ -0,0 +1,20 @@ +// Types +import { ISearchData, ISearchDataAction } from "../types/store.types"; + +const initialState: ISearchData = { + value: "", +}; + +export const searchReducer = ( + state: ISearchData = initialState, + action: ISearchDataAction +) => { + switch (action.type) { + case "SET_SEARCH": { + return { value: action.payload }; + } + default: { + return state; + } + } +}; diff --git a/src/store/functionality.ts b/src/store/functionality.ts index d970709..9282aa1 100644 --- a/src/store/functionality.ts +++ b/src/store/functionality.ts @@ -5,12 +5,14 @@ import { combineReducers, configureStore } from "@reduxjs/toolkit"; import { activeLinkReducer } from "../reducers/activeLink.reducer"; import { languageReducer } from "../reducers/language.reducer"; import { newsScrollReducer, postReducer } from "../reducers/dataReducer"; +import { searchReducer } from "../reducers/searchReducer"; export const allReducers = combineReducers({ activeLink: activeLinkReducer, language: languageReducer, newsScroll: newsScrollReducer, post: postReducer, + search: searchReducer, }); export const functionalityStore = configureStore({ diff --git a/src/types/store.types.ts b/src/types/store.types.ts index cda4256..85f7ad2 100644 --- a/src/types/store.types.ts +++ b/src/types/store.types.ts @@ -46,6 +46,16 @@ export interface IPostDataAction { payload: IPostData["data"]; } +// + +export interface ISearchData { + value: string; +} +export interface ISearchDataAction { + type: "SET_SEARCH"; + payload: ISearchData["value"]; +} + // ALL TYPES BEFORE THIS LINE ================== export type RootState = ReturnType;