Merge branch 'ISUCT:master' into master

Author: HaQmUser

onlineshop/.env

@@ -4,4 +4,8 @@ NODE_ENV=development
 SERVER_HOST=localhost
 SERVER_PORT=3000
 SERVER_WEB_HOST=localhost
-SERVER_WEB_PORT=4000
+SERVER_WEB_PORT=4000
+DB_USER=postgres
+DB_PASSWORD=postgres
+DB_PORT=5432
+DB_NAME=sample

onlineshop/docker-compose.yaml

@@ -9,7 +9,7 @@ services:
       - POSTGRES_PASSWORD=${DB_PASSWORD}
       - POSTGRES_DB=${DB_NAME}
     volumes:
-      - ./pgdata:/var/lib/postgresql/data
+      - sample:/var/lib/postgresql/data
     ports:
       - "${DB_PORT}:5432"
 
@@ -20,5 +20,33 @@ services:
     - "8000:8080"
     links:
       - db
+  server:
+    env_file: .env
+    build: 
+      context: ./source/server/
+      dockerfile: ./Dockerfile
+    image: isuct/web-app:server
+    environment:
+      - SOME_VAR=my_var
+    ports:
+      - 3000:3000
+    depends_on:
+      - db
 
+  client:
+    env_file: .env
+    build: 
+      context: ./source/client/
+      dockerfile: ./Dockerfile
+    image: isuct/web-app:client
+    environment:
+      - SOME_VAR=another_var
+    volumes:
+      - ./source/client/nginx.conf:/etc/nginx/nginx.conf
+    ports:
+      - 8082:80
+    depends_on:
+      - server
 
+volumes:
+  sample:

onlineshop/source/client/.dockerignore

@@ -0,0 +1,4 @@
+**/README.md
+**/node_modules/
+**/test/
+.git

onlineshop/source/client/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:20.19.1-alpine as build
+WORKDIR /app
+COPY ./package.json ./
+COPY ./yarn.lock ./
+RUN yarn
+COPY ./ ./
+# ENV NODE_ENV="production"
+RUN yarn run build
+# ------
+FROM nginx:alpine
+
+COPY --from=build /app/dist/ /usr/share/nginx/html
+COPY ./nginx.conf /etc/nginx/nginx.conf
+
+CMD ["nginx", "-g", "daemon off;"]

onlineshop/source/client/nginx.conf

@@ -0,0 +1,50 @@
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    log_format compression '$remote_addr - $remote_user [$time_local] '
+        '"$request" $status $upstream_addr '
+'"$http_referer" "$http_user_agent" "$gzip_ratio"';
+
+    sendfile        on;
+    keepalive_timeout  165;
+    gzip  on;
+
+
+    server {
+        listen * default_server;
+        # server_name it.isuct.ru oldit.isuct.ru;
+
+        client_max_body_size 25m;
+
+        location /api/ {
+                proxy_pass http://server:3000/api/;
+                proxy_http_version 1.1;
+                proxy_set_header Upgrade $http_upgrade;
+                proxy_set_header Connection 'upgrade';
+                proxy_set_header Host $host;
+                proxy_cache_bypass $http_upgrade;
+        }
+
+        location / {
+            root   /usr/share/nginx/html;
+            index  index.html index.htm;
+            try_files $uri /index.html;
+                    }
+        #error_page  404              /404.html;
+
+        # redirect server error pages to the static page /50x.html
+        #
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   html;
+        }
+    }
+}

onlineshop/source/client/src/App.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 
 import './App.css';
+import First from './components/first';
+import DogList from './components/dogList';
 
 const App: React.FC = () => (
-  <div className="App">
-    <header className="App-header">
-      <p>
-        Edit <code>src/App.tsx</code> and save to reload.
-      </p>
-      <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
-        Learn React
-      </a>
-    </header>
-  </div>
+    <>
+        <h1>Hello World!</h1>
+        <h2>Hello</h2>
+        <First />
+        <DogList />
+    </>
 );
 
 export default App;

onlineshop/source/client/src/components/dogItem.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Dog } from './dogList'
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+
+
+interface IProps {
+    dog: Dog
+}
+
+const  updateDog = async (dog: Dog) => {
+  let method = "POST";
+  let url = "/api/dogs/";
+  if (dog.id !== 0) {
+    method = "PUT";
+    url += `${dog.id}`;
+  }
+  return await fetch(url,{
+         method: method, // *GET, POST, PUT, DELETE, etc.
+    headers: {
+      "Content-Type": "application/json",
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: JSON.stringify(dog), // body data type must match "Content-Type" header
+  });
+ }
+
+export default function DogItem(props: IProps) {
+    const [name, setName] = React.useState<string>(props.dog.name);
+
+    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setName(event.target.value)
+    }
+    return (
+        <div>
+            <h1>Dog:</h1>
+            <TextField
+                id="standard-basic"
+                label="Name"
+                variant="standard"
+                value={name}
+                onChange={onChange}
+            />
+            <h4>Age: {props.dog.age}</h4>
+            <Button variant="contained" color="success" onClick={() => updateDog({...props.dog, name: name})}>
+                Сохранить
+            </Button>
+        </div>
+    )
+}

onlineshop/source/client/src/components/dogList.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import DogItem from './dogItem';
+import { create } from 'domain';
+import Button from '@mui/material/Button';
+
+export interface Dog {
+    id: number,
+    name: string,
+    age: number
+}
+
+const getDogs = async (): Promise<Dog[]> => {
+    const data = await fetch('/api/dogs')
+    return await data.json();
+    // const dogs = [{ name: "Bob", age: 1 }, { name: "Alice", age: 2 }, { name: "Charlie", age: 3 }]
+    // return new Promise((resolve) => setTimeout(() => resolve(dogs), 5000));
+}
+
+
+export default function DogList() {
+    const [dogs, setDogs] = React.useState<Dog[]>([]);
+
+    const createDog = async () => {
+        setDogs([...dogs, { id: 0, name: "", age: 0 }]);
+    }
+
+    React.useEffect(() => {
+        let isMounted = true;
+        const fetchDogs = async () => {
+            console.log("fetching");
+            const dogs = await getDogs();
+            if (!isMounted) return;
+            setDogs(dogs);
+        }
+        fetchDogs();
+        return () => {
+            isMounted = false;
+        }
+    }, []);
+    return (
+        <div>
+            <h1>Dog List</h1>
+            <Button variant="contained" color="success" onClick={createDog}>
+                Добавить
+            </Button>
+            {
+                dogs.map((dog, index) => <DogItem dog={dog} key={dog.id} />)
+            }
+        </div>
+    )
+}

onlineshop/source/client/src/components/first.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Button from '@mui/material/Button';
+
+export default function First() {
+    const [count, setCount] = React.useState(0);
+
+    const handleClick = () => { 
+        setCount(count + 1);
+        console.log(`Clicked ${count}`) 
+    };
+    return (
+        <div>
+            <h2>Click count: {count}</h2>
+            <Button variant="contained" onClick={handleClick}>Contained</Button>
+        </div>
+    )
+}

onlineshop/source/server/.dockerignore

@@ -0,0 +1,4 @@
+**/README.md
+**/node_modules/
+**/test/
+.git