Skip to content

Commit 066fc95

Browse files
jskonstjskonst
committed
2024 updates
1 parent a559892 commit 066fc95

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+4837
-4337
lines changed

‎client/client.dockerfile‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
FROM node:alpine
1+
FROM node:alpine as builder
22
WORKDIR /app
33
COPY ./package*.json ./
44
RUN npm install
55
COPY ./ ./
6-
ENTRYPOINT npm start
6+
RUN npm run build
7+
# ENTRYPOINT npm start
8+
9+
FROM nginx

‎client/package.json‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@emotion/react": "^11.10.5",
7-
"@emotion/styled": "^11.10.5",
8-
"@mui/material": "^5.11.0",
9-
"react": "^18.2.0",
10-
"react-dom": "^18.2.0",
6+
"@emotion/react": "^11.13.3",
7+
"@emotion/styled": "^11.13.0",
8+
"@mui/material": "^6.1.2",
9+
"react": "^18.3.1",
10+
"react-dom": "^18.3.1",
1111
"react-scripts": "5.0.1",
12-
"web-vitals": "^2.1.4"
12+
"web-vitals": "^4.2.3"
1313
},
1414
"scripts": {
1515
"start": "react-scripts start",
@@ -38,19 +38,24 @@
3838
]
3939
},
4040
"devDependencies": {
41-
"@testing-library/jest-dom": "^5.16.5",
42-
"@testing-library/react": "^13.4.0",
43-
"@testing-library/user-event": "^13.5.0",
44-
"@types/jest": "^27.5.2",
45-
"@types/node": "^16.11.63",
46-
"@types/react": "^18.0.21",
47-
"@types/react-dom": "^18.0.6",
41+
"@testing-library/dom": "^10.4.0",
42+
"@testing-library/jest-dom": "^6.5.0",
43+
"@testing-library/react": "^16.0.1",
44+
"@testing-library/user-event": "^14.5.2",
45+
"@types/jest": "^29.5.13",
46+
"@types/node": "^22.7.4",
47+
"@types/react": "^18.3.11",
48+
"@types/react-dom": "^18.3.0",
49+
"css-loader": "^7.1.2",
4850
"env-cmd": "^10.1.0",
49-
"sass": "^1.55.0",
50-
"sass-loader": "^13.0.2",
51-
"ts-loader": "^9.4.1",
52-
"typescript": "^4.8.4",
53-
"webpack": "^5.74.0",
54-
"webpack-cli": "^4.10.0"
51+
"html-webpack-plugin": "^5.6.0",
52+
"sass": "^1.79.4",
53+
"sass-loader": "^16.0.2",
54+
"style-loader": "^4.0.0",
55+
"ts-loader": "^9.5.1",
56+
"typescript": "^5.6.2",
57+
"webpack": "^5.95.0",
58+
"webpack-cli": "^5.1.4",
59+
"webpack-dev-server": "^5.1.0"
5560
}
5661
}

‎client/src/App.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
import React from "react";
2-
import logo from "./logo.svg";
31
import "./App.css";
4-
import { FirstComponent } from "./components/FirstComponent";
2+
import Users from "./components/Users";
53

64
function App() {
75
return (
8-
<div>
6+
<>
97
<h1>Hello React world</h1>
10-
<h2>Hello</h2>
11-
<FirstComponent />
12-
</div>
8+
<h2>Hello again</h2>
9+
<Users />
10+
</>
1311
);
1412
}
1513

‎client/src/components/Dog.tsx‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎client/src/components/FirstComponent.tsx‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎client/src/components/User.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Button from '@mui/material/Button'
2+
import { UserInfo } from './Users'
3+
import React, { useEffect, useState } from 'react'
4+
5+
interface IProps {
6+
user: UserInfo
7+
}
8+
9+
export default function User(props: IProps) {
10+
const [count, setCount] = useState<number>(0);
11+
12+
const clickHandler = () => {
13+
console.log(count + 1);
14+
setCount(count + 1);
15+
}
16+
17+
return (
18+
<>
19+
<h3>Имя пользователя: {props.user.username}</h3>
20+
<h3>ФИО: {props.user.fullname}</h3>
21+
<h3>email: {props.user.email}</h3>
22+
<h3>Count: {count}</h3>
23+
<Button variant="contained" onClick={clickHandler}>Contained</Button>
24+
</>
25+
)
26+
}

