2024 updates

client/client.dockerfile

@@ -1,6 +1,9 @@
-FROM node:alpine
+FROM node:alpine as builder
 WORKDIR /app
 COPY ./package*.json ./
 RUN npm install
 COPY ./ ./
-ENTRYPOINT npm start
+RUN npm run build
+# ENTRYPOINT npm start
+
+FROM nginx 

client/package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.11.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^4.2.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -38,19 +38,24 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.11.63",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.13",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
+    "css-loader": "^7.1.2",
     "env-cmd": "^10.1.0",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.0.2",
-    "ts-loader": "^9.4.1",
-    "typescript": "^4.8.4",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0"
+    "html-webpack-plugin": "^5.6.0",
+    "sass": "^1.79.4",
+    "sass-loader": "^16.0.2",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.2",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   }
 }

client/src/App.tsx

@@ -1,15 +1,13 @@
-import React from "react";
-import logo from "./logo.svg";
 import "./App.css";
-import { FirstComponent } from "./components/FirstComponent";
+import Users from "./components/Users";
 
 function App() {
   return (
-    <div>
+    <>
       <h1>Hello React world</h1>
-      <h2>Hello</h2>
-      <FirstComponent />
-    </div>
+      <h2>Hello again</h2>
+      <Users />
+    </>
   );
 }
 

client/src/components/User.tsx

@@ -0,0 +1,26 @@
+import Button from '@mui/material/Button'
+import { UserInfo } from './Users'
+import React, { useEffect, useState } from 'react'
+
+interface IProps {
+    user: UserInfo
+}
+
+export default function User(props: IProps) {
+    const [count, setCount]  = useState<number>(0);
+
+    const clickHandler  = () => {
+        console.log(count + 1);
+        setCount(count + 1);
+    }
+
+    return (
+        <>
+            <h3>Имя пользователя: {props.user.username}</h3>
+            <h3>ФИО: {props.user.fullname}</h3>
+            <h3>email: {props.user.email}</h3>
+            <h3>Count: {count}</h3>
+            <Button variant="contained" onClick={clickHandler}>Contained</Button>
+        </>
+    )
+}

client/src/components/Users.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react'
+import User from './User'
+
+export interface UserInfo {
+    id?: string
+    username: string
+    fullname: string
+    email: string
+}
+
+const getUsers = async ():Promise<UserInfo[]> => {
+    const resp = await fetch("/api/users");
+    const data = await resp.json();
+    return data;
+//     console.log(data);
+
+// const users: UserInfo[] = 
+//     [
+//     {
+//         id: "de1b01ad-c4aa-45d9-8147-c091ce89cd02",
+//         username: "testuser",
+//         fullname: "test",
+//         email: "test@test.ru"
+//     },
+//      {
+//         id: "de1b01ad-c4aa-45d9-8147-c091ce89cd01",
+//         username: "testuser2",
+//         fullname: "test2",
+//         email: "222@test2.ru"
+//     }
+// ]
+//     const promise = new Promise<UserInfo[]>((res, rej) =>{
+//         setTimeout(()=>{
+//             res(users);
+//         }, 5000)
+//     });
+//     return promise;
+
+}
+
+
+export default function Users() {
+const [users, setUsers] = useState<UserInfo[]>([]);
+
+useEffect(()=>{
+    let isAlive = true;
+    console.log('loading', isAlive);
+    // const getData = async () =>{
+    //     const data = await getUsers();
+    //     if (isAlive) {
+    //         setUsers(data);
+    //     }
+    // }
+    // getData();
+
+    getUsers()
+    .then( users =>{ isAlive && setUsers(users) });
+
+
+    return (()=> {
+    console.log('deleting', isAlive);
+        isAlive= false;
+    })
+},[])
+
+  return (
+    <div>
+        {
+         users.map((user: UserInfo) => {
+            return (
+                <User user={user} key={user.email}/>
+            )
+         })   
+        }      
+
+    </div>
+  )
+}

client/src/reportWebVitals.ts

@@ -1,15 +1,17 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+import { MetricType } from "web-vitals";
+ 
+const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
+    import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => 
+{
+       onCLS(onPerfEntry);
+       onINP(onPerfEntry);
+       onFCP(onPerfEntry);
+       onLCP(onPerfEntry);
+       onTTFB(onPerfEntry);
+     });
+   }
+ };
+
+ export default reportWebVitals;
 
-export default reportWebVitals;

client/webpack.config.js

@@ -76,23 +76,25 @@ module.exports = {
 
   devServer: {
     allowedHosts: [
-      SERVER_HOST,
       'localhost',
+      SERVER_HOST,
     ],
     historyApiFallback: true,
     open: true,
     hot: true,
     host: SERVER_WEB_HOST,
     port: SERVER_WEB_PORT,
-    proxy: {
-      '/api': proxy,
-      '/acc': proxy,
-      '/auth': proxy,
-      '/socket.io': {
+
+    proxy: [
+      {
+        context: [ '/api', '/acc', '/auth', '/images'],
+        target: proxy
+      },
+      {
+      context: ['/socket.io'], 
         target: proxy,
         ws: true
-      },
-      '/images': proxy
-    }
+      }
+    ]
   }
 };