Merge branch 'updateFrontend' into 'master'

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

See merge request !15

frontend/.prettierrc

 {
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "printWidth": 80
-}
\ No newline at end of file
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 3,
+    "trailingComma": "es5",
+    "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";
-    value: string;
-    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+   name: 'Decoded' | 'Encoded' | 'Password';
+   value: string;
+   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export default function InputField({ name, value, onChange }: Props) {
-    let labelText: string = "";
-    switch (name) {
-        case "Decoded":
-            labelText = `Decoded message`;
-            break;
-        case "Encoded":
-            labelText = `Encoded message`;
-            break;
-        case "Password":
-            labelText = "";
-            break;
-        default:
-            break;
-    }
+   let labelText: string = '';
+   switch (name) {
+      case 'Decoded':
+         labelText = `Decoded message`;
+         break;
+      case 'Encoded':
+         labelText = `Encoded message`;
+         break;
+      case 'Password':
+         labelText = '';
+         break;
+      default:
+         break;
+   }
 
-    return (
-        <Grid2 container alignItems="center" paddingY={2} spacing={2}>
-            <Grid2 flexGrow={1}>
-                <Typography
-                    component="label"
-                    htmlFor={`${name}-input`}
-                    sx={{
-                        fontSize: {
-                            xs: "16px",
-                            sm: "20px",
-                        },
-                    }}
-                >
-                    {labelText}
-                </Typography>
-            </Grid2>
+   return (
+      <Grid2 container alignItems="center" paddingY={2} spacing={2}>
+         <Grid2 flexGrow={1}>
+            <Typography
+               component="label"
+               htmlFor={`${name}-input`}
+               sx={{
+                  fontSize: {
+                     xs: '16px',
+                     sm: '20px',
+                  },
+               }}
+            >
+               {labelText}
+            </Typography>
+         </Grid2>
 
-            <Grid2 size={name === "Password" ? 6 : 8} sx={{ "@media (max-width: 900px)": { width: "100%" } }}>
-                <TextField
-                    fullWidth
-                    multiline={name !== "Password"}
-                    rows={name === "Password" ? 1 : 6}
-                    variant="outlined"
-                    id={`${name}-input`}
-                    name={name}
-                    label={name}
-                    value={value}
-                    onChange={onChange}
-                />
-            </Grid2>
-        </Grid2>
-    );
+         <Grid2 size={name === 'Password' ? 6 : 8} sx={{ '@media (max-width: 900px)': { width: '100%' } }}>
+            <TextField
+               fullWidth
+               multiline={name !== 'Password'}
+               rows={name === 'Password' ? 1 : 6}
+               variant="outlined"
+               id={`${name}-input`}
+               name={name}
+               label={name}
+               value={value}
+               type="password"
+               onChange={onChange}
+            />
+         </Grid2>
+      </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,
+   children,
 }: Readonly<{
-  children: React.ReactNode;
+   children: React.ReactNode;
 }>) {
-  return (
-    <Provider store={store}>
-      <html lang="en">
-        <body>{children}</body>
-      </html>
-    </Provider>
-  );
+   return (
+      <Provider store={store}>
+         <html lang="en">
+            <body>{children}</body>
+         </html>
+      </Provider>
+   );
 }

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;
-  error?: string | null;
-  result: string;
+   loading: boolean;
+   error?: string | null;
+   result: string;
 }
 
 interface IData {
-  password: string;
-  message: string;
+   password: string;
+   message: string;
 }
 
 const initialState: RequestState = {
-  loading: false,
-  error: null,
-  result: '',
+   loading: false,
+   error: null,
+   result: '',
 };
 
-export const encodeMessage = createAsyncThunk(
-  'request/encode',
-  async (data: IData) => {
-    try {
-      const response = await axiosClient.post('/encode', data);
-      return response.data.encoded;
-    } catch (error: any) {
-      throw new Error(
-        error.response?.data?.message || 'Error decoding message'
-      );
-    }
-  }
-);
+export const encodeMessage = createAsyncThunk('request/encode', async (newMessage: IData) => {
+   try {
+      const { data } = await axiosClient.post('/encode', newMessage);
+      console.log(data);
 
-export const decodeMessage = createAsyncThunk(
-  'request/decode',
-  async (data: IData) => {
-    try {
-      const response = await axiosClient.post('/decode', data);
-      return response.data.decoded;
-    } catch (error: any) {
-      throw new Error(
-        error.response?.data?.message || 'Error encoding message'
-      );
-    }
-  }
-);
+      return data.encoded;
+   } catch (error: any) {
+      throw new Error(error.response?.data?.message || 'Error decoding message');
+   }
+});
+
+export const decodeMessage = createAsyncThunk('request/decode', async (newMessage: IData) => {
+   try {
+      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');
+   }
+});
 
 const requestSlice = createSlice({
-  name: 'request',
-  initialState,
-  reducers: {},
-  extraReducers: (builder) => {
-    builder
-      .addCase(encodeMessage.pending, (state) => {
-        state.loading = true;
-        state.error = null;
-      })
-      .addCase(encodeMessage.fulfilled, (state, action) => {
-        state.loading = false;
-        state.result = action.payload;
-      })
-      .addCase(encodeMessage.rejected, (state, action) => {
-        state.loading = false;
-        state.error = action.error.message || "Error occured";
-      })
-      .addCase(decodeMessage.pending, (state) => {
-        state.loading = true;
-        state.error = null;
-      })
-      .addCase(decodeMessage.fulfilled, (state, action) => {
-        state.loading = false;
-        state.result = action.payload;
-      })
-      .addCase(decodeMessage.rejected, (state, action) => {
-        state.loading = false;
-        state.error = action.error.message || "Error occured";
-      });
-  },
+   name: 'request',
+   initialState,
+   reducers: {},
+   extraReducers: (builder) => {
+      builder
+         .addCase(encodeMessage.pending, (state) => {
+            state.loading = true;
+            state.error = null;
+         })
+         .addCase(encodeMessage.fulfilled, (state, action) => {
+            state.loading = false;
+            state.result = action.payload;
+         })
+         .addCase(encodeMessage.rejected, (state, action) => {
+            state.loading = false;
+            state.error = action.error.message || 'Error occured';
+         })
+         .addCase(decodeMessage.pending, (state) => {
+            state.loading = true;
+            state.error = null;
+         })
+         .addCase(decodeMessage.fulfilled, (state, action) => {
+            state.loading = false;
+            state.result = action.payload;
+         })
+         .addCase(decodeMessage.rejected, (state, action) => {
+            state.loading = false;
+            state.error = action.error.message || 'Error occured';
+         });
+   },
 });
 
 export default requestSlice.reducer;

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;

frontend/src/store/store.ts

@@ -2,9 +2,9 @@ import { configureStore } from '@reduxjs/toolkit';
 import requestReducer from '@/features/requestSlice';
 
 export const store = configureStore({
-  reducer: {
-    request: requestReducer,
-  },
+   reducer: {
+      request: requestReducer,
+   },
 });
 
 export type RootState = ReturnType<typeof store.getState>;

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();