#7 Обернул главный компонент Provider-ом, прописал валидацию полей чтобы не…

#7 Обернул главный компонент Provider-ом, прописал валидацию полей чтобы не отправлять на сервер пустые значения, прописал логику показа ошибки снизу, и показа loader, при отправке данных. Добавил логику отправки сообщений через store. В файле store.ts добавил requestReducer

frontend/src/app/page.tsx

-"use client";
-import { Box, Button, Container, Grid2, Typography } from "@mui/material";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import { ChangeEvent, FormEvent, useState } from "react";
-import InputField from "./components/InputField";
+'use client';
+import { Box, Button, Container, Grid2, Typography } from '@mui/material';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import { ChangeEvent, useEffect, useState } from 'react';
+import InputField from './components/InputField';
+import '@/animations/Loader.css';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { Provider } from 'react-redux';
+import { store } from '@/store/store';
+import { encodeMessage, decodeMessage } from '@/features/requestSlice';
 
 interface IFormData {
   decoded: string;
@@ -11,16 +16,53 @@ interface IFormData {
 }
 
 export default function Home() {
+  const dispatch = useAppDispatch();
+  const { loading, result, error } = useAppSelector((state) => state.request);
+
   const [formData, setFormData] = useState<IFormData>({
-    encoded: "",
-    decoded: "",
-    password: "",
+    encoded: '',
+    decoded: '',
+    password: '',
   });
 
-  const submitFormHandler = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const onCypherHandler = (): void => {
+    if (!formData.password.trim()) {
+      alert('Please, type in password!');
+      return;
+    }
+    if (!formData.encoded.trim()) {
+      alert('Please fill in the "Decoded" field!');
+      return;
+    }
+    dispatch(
+      encodeMessage({ password: formData.password, message: formData.decoded })
+    );
+  };
+
+  const onDecypherHandler = (): void => {
+    if (!formData.password.trim()) {
+      alert('Please, type in password!');
+      return;
+    }
+    if (!formData.decoded.trim()) {
+      alert('Please fill in the "Decoded" field!');
+      return;
+    }
+    dispatch(
+      decodeMessage({ password: formData.password, message: formData.decoded })
+    );
   };
 
+  useEffect(() => {
+    if (result) {
+      if (formData.decoded) {
+        setFormData((prev) => ({ ...prev, encoded: result }));
+      } else {
+        setFormData((prev) => ({ ...prev, decoded: result }));
+      }
+    }
+  }, [result]);
+
   const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData((prevData) => ({
@@ -30,14 +72,15 @@ export default function Home() {
   };
 
   return (
+    <Provider store={store}>
       <div className="App">
         <Container sx={{ marginTop: 2 }} maxWidth="lg">
           <Typography
             variant="h3"
             sx={{
               fontSize: {
-              xs: "24px",
-              sm: "36px",
+                xs: '24px',
+                sm: '36px',
               },
             }}
           >
@@ -46,15 +89,14 @@ export default function Home() {
           <Box
             sx={{
               maxWidth: {
-              xs: "90%",
-              sm: "80%",
-              lg: "70%",
+                xs: '90%',
+                sm: '80%',
+                lg: '70%',
               },
             }}
             component="form"
             autoComplete="off"
-          onSubmit={submitFormHandler}
-          paddingY={2}
+            padding={2}
           >
             <Grid2 container direction="column" spacing={2}>
               <InputField
@@ -67,8 +109,8 @@ export default function Home() {
                 alignItems="center"
                 sx={{
                   flexDirection: {
-                  xs: "column",
-                  md: "row",
+                    xs: 'column',
+                    md: 'row',
                   },
                 }}
               >
@@ -79,16 +121,17 @@ export default function Home() {
                     onChange={onInputChangeHandler}
                   />
                 </Grid2>
-              <Grid2 container justifyContent={{}}>
+                <Grid2 container>
                   <Grid2>
                     <Button
                       size="small"
                       variant="contained"
                       startIcon={<ArrowDownwardIcon />}
+                      onClick={onDecypherHandler}
                     >
                       <Typography
                         sx={{
-                        display: { xs: "none", md: "inline" },
+                          display: { xs: 'none', md: 'inline' },
                         }}
                       >
                         Encode
@@ -101,12 +144,15 @@ export default function Home() {
                       size="small"
                       variant="contained"
                       startIcon={
-                      <ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} />
+                        <ArrowDownwardIcon
+                          sx={{ transform: 'rotate(180deg)' }}
+                        />
                       }
+                      onClick={onCypherHandler}
                     >
                       <Typography
                         sx={{
-                        display: { xs: "none", md: "inline" },
+                          display: { xs: 'none', md: 'inline' },
                         }}
                       >
                         Decode
@@ -123,7 +169,18 @@ export default function Home() {
               />
             </Grid2>
           </Box>
+
+          {loading && (
+            <div className="loader">
+              <div className="lds-ripple">
+                <div></div>
+                <div></div>
+              </div>
+            </div>
+          )}
+          {error && <Typography color="error">{error}</Typography>}
         </Container>
       </div>
+    </Provider>
   );
 }

frontend/src/store/store.ts

-import { configureStore } from "@reduxjs/toolkit";
+import { configureStore } from '@reduxjs/toolkit';
+import requestReducer from '@/features/requestSlice';
 
 export const store = configureStore({
   reducer: {
-    
+    request: requestReducer,
   },
 });