Merge branch 'update_front' into 'master'

Update front

See merge request !3

Backend/package-lock.json

@@ -9,11 +9,14 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@types/cors": "^2.8.17",
         "class-transformer": "^0.5.1",
         "class-validator": "^0.14.1",
+        "cors": "^2.8.5",
         "express": "^4.18.2",
         "reflect-metadata": "^0.2.2",
         "save": "^2.9.0",
+        "save-dev": "^0.0.1-security",
         "ts-node": "^10.9.1",
         "tslib": "^2.6.0",
         "typescript": "^5.1.6",
@@ -259,6 +262,14 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cors": {
+      "version": "2.8.17",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
+      "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/express": {
       "version": "4.17.17",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
@@ -940,6 +951,18 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -2359,6 +2382,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -2887,6 +2918,11 @@
         "mingo": "^6.1.0"
       }
     },
+    "node_modules/save-dev": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/save-dev/-/save-dev-0.0.1-security.tgz",
+      "integrity": "sha512-k6knZTDNK8PKKbIqnvxiOveJinuw2LcQjqDoaorZWP9M5AR2EPsnpDeSbeoZZ0pHr5ze1uoaKdK8NBGQrJ34Uw=="
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",

Backend/package.json

@@ -13,11 +13,14 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@types/cors": "^2.8.17",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
+    "cors": "^2.8.5",
     "express": "^4.18.2",
     "reflect-metadata": "^0.2.2",
     "save": "^2.9.0",
+    "save-dev": "^0.0.1-security",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",

Backend/src/data/products.json

+[
+  {
+    "id": "d2d4a838-64d2-45e1-954b-ac4d744d9497",
+    "title": "test",
+    "description": "adsdasdadadsadad",
+    "price": 500000
+  },
+  {
+    "id": "279e188c-ac70-4186-b3b1-52b9fd721e07",
+    "title": "asasdasd",
+    "description": "asdaddasad",
+    "price": 123123
+  }
+]
\ No newline at end of file

Backend/src/index.ts

@@ -2,10 +2,11 @@ import App from './app';
 import logger from './middlewares/logger';
 import { ArticleRoute } from './routes/article.route';
 import { ProductRoute } from './routes/product.route';
+import cors from 'cors';
 
 const app = new App({
   port: 8000,
-  middlewares: [logger()],
+  middlewares: [logger(), cors()],
   controllers: [new ArticleRoute(), new ProductRoute()],
 });
 

Backend/src/routes/product.route.ts

@@ -3,7 +3,7 @@ import { IRoute } from "@/interfaces/IRoute.interface";
 import { ProductController } from "@/controllers/product.controller";
 
 export class ProductRoute implements IRoute {
-    public path = '/product';
+    public path = '/products';
     public router = Router();
     private controller: ProductController;
 

Backend/yarn.lock

@@ -151,6 +151,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cors@^2.8.17":
+  version "2.8.17"
+  resolved "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz"
+  integrity sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/express-serve-static-core@^4.17.33":
   version "4.17.35"
   resolved "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.35.tgz"
@@ -560,6 +567,14 @@ cookie@0.5.0:
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+cors@^2.8.5:
+  version "2.8.5"
+  resolved "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz"
+  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
+  dependencies:
+    object-assign "^4"
+    vary "^1"
+
 create-require@^1.1.0:
   version "1.1.1"
   resolved "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz"
@@ -1452,6 +1467,11 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
+object-assign@^4:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
 object-inspect@^1.9.0:
   version "1.12.3"
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz"
@@ -1695,6 +1715,11 @@ safe-buffer@5.2.1:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+save-dev@^0.0.1-security:
+  version "0.0.1-security"
+  resolved "https://registry.npmjs.org/save-dev/-/save-dev-0.0.1-security.tgz"
+  integrity sha512-k6knZTDNK8PKKbIqnvxiOveJinuw2LcQjqDoaorZWP9M5AR2EPsnpDeSbeoZZ0pHr5ze1uoaKdK8NBGQrJ34Uw==
+
 save@^2.9.0:
   version "2.9.0"
   resolved "https://registry.npmjs.org/save/-/save-2.9.0.tgz"
@@ -2000,7 +2025,7 @@ validator@^13.9.0:
   resolved "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz"
   integrity sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==
 
-vary@~1.1.2:
+vary@^1, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==

Frontend/.prettierrc

+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "useTabs": false
+}

Frontend/.prettierrc.cjs

-module.exports = {
-  tabWidth: 2,
-  singleQuote: true,
-  trailingComma: 'es5',
-  printWidth: 100,
-  useTabs: false,
-};

