Skip to content

H
Homework83_M11
Commit 6ab37d66 authored by bekzat kapan's avatar bekzat kapan
Browse files
Options

Merge branch '7-frontend-logic' into 'master' 

Resolve "Фронтенд: Бизнес-логика"

Closes #7

See merge request !13
parents 3f46dd44 1d803225
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 637 additions and 106 deletions
frontend/.eslintrc.json 0 → 100644
View file @ 6ab37d66
{
"root": true,
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "react-hooks", "@typescript-eslint", "jsx-a11y", "prettier"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"prettier/prettier": ["error"],
"react/react-in-jsx-scope": "off",
"react/prop-types": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
},
"settings": {
"react": {
"version": "detect"
}
}
}
\ No newline at end of file
frontend/.prettierrc 0 → 100644
View file @ 6ab37d66
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}
\ No newline at end of file
frontend/package-lock.json
View file @ 6ab37d66
This diff is collapsed.
frontend/package.json
View file @ 6ab37d66
...@@ -3,25 +3,32 @@ ...@@ -3,25 +3,32 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev -p 0666",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "next lint" "lint": "next lint",
"format": "prettier --write ."
}, },
"dependencies": { "dependencies": {
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.2.1", "@mui/icons-material": "^6.2.1",
"@mui/material": "^6.2.1", "@mui/material": "^6.2.1",
"@reduxjs/toolkit": "^2.5.0",
"axios": "^1.7.9",
"next": "15.1.1", "next": "15.1.1",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0" "react-dom": "^19.0.0",
"react-redux": "^9.2.0",
"redux": "^5.0.1"
}, },
"devDependencies": { "devDependencies": {
"@eslint/eslintrc": "^3", "@eslint/eslintrc": "^3",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"@types/react-redux": "^7.1.34",
"@types/redux": "^3.6.31",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "15.1.1", "eslint-config-next": "15.1.1",
"typescript": "^5" "typescript": "^5"
......
frontend/src/animations/Loader.css 0 → 100644
View file @ 6ab37d66
.loader {
width: 100%;
display: flex;
justify-content: center;
}
.lds-ripple {
color: #c7cad1
}
.lds-ripple,
.lds-ripple div {
box-sizing: border-box;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid currentColor;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 8px;
height: 8px;
opacity: 0;
}
4.9% {
top: 36px;
left: 36px;
width: 8px;
height: 8px;
opacity: 0;
}
5% {
top: 36px;
left: 36px;
width: 8px;
height: 8px;
opacity: 1;
}
100% {
top: 0;
left: 0;
width: 80px;
height: 80px;
opacity: 0;
}
}
\ No newline at end of file
frontend/src/app/layout.tsx
View file @ 6ab37d66
"use client";
import { store } from "@/store/store";
import { Provider } from "react-redux";
export default function RootLayout({ export default function RootLayout({
children, children,
...@@ -5,10 +8,10 @@ export default function RootLayout({ ...@@ -5,10 +8,10 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <Provider store={store}>
<body> <html lang="en">
{children} <body>{children}</body>
</body> </html>
</html> </Provider>
); );
} }
frontend/src/app/page.tsx
View file @ 6ab37d66
"use client"; 'use client';
import { Box, Button, Container, Grid2, Typography } from "@mui/material"; import { Box, Button, Container, Grid2, Typography } from '@mui/material';
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward"; import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import { ChangeEvent, FormEvent, useState } from "react"; import { ChangeEvent, useEffect, useState } from 'react';
import InputField from "./components/InputField"; import InputField from './components/InputField';
import '@/animations/Loader.css';
import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { encodeMessage, decodeMessage } from '@/features/requestSlice';
interface IFormData { interface IFormData {
decoded: string; decoded: string;
...@@ -11,101 +14,170 @@ interface IFormData { ...@@ -11,101 +14,170 @@ interface IFormData {
} }
export default function Home() { export default function Home() {
const [formData, setFormData] = useState<IFormData>({ const dispatch = useAppDispatch();
encoded: "", const { loading, result, error } = useAppSelector((state) => state.request);
decoded: "",
password: "",
});
const submitFormHandler = (e: FormEvent<HTMLFormElement>) => { const [formData, setFormData] = useState<IFormData>({
e.preventDefault(); encoded: '',
}; decoded: '',
password: '',
});
const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => { const onCypherHandler = (): void => {
const { name, value } = e.target; if (!formData.password.trim()) {
setFormData((prevData) => ({ alert('Please, type in password!');
...prevData, return;
[name.toLowerCase()]: value, }
})); 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 })
);
};
return ( useEffect(() => {
<div className="App"> if (result) {
<Container sx={{ marginTop: 2 }} maxWidth="lg"> if (formData.decoded) {
<Typography setFormData((prev) => ({ ...prev, encoded: result }));
variant="h3" } else {
sx={{ setFormData((prev) => ({ ...prev, decoded: result }));
fontSize: { }
xs: "24px", }
sm: "36px", }, [result]);
},
}}
>
Cypher Coder/Decoder
</Typography>
<Box
sx={{
maxWidth: {
xs: "90%",
sm: "80%",
lg: "70%",
},
}}
component="form"
autoComplete="off"
onSubmit={submitFormHandler}
paddingY={2}
>
<Grid2 container direction="column" spacing={2}>
<InputField name="Decoded" value={formData.decoded} onChange={onInputChangeHandler} />
<Grid2
container
alignItems="center"
sx={{
flexDirection: {
xs: "column",
md: "row",
},
}}
>
<Grid2 size={7}>
<InputField name="Password" value={formData.password} onChange={onInputChangeHandler} />
</Grid2>
<Grid2 container justifyContent={{}}>
<Grid2>
<Button size="small" variant="contained" startIcon={<ArrowDownwardIcon />}>
<Typography
sx={{
display: { xs: "none", md: "inline" },
}}
>
Encode
</Typography>
</Button>
</Grid2>
<Grid2> const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
<Button const { name, value } = e.target;
size="small" setFormData((prevData) => ({
variant="contained" ...prevData,
startIcon={<ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} />} [name.toLowerCase()]: value,
> }));
<Typography };
sx={{
display: { xs: "none", md: "inline" },
}}
>
Decode
</Typography>
</Button>
</Grid2>
</Grid2>
</Grid2>
<InputField name="Encoded" value={formData.encoded} onChange={onInputChangeHandler} /> return (
</Grid2>
</Box> <div className="App">
</Container> <Container sx={{ marginTop: 2 }} maxWidth="lg">
</div> <Typography
); variant="h3"
sx={{
fontSize: {
xs: '24px',
sm: '36px',
},
}}
>
Cypher Coder/Decoder
</Typography>
<Box
sx={{
maxWidth: {
xs: '90%',
sm: '80%',
lg: '70%',
},
}}
component="form"
autoComplete="off"
padding={2}
>
<Grid2 container direction="column" spacing={2}>
<InputField
name="Decoded"
value={formData.decoded}
onChange={onInputChangeHandler}
/>
<Grid2
container
alignItems="center"
sx={{
flexDirection: {
xs: 'column',
md: 'row',
},
}}
>
<Grid2 size={7}>
<InputField
name="Password"
value={formData.password}
onChange={onInputChangeHandler}
/>
</Grid2>
<Grid2 container>
<Grid2>
<Button
size="small"
variant="contained"
startIcon={<ArrowDownwardIcon />}
onClick={onDecypherHandler}
>
<Typography
sx={{
display: { xs: 'none', md: 'inline' },
}}
>
Encode
</Typography>
</Button>
</Grid2>
<Grid2>
<Button
size="small"
variant="contained"
startIcon={
<ArrowDownwardIcon
sx={{ transform: 'rotate(180deg)' }}
/>
}
onClick={onCypherHandler}
>
<Typography
sx={{
display: { xs: 'none', md: 'inline' },
}}
>
Decode
</Typography>
</Button>
</Grid2>
</Grid2>
</Grid2>
<InputField
name="Encoded"
value={formData.encoded}
onChange={onInputChangeHandler}
/>
</Grid2>
</Box>
{loading && (
<div className="loader">
<div className="lds-ripple">
<div></div>
<div></div>
</div>
</div>
)}
{error && <Typography color="error">{error}</Typography>}
</Container>
</div>
);
} }
frontend/src/features/requestSlice.ts 0 → 100644
View file @ 6ab37d66
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axiosClient from '@/helpers/axiosClient';
interface RequestState {
loading: boolean;
error?: string | null;
result: string;
}
interface IData {
password: string;
message: string;
}
const initialState: RequestState = {
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 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'
);
}
}
);
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";
});
},
});
export default requestSlice.reducer;
frontend/src/helpers/axiosClient.ts 0 → 100644
View file @ 6ab37d66
import axios from 'axios';
const axiosClient = axios.create({
baseURL: 'https://localhost/8000',
});
export default axiosClient;
frontend/src/store/hooks.ts 0 → 100644
View file @ 6ab37d66
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 0 → 100644
View file @ 6ab37d66
import { configureStore } from '@reduxjs/toolkit';
import requestReducer from '@/features/requestSlice';
export const store = configureStore({
reducer: {
request: requestReducer,
},
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
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