Added docker and frontend

Author: jskonst

onlineshop/docker-compose.yaml

@@ -20,6 +20,18 @@ 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
 
 volumes:
   sample:

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

onlineshop/source/server/Dockerfile

@@ -0,0 +1,8 @@
+FROM node:20.19.1-alpine
+WORKDIR /app
+RUN corepack enable
+COPY ./package.json ./
+COPY ./yarn.lock ./
+RUN yarn
+COPY ./ ./
+ENTRYPOINT yarn run start:dev

onlineshop/source/server/package.json

@@ -14,7 +14,7 @@
     "start": "nest start",
     "start:dev": "nest start --watch",
     "start:debug": "nest start --debug --watch",
-    "start:prod": "node dist/main",
+    "start:prod": "node dist/src/main.js",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\"",
     "lint:fix": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",

onlineshop/source/server/src/app.module.ts

@@ -11,7 +11,7 @@ import { Dog } from './dogs/entities/dog.entity';
   imports: [
     TypeOrmModule.forRoot({
       type: 'postgres',
-      host: 'localhost',
+      host: 'db',
       port: 5432,
       username: 'postgres',
       password: 'postgres',

onlineshop/source/server/src/cats/cats.controller.ts

@@ -1,4 +1,13 @@
-import { Controller, Get, Post, Body, Patch, Param, Delete, NotFoundException } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Body,
+  Patch,
+  Param,
+  Delete,
+  NotFoundException,
+} from '@nestjs/common';
 import { CatsService } from './cats.service';
 import { CreateCatDto } from './dto/create-cat.dto';
 import { UpdateCatDto } from './dto/update-cat.dto';
@@ -21,7 +30,7 @@ export class CatsController {
   findOne(@Param('id') id: string) {
     const cat = this.catsService.findOne(+id);
     if (cat) {
-        return cat
+      return cat;
     }
     throw new NotFoundException(`cat with id: ${id} was not found`);
   }