Frontend/.vscode/settings.json

@@ -10,11 +10,6 @@
   "[typescriptreact]": {
     "editor.formatOnSave": true
   },
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

Frontend/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",

Frontend/src/App.tsx

-const App = () => (
+import { Container, CssBaseline } from '@mui/material';
+import { Route, Routes } from 'react-router-dom';
+import { AppToolbar } from './components/UI/AppToolbar/AppToolbar';
+import { Products } from './containers/Products/Products';
+import NewProduct from './containers/NewProduct/NewProduct';
+
+function App() {
+  return (
     <>
-    <header>Navbar will go here</header>
-    <main>Main content will go here</main>
+      <CssBaseline />
+
+      <header>
+        <AppToolbar />
+      </header>
+
+      <main>
+        <Container maxWidth="xl" sx={{ mt: 10 }}>
+          <Routes>
+            <Route path="/" element={<Products />} />
+            <Route path="/products/new" element={<NewProduct />} />
+          </Routes>
+        </Container>
+      </main>
     </>
-);
+  );
+}
 
 export default App;

Frontend/src/components/ProductForm/ProductForm.tsx

+import { useState, ChangeEvent, FormEvent } from 'react';
+import { Box, Button, Grid, TextField } from '@mui/material';
+import { ProductData } from '@/containers/NewProduct/NewProduct';
+
+interface State {
+  title: string;
+  price: string;
+  description: string;
+}
+
+interface Props {
+  onSubmit: (data: ProductData) => void;
+}
+
+const ProductForm = ({onSubmit}: Props) => {
+  const [state, setState] = useState<State>({
+    title: '',
+    price: '',
+    description: '',
+  });
+
+  const submitFormHandler = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const newProduct: ProductData = {
+      title: state.title,
+      description: state.description,
+      price: parseInt(state.price),
+    }
+
+    onSubmit(newProduct)
+  };
+
+  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setState((prevState) => {
+      return { ...prevState, [name]: value };
+    });
+  };
+
+  return (
+    <Box component={'form'} autoComplete="off" onSubmit={submitFormHandler} paddingY={2}>
+      <Grid container direction="column" spacing={2}>
+        <Grid item xs>
+          <TextField
+            fullWidth
+            variant="outlined"
+            id="title"
+            label="Title"
+            value={state.title}
+            onChange={inputChangeHandler}
+            name="title"
+          />
+        </Grid>
+
+        <Grid item xs>
+          <TextField
+            fullWidth
+            variant="outlined"
+            id="price"
+            label="Price"
+            value={state.price}
+            onChange={inputChangeHandler}
+            name="price"
+          />
+        </Grid>
+
+        <Grid item xs>
+          <TextField
+            fullWidth
+            multiline
+            rows={3}
+            variant="outlined"
+            id="description"
+            label="Description"
+            value={state.description}
+            onChange={inputChangeHandler}
+            name="description"
+          />
+        </Grid>
+
+        <Grid item xs>
+          <Button type="submit" color="primary" variant="contained">
+            Create
+          </Button>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default ProductForm;

Frontend/src/components/UI/AppToolbar/AppToolbar.tsx

+import { AppBar, Box, Toolbar, Typography, styled } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)(() => ({
+  color: 'inherit',
+  textDecoration: 'none',
+  ['&:hover']: { color: 'inherit' },
+}));
+
+export function AppToolbar() {
+  return (
+    <>
+      <AppBar position="fixed">
+        <Toolbar>
+          <Typography variant="h6" component={StyledLink} to={'/'}>
+            Computer parts shop
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Box component={Toolbar} marginBottom={2} />
+    </>
+  );
+}

Frontend/src/containers/NewProduct/NewProduct.tsx

+import { Typography } from '@mui/material';
+import ProductForm from '../../components/ProductForm/ProductForm';
+import { useNavigate } from 'react-router-dom';
+import { createProduct } from '../../features/productsSlice';
+import { useAppDispatch } from '../../store';
+
+export interface ProductData {
+  title: string;
+  description: string;
+  price: number;
+}
+
+const NewProduct = () => {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+
+  const onProductFormSubmit = async (productData: ProductData) => {
+    await dispatch(createProduct(productData));
+    navigate('/');
+  };
+
+  return (
+    <>
+      <Typography variant="h4">New product</Typography>
+      <ProductForm onSubmit={onProductFormSubmit}/>
+    </>
+  );
+};
+
+export default NewProduct;

Frontend/src/containers/Products/ProductItem.tsx

