Skip to content

H
Homework83_M11
Commit 2078e52e authored by Ли Джен Сеп's avatar Ли Джен Сеп 💬
Browse files
Options

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

parent 6ab37d66
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 296 additions and 299 deletions
frontend/.prettierrc
View file @ 2078e52e
{ {
"semi": true, "semi": true,
"singleQuote": true, "singleQuote": true,
"tabWidth": 2, "tabWidth": 3,
"trailingComma": "es5", "trailingComma": "es5",
"printWidth": 80 "printWidth": 140
} }
\ No newline at end of file
frontend/src/app/components/Header/Header.tsx 0 → 100644
View file @ 2078e52e
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
View file @ 2078e52e
import { Grid2, TextField, Typography } from "@mui/material"; import { Grid2, TextField, Typography } from '@mui/material';
import { ChangeEvent } from "react"; import { ChangeEvent } from 'react';
interface Props { interface Props {
name: "Decoded" | "Encoded" | "Password"; name: 'Decoded' | 'Encoded' | 'Password';
value: string; value: string;
onChange: (e: ChangeEvent<HTMLInputElement>) => void; onChange: (e: ChangeEvent<HTMLInputElement>) => void;
} }
export default function InputField({ name, value, onChange }: Props) { export default function InputField({ name, value, onChange }: Props) {
let labelText: string = ""; let labelText: string = '';
switch (name) { switch (name) {
case "Decoded": case 'Decoded':
labelText = `Decoded message`; labelText = `Decoded message`;
break; break;
case "Encoded": case 'Encoded':
labelText = `Encoded message`; labelText = `Encoded message`;
break; break;
case "Password": case 'Password':
labelText = ""; labelText = '';
break; break;
default: default:
break; break;
} }
return ( return (
<Grid2 container alignItems="center" paddingY={2} spacing={2}> <Grid2 container alignItems="center" paddingY={2} spacing={2}>
<Grid2 flexGrow={1}> <Grid2 flexGrow={1}>
<Typography <Typography
component="label" component="label"
htmlFor={`${name}-input`} htmlFor={`${name}-input`}
sx={{ sx={{
fontSize: { fontSize: {
xs: "16px", xs: '16px',
sm: "20px", sm: '20px',
}, },
}} }}
> >
{labelText} {labelText}
</Typography> </Typography>
</Grid2> </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 <TextField
fullWidth fullWidth
multiline={name !== "Password"} multiline={name !== 'Password'}
rows={name === "Password" ? 1 : 6} rows={name === 'Password' ? 1 : 6}
variant="outlined" variant="outlined"
id={`${name}-input`} id={`${name}-input`}
name={name} name={name}
label={name} label={name}
value={value} value={value}
onChange={onChange} type="password"
/> onChange={onChange}
</Grid2> />
</Grid2> </Grid2>
); </Grid2>
);
} }
frontend/src/app/layout.tsx
View file @ 2078e52e
"use client"; 'use client';
import { store } from "@/store/store"; import { store } from '@/store/store';
import { Provider } from "react-redux"; import { Provider } from 'react-redux';
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<Provider store={store}> <Provider store={store}>
<html lang="en"> <html lang="en">
<body>{children}</body> <body>{children}</body>
</html> </html>
</Provider> </Provider>
); );
} }
frontend/src/app/page.tsx
View file @ 2078e52e
This diff is collapsed.
frontend/src/features/requestSlice.ts
View file @ 2078e52e
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'; import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axiosClient from '@/helpers/axiosClient'; import { axiosClient } from '@/helpers/axiosClient';
interface RequestState { interface RequestState {
loading: boolean; loading: boolean;
error?: string | null; error?: string | null;
result: string; result: string;
} }
interface IData { interface IData {
password: string; password: string;
message: string; message: string;
} }
const initialState: RequestState = { const initialState: RequestState = {
loading: false, loading: false,
error: null, error: null,
result: '', result: '',
}; };
export const encodeMessage = createAsyncThunk( export const encodeMessage = createAsyncThunk('request/encode', async (newMessage: IData) => {
'request/encode', try {
async (data: IData) => { const { data } = await axiosClient.post('/encode', newMessage);
try { console.log(data);
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 decodeMessage = createAsyncThunk( return data.encoded;
'request/decode', } catch (error: any) {
async (data: IData) => { throw new Error(error.response?.data?.message || 'Error decoding message');
try { }
const response = await axiosClient.post('/decode', data); });
return response.data.decoded;
} catch (error: any) { export const decodeMessage = createAsyncThunk('request/decode', async (newMessage: IData) => {
throw new Error( try {
error.response?.data?.message || 'Error encoding message' 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({ const requestSlice = createSlice({
name: 'request', name: 'request',
initialState, initialState,
reducers: {}, reducers: {},
extraReducers: (builder) => { extraReducers: (builder) => {
builder builder
.addCase(encodeMessage.pending, (state) => { .addCase(encodeMessage.pending, (state) => {
state.loading = true; state.loading = true;
state.error = null; state.error = null;
}) })
.addCase(encodeMessage.fulfilled, (state, action) => { .addCase(encodeMessage.fulfilled, (state, action) => {
state.loading = false; state.loading = false;
state.result = action.payload; state.result = action.payload;
}) })
.addCase(encodeMessage.rejected, (state, action) => { .addCase(encodeMessage.rejected, (state, action) => {
state.loading = false; state.loading = false;
state.error = action.error.message || "Error occured"; state.error = action.error.message || 'Error occured';
}) })
.addCase(decodeMessage.pending, (state) => { .addCase(decodeMessage.pending, (state) => {
state.loading = true; state.loading = true;
state.error = null; state.error = null;
}) })
.addCase(decodeMessage.fulfilled, (state, action) => { .addCase(decodeMessage.fulfilled, (state, action) => {
state.loading = false; state.loading = false;
state.result = action.payload; state.result = action.payload;
}) })
.addCase(decodeMessage.rejected, (state, action) => { .addCase(decodeMessage.rejected, (state, action) => {
state.loading = false; state.loading = false;
state.error = action.error.message || "Error occured"; state.error = action.error.message || 'Error occured';
}); });
}, },
}); });
export default requestSlice.reducer; export default requestSlice.reducer;
frontend/src/helpers/axiosClient.ts
View file @ 2078e52e
import axios from 'axios'; import axios from 'axios';
const axiosClient = axios.create({ export const axiosClient = axios.create({
baseURL: 'https://localhost/8000', baseURL: 'http://localhost:8000',
}); });
export default axiosClient;
frontend/src/store/hooks.ts
View file @ 2078e52e
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from 'react-redux';
import type { TypedUseSelectorHook } from "react-redux"; import type { TypedUseSelectorHook } from 'react-redux';
import type { RootState, AppDispatch } from "./store"; import type { RootState, AppDispatch } from './store';
export const useAppDispatch: () => AppDispatch = useDispatch; export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
frontend/src/store/store.ts
View file @ 2078e52e
...@@ -2,9 +2,9 @@ import { configureStore } from '@reduxjs/toolkit'; ...@@ -2,9 +2,9 @@ import { configureStore } from '@reduxjs/toolkit';
import requestReducer from '@/features/requestSlice'; import requestReducer from '@/features/requestSlice';
export const store = configureStore({ export const store = configureStore({
reducer: { reducer: {
request: requestReducer, request: requestReducer,
}, },
}); });
export type RootState = ReturnType<typeof store.getState>; export type RootState = ReturnType<typeof store.getState>;
......
service/src/main.ts
View file @ 2078e52e
...@@ -6,6 +6,12 @@ ConfigModule.forRoot(); ...@@ -6,6 +6,12 @@ ConfigModule.forRoot();
async function startServer() { async function startServer() {
const app = await NestFactory.create(MessageModule); 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); await app.listen(8000);
} }
startServer(); startServer();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment