Skip to content

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

Merge branch 'updateFrontend' into 'master' 

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

See merge request !15
parents 6ab37d66 2078e52e
Show whitespace changes
Inline Side-by-side
Showing with 296 additions and 299 deletions
frontend/.prettierrc
View file @ 6fdc5364
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"tabWidth": 3,
"trailingComma": "es5",
"printWidth": 80
"printWidth": 140
}
frontend/src/app/components/Header/Header.tsx 0 → 100644
View file @ 6fdc5364
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 @ 6fdc5364
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
View file @ 6fdc5364
"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
View file @ 6fdc5364
'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
View file @ 6fdc5364
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
View file @ 6fdc5364
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
View file @ 6fdc5364
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
View file @ 6fdc5364
......@@ -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();
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