+import { Link } from 'react-router-dom';
+import {
+  Grid,
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  IconButton,
+  Typography,
+} from '@mui/material';
+import { ArrowForward } from '@mui/icons-material';
+import { IProduct } from '@/interfaces/IProduct';
+
+interface Props {
+  product: IProduct;
+}
+
+export function ProductItem({ product }: Props) {
+  const { title, price, id, description } = product;
+
+  return (
+    <Grid item xs={12} sm={12} md={6} lg={4}>
+      <Card sx={{ minWidth: 275 }}>
+        <CardHeader title={title} />
+
+        <CardContent>
+          <Typography variant="body2">{description}</Typography>
+          <strong style={{ marginLeft: '10px' }}>Price: {price} KZT</strong>
+        </CardContent>
+
+        <CardActions>
+          <IconButton component={Link} to={`/products/${id}`}>
+            <ArrowForward />
+          </IconButton>
+        </CardActions>
+      </Card>
+    </Grid>
+  );
+}

Frontend/src/containers/Products/Products.tsx

+import { Link } from 'react-router-dom';
+import { Typography, Grid, Button } from '@mui/material';
+import { useAppDispatch, useAppSelector } from '../../store';
+import { shallowEqual } from 'react-redux';
+import { useEffect } from 'react';
+import { fetchProducts } from '../../features/productsSlice';
+import { ProductItem } from './ProductItem';
+
+export function Products() {
+  const dispatch = useAppDispatch();
+  const { products } = useAppSelector((state) => state.products, shallowEqual);
+
+  useEffect(() => {
+    dispatch(fetchProducts());
+  }, [dispatch]);
+
+  return (
+    <>
+      <Grid container direction="column" spacing={2}>
+        <Grid item container direction="row" justifyContent="space-between" alignItems="center">
+          <Grid item>
+            <Typography variant="h4">Products</Typography>
+          </Grid>
+
+          <Grid item>
+            <Button color="primary" component={Link} to={'/products/new'}>
+              Add product
+            </Button>
+          </Grid>
+        </Grid>
+      </Grid>
+
+      <Grid item container direction="row" spacing={1}>
+        {products.map((product) => (
+          <ProductItem key={product.id} product={product} />
+        ))}
+      </Grid>
+    </>
+  );
+}

Frontend/src/features/productsSlice.ts

-import { createSlice } from "@reduxjs/toolkit";
+import { axiosApiClient } from '../helpers/axiosApiClient';
+import { IProduct } from '../interfaces/IProduct';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 
-const initialState = {};
+interface State {
+  products: IProduct[];
+  error: Error | null;
+  loading: boolean;
+}
 
-const productsSlice = createSlice(
-  {
+const initialState: State = {
+  products: [],
+  error: null,
+  loading: false,
+};
+
+export const fetchProducts = createAsyncThunk('fetch/products', async () => {
+  return await axiosApiClient.get<IProduct[]>('/products').then((res) => res.data);
+});
+
+export const createProduct = createAsyncThunk('create/products', async (payload: IProduct) => {
+  return await axiosApiClient.post<IProduct>('/products', payload).then((res) => res.data);
+});
+
+const productsSlice = createSlice({
   name: 'products',
   initialState,
   reducers: {},
-  }
-)
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchProducts.fulfilled, (state, action) => {
+        state.products = action.payload;
+        state.loading = false;
+      })
+      .addCase(fetchProducts.rejected, (state, action) => {
+        state.error = action.error as Error;
+        state.loading = false;
+      })
+      .addCase(fetchProducts.pending, (state) => {
+        state.loading = true;
+      });
+  },
+});
 
 export default productsSlice.reducer;

Frontend/src/helpers/axiosApiClient.ts

+import axios from 'axios';
+
+export const axiosApiClient = axios.create({
+  baseURL: 'http://localhost:8000',
+});

Frontend/src/index.css

 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-  sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-  monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
-

Frontend/src/interfaces/IProduct.ts

+export interface IProduct {
+  id?: string;
+  title: string;
+  description: string;
+  price: number;
+}

Frontend/src/store/index.ts

 import { configureStore } from '@reduxjs/toolkit';
 import productsReducer from '../features/productsSlice.ts';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 
 const store = configureStore({
   reducer: {
     products: productsReducer,
-  }
-})
+  },
+});
+
+type RootState = ReturnType<typeof store.getState>;
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
 export default store;

Frontend/tsconfig.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     /* Bundler mode */
@@ -22,14 +18,10 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
-  "include": [
-    "src"
-  ],
+  "include": ["src"],
   "references": [
     {
       "path": "./tsconfig.node.json"

Frontend/vite.config.ts

-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});