‎client/src/components/Users.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React, { useEffect, useState } from 'react'
2+
import User from './User'
3+
4+
export interface UserInfo {
5+
id?: string
6+
username: string
7+
fullname: string
8+
email: string
9+
}
10+
11+
const getUsers = async ():Promise<UserInfo[]> => {
12+
const resp = await fetch("/api/users");
13+
const data = await resp.json();
14+
return data;
15+
// console.log(data);
16+
17+
// const users: UserInfo[] =
18+
// [
19+
// {
20+
// id: "de1b01ad-c4aa-45d9-8147-c091ce89cd02",
21+
// username: "testuser",
22+
// fullname: "test",
23+
// email: "test@test.ru"
24+
// },
25+
// {
26+
// id: "de1b01ad-c4aa-45d9-8147-c091ce89cd01",
27+
// username: "testuser2",
28+
// fullname: "test2",
29+
// email: "222@test2.ru"
30+
// }
31+
// ]
32+
// const promise = new Promise<UserInfo[]>((res, rej) =>{
33+
// setTimeout(()=>{
34+
// res(users);
35+
// }, 5000)
36+
// });
37+
// return promise;
38+
39+
}
40+
41+
42+
export default function Users() {
43+
const [users, setUsers] = useState<UserInfo[]>([]);
44+
45+
useEffect(()=>{
46+
let isAlive = true;
47+
console.log('loading', isAlive);
48+
// const getData = async () =>{
49+
// const data = await getUsers();
50+
// if (isAlive) {
51+
// setUsers(data);
52+
// }
53+
// }
54+
// getData();
55+
56+
getUsers()
57+
.then( users =>{ isAlive && setUsers(users) });
58+
59+
60+
return (()=> {
61+
console.log('deleting', isAlive);
62+
isAlive= false;
63+
})
64+
},[])
65+
66+
return (
67+
<div>
68+
{
69+
users.map((user: UserInfo) => {
70+
return (
71+
<User user={user} key={user.email}/>
72+
)
73+
})
74+
}
75+
76+
</div>
77+
)
78+
}

‎client/src/reportWebVitals.ts‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import { ReportHandler } from 'web-vitals';
2-
3-
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
1+
import { MetricType } from "web-vitals";
2+
3+
const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void) => {
44
if (onPerfEntry && onPerfEntry instanceof Function) {
5-
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6-
getCLS(onPerfEntry);
7-
getFID(onPerfEntry);
8-
getFCP(onPerfEntry);
9-
getLCP(onPerfEntry);
10-
getTTFB(onPerfEntry);
11-
});
12-
}
13-
};
5+
import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) =>
6+
{
7+
onCLS(onPerfEntry);
8+
onINP(onPerfEntry);
9+
onFCP(onPerfEntry);
10+
onLCP(onPerfEntry);
11+
onTTFB(onPerfEntry);
12+
});
13+
}
14+
};
15+
16+
export default reportWebVitals;
1417

15-
export default reportWebVitals;

‎client/webpack.config.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -76,23 +76,25 @@ module.exports = {
7676

7777
devServer: {
7878
allowedHosts: [
79-
SERVER_HOST,
8079
'localhost',
80+
SERVER_HOST,
8181
],
8282
historyApiFallback: true,
8383
open: true,
8484
hot: true,
8585
host: SERVER_WEB_HOST,
8686
port: SERVER_WEB_PORT,
87-
proxy: {
88-
'/api': proxy,
89-
'/acc': proxy,
90-
'/auth': proxy,
91-
'/socket.io': {
87+
88+
proxy: [
89+
{
90+
context: [ '/api', '/acc', '/auth', '/images'],
91+
target: proxy
92+
},
93+
{
94+
context: ['/socket.io'],
9295
target: proxy,
9396
ws: true
94-
},
95-
'/images': proxy
96-
}
97+
}
98+
]
9799
}
98100
};

0 commit comments

Comments
 (0)