Merge branch 'updateFrontend' into 'master'

#6 рефакторю код. соеденил фронт и бек

See merge request !15

frontend/.prettierrc

 {
     "semi": true,
     "singleQuote": true,
-  "tabWidth": 2,
+    "tabWidth": 3,
     "trailingComma": "es5",
-  "printWidth": 80
+    "printWidth": 140
 }

frontend/src/app/components/Header/Header.tsx

+import { Typography } from '@mui/material';
+
+export function Header() {
+    return (
+        <Typography
+            variant="h3"
+            sx={{
+                fontSize: {
+                    xs: '24px',
+                    sm: '36px',
+                },
+            }}
+        >
+            Cypher Coder/Decoder
+        </Typography>
+    );
+}

frontend/src/app/components/InputField.tsx

-import { Grid2, TextField, Typography } from "@mui/material";
-import { ChangeEvent } from "react";
+import { Grid2, TextField, Typography } from '@mui/material';
+import { ChangeEvent } from 'react';
 
 interface Props {
-    name: "Decoded" | "Encoded" | "Password";
+   name: 'Decoded' | 'Encoded' | 'Password';
    value: string;
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export default function InputField({ name, value, onChange }: Props) {
-    let labelText: string = "";
+   let labelText: string = '';
    switch (name) {
-        case "Decoded":
+      case 'Decoded':
          labelText = `Decoded message`;
          break;
-        case "Encoded":
+      case 'Encoded':
          labelText = `Encoded message`;
          break;
-        case "Password":
-            labelText = "";
+      case 'Password':
+         labelText = '';
          break;
       default:
          break;
@@ -31,8 +31,8 @@ export default function InputField({ name, value, onChange }: Props) {
                htmlFor={`${name}-input`}
                sx={{
                   fontSize: {
-                            xs: "16px",
-                            sm: "20px",
+                     xs: '16px',
+                     sm: '20px',
                   },
                }}
             >
@@ -40,16 +40,17 @@ export default function InputField({ name, value, onChange }: Props) {
             </Typography>
          </Grid2>
 
-            <Grid2 size={name === "Password" ? 6 : 8} sx={{ "@media (max-width: 900px)": { width: "100%" } }}>
+         <Grid2 size={name === 'Password' ? 6 : 8} sx={{ '@media (max-width: 900px)': { width: '100%' } }}>
             <TextField
                fullWidth
-                    multiline={name !== "Password"}
-                    rows={name === "Password" ? 1 : 6}
+               multiline={name !== 'Password'}
+               rows={name === 'Password' ? 1 : 6}
                variant="outlined"
                id={`${name}-input`}
                name={name}
                label={name}
                value={value}
+               type="password"
                onChange={onChange}
             />
          </Grid2>

frontend/src/app/layout.tsx

-"use client";
-import { store } from "@/store/store";
-import { Provider } from "react-redux";
+'use client';
+import { store } from '@/store/store';
+import { Provider } from 'react-redux';
 
 export default function RootLayout({
    children,

frontend/src/app/page.tsx

 'use client';
+
+import { ChangeEvent, useEffect, useState } from 'react';
 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 { Header } from './components/Header/Header';
 import { encodeMessage, decodeMessage } from '@/features/requestSlice';
 
 interface IFormData {
@@ -28,12 +30,12 @@ export default function Home() {
          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 })
+         encodeMessage({
+            password: formData.password,
+            message: formData.decoded,
+         })
       );
    };
 
@@ -42,12 +44,12 @@ export default function Home() {
          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 })
+         decodeMessage({
+            password: formData.password,
+            message: formData.encoded,
+         })
       );
    };
 
@@ -70,20 +72,9 @@ export default function Home() {
    };
 
    return (
-    
       <div className="App">
          <Container sx={{ marginTop: 2 }} maxWidth="lg">
-          <Typography
-            variant="h3"
-            sx={{
-              fontSize: {
-                xs: '24px',
-                sm: '36px',
-              },
-            }}
-          >
-            Cypher Coder/Decoder
-          </Typography>
+            <Header />
             <Box
                sx={{
                   maxWidth: {
@@ -97,11 +88,7 @@ export default function Home() {
                padding={2}
             >
                <Grid2 container direction="column" spacing={2}>
-              <InputField
-                name="Decoded"
-                value={formData.decoded}
-                onChange={onInputChangeHandler}
-              />
+                  <InputField name="Decoded" value={formData.decoded} onChange={onInputChangeHandler} />
                   <Grid2
                      container
                      alignItems="center"
@@ -113,26 +100,20 @@ export default function Home() {
                      }}
                   >
                      <Grid2 size={7}>
-                  <InputField
-                    name="Password"
-                    value={formData.password}
-                    onChange={onInputChangeHandler}
-                  />
+                        <InputField name="Password" value={formData.password} onChange={onInputChangeHandler} />
                      </Grid2>
                      <Grid2 container>
                         <Grid2>
-                    <Button
-                      size="small"
-                      variant="contained"
-                      startIcon={<ArrowDownwardIcon />}
-                      onClick={onDecypherHandler}
-                    >
+                           <Button size="small" variant="contained" startIcon={<ArrowDownwardIcon />} onClick={onDecypherHandler}>
                               <Typography
                                  sx={{
-                          display: { xs: 'none', md: 'inline' },
+                                    display: {
+                                       xs: 'none',
+                                       md: 'inline',
+                                    },
                                  }}
                               >
-                        Encode
+                                 Decode
                               </Typography>
                            </Button>
                         </Grid2>
@@ -143,28 +124,29 @@ export default function Home() {
                               variant="contained"
                               startIcon={
                                  <ArrowDownwardIcon
-                          sx={{ transform: 'rotate(180deg)' }}
+                                    sx={{
+                                       transform: 'rotate(180deg)',
+                                    }}
                                  />
                               }
-                      onClick={onCypherHandler}
+                              onClick={() => onCypherHandler()}
                            >
                               <Typography
                                  sx={{
-                          display: { xs: 'none', md: 'inline' },
+                                    display: {
+                                       xs: 'none',
+                                       md: 'inline',
+                                    },
                                  }}
                               >
-                        Decode
+                                 Encode
                               </Typography>
                            </Button>
                         </Grid2>
                      </Grid2>
                   </Grid2>
 
-              <InputField
-                name="Encoded"
-                value={formData.encoded}
-                onChange={onInputChangeHandler}
-              />
+                  <InputField name="Encoded" value={formData.encoded} onChange={onInputChangeHandler} />
                </Grid2>
             </Box>
 

frontend/src/features/requestSlice.ts

 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-import axiosClient from '@/helpers/axiosClient';
+import { axiosClient } from '@/helpers/axiosClient';
 
 interface RequestState {
    loading: boolean;
@@ -18,33 +18,26 @@ const initialState: RequestState = {
    result: '',
 };
 
-export const encodeMessage = createAsyncThunk(
-  'request/encode',
-  async (data: IData) => {
+export const encodeMessage = createAsyncThunk('request/encode', async (newMessage: IData) => {
    try {
-      const response = await axiosClient.post('/encode', data);
-      return response.data.encoded;
+      const { data } = await axiosClient.post('/encode', newMessage);
+      console.log(data);
+
+      return data.encoded;
    } catch (error: any) {
-      throw new Error(
-        error.response?.data?.message || 'Error decoding message'
-      );
-    }
+      throw new Error(error.response?.data?.message || 'Error decoding message');
    }
-);
+});
 
-export const decodeMessage = createAsyncThunk(
-  'request/decode',
-  async (data: IData) => {
+export const decodeMessage = createAsyncThunk('request/decode', async (newMessage: IData) => {
    try {
-      const response = await axiosClient.post('/decode', data);
-      return response.data.decoded;
+      const { data } = await axiosClient.post('/decode', newMessage);
+      console.log(data);
+      return data.decoded;
    } catch (error: any) {
-      throw new Error(
-        error.response?.data?.message || 'Error encoding message'
-      );
+      throw new Error(error.response?.data?.message || 'Error encoding message');
    }
-  }
-);
+});
 
 const requestSlice = createSlice({
    name: 'request',
@@ -62,7 +55,7 @@ const requestSlice = createSlice({
          })
          .addCase(encodeMessage.rejected, (state, action) => {
             state.loading = false;
-        state.error = action.error.message || "Error occured";
+            state.error = action.error.message || 'Error occured';
          })
          .addCase(decodeMessage.pending, (state) => {
             state.loading = true;
@@ -74,7 +67,7 @@ const requestSlice = createSlice({
          })
          .addCase(decodeMessage.rejected, (state, action) => {
             state.loading = false;
-        state.error = action.error.message || "Error occured";
+            state.error = action.error.message || 'Error occured';
          });
    },
 });

frontend/src/helpers/axiosClient.ts

 import axios from 'axios';
 
-const axiosClient = axios.create({
-  baseURL: 'https://localhost/8000',
+export const axiosClient = axios.create({
+   baseURL: 'http://localhost:8000',
 });
-
-export default axiosClient;

frontend/src/store/hooks.ts

-import { useDispatch, useSelector } from "react-redux";
-import type { TypedUseSelectorHook } from "react-redux";
-import type { RootState, AppDispatch } from "./store";
+import { useDispatch, useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
 
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

service/src/main.ts

@@ -6,6 +6,12 @@ ConfigModule.forRoot();
 
 async function startServer() {
   const app = await NestFactory.create(MessageModule);
+  app.enableCors({
+    origin: 'http://localhost:666',
+    methods: 'GET,POST,PUT,DELETE',
+    allowedHeaders: 'Content-Type,Authorization',
+    credentials: true,
+  });
   await app.listen(8000);
 }
 startServer();