JRMP2-1 Show product card

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+prod
+coverage

.eslintrc.json

@@ -0,0 +1,18 @@
+{
+    "env": {
+        "browser": true
+    },
+    "extends": [
+      "@mate-academy/eslint-config"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

.gitignore

@@ -40,6 +40,7 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
+frontend/prod/*.js
 
 # TypeScript v1 declaration files
 typings/

backend/dev/app.ts

@@ -1,11 +1,15 @@
-import express from "express";
+import cors from 'cors';
+import express from 'express';
 import { router } from './router.js';
 
 const app = express();
-let port:number = process.env.PORT === undefined ? 4200 : +process.env.PORT;
 
+const defaultPort:number = parseInt(process.env.PORT || '');
+const port:number = defaultPort || 5500;
+
+app.use(cors());
 app.use('/', router);
 
 app.listen(port, () => {
-  console.log(`App is working at http://localhost:${port}.`)
-});
+  console.log(`App is working at http://localhost:${port}`);
+});

backend/dev/controller.ts

@@ -1,6 +1,79 @@
 import { Model } from './model.js';
+
 const model = new Model();
 
-console.log('Controller is working.');
+export interface ResponseObj {
+  statusCode: number,
+  result: object[]
+}
+
+export class Controller {
+  maxPage: number;
+  itemsPerPage: number;
+
+  constructor() {
+    this.itemsPerPage = 5;
+    this.maxPage = 0;
+    this.setMaxPage();
+  };
+
+  async getAllItems(): Promise<ResponseObj> {
+    const response: ResponseObj = {
+      statusCode: 200,
+      result: [],
+    };
+
+    response.result = await model.getList();
+
+    if (!Array.isArray(response.result)) {
+      response.statusCode = 500;
+    }
+
+    if (response.result.length === 0) {
+      response.statusCode = 204;
+    }
+
+    return response;
+  }
+
+  async getItems(req: string):Promise<ResponseObj> {
+    const response: ResponseObj = {
+      statusCode: 200,
+      result: [],
+    };
+
+    let list: object[] = (await this.getAllItems()).result;
+    const page: number = parseInt(req);
+
+    if (this.pageIsNotValid(page)) {
+      response.statusCode = 400;
+
+      return response;
+    }
+
+    list = list.splice(((page - 1) * this.itemsPerPage), this.itemsPerPage);
+    response.result = list.filter(item => item !== undefined);
+
+    return response;
+  }
+
+  async setMaxPage(): Promise<void> {
+    const list: object[] = (await this.getAllItems()).result;
+
+    this.maxPage = Math.ceil(list.length / this.itemsPerPage);
+  }
+
+  checkIfPageExists(req: string): boolean {
+    const page:number = parseInt(req);
+
+    if (this.pageIsNotValid(page)) {
+      return false;
+    } else {
+      return true;
+    }
+  }
 
-export class Controller {}
+  pageIsNotValid(page: number): boolean {
+    return isNaN(page) || page < 1 || page > this.maxPage;
+  }
+}

backend/dev/model.ts

@@ -1,21 +1,17 @@
 import { promises as fsp } from 'fs';
 
-console.log('Model is working.');
+interface DatabaseModel {
+  getList(): Promise<object[]>;
+}
 
-export class Model {
-  constructor() {
-    this.testDatabase();
-  }
-
-  async testDatabase() {
+export class Model implements DatabaseModel {
+  async getList() {
     try {
       const database = await fsp.readFile('./backend/prod/db.json');
 
-      console.log(JSON.parse(database.toString()));
-      console.log('Database is working.');
+      return JSON.parse(database.toString()).list;
     } catch (error) {
-      console.log(error);
-      console.log('!!! Database is NOT working. !!!');
+      console.error(`Not able to receive data from database. ${error}`);
     }
   }
-}
+}

backend/dev/router.ts

@@ -1,14 +1,25 @@
 import Router from 'express';
-import { Controller } from './controller.js';
+import { Controller, ResponseObj } from './controller.js';
 
 const router = Router();
 const controller = new Controller();
 
-console.log('Router is working.');
+router.get('/api/sneakers', async(req, res) => {
+  const response: ResponseObj = await controller.getAllItems();
 
-router.get('/', (req: any, res: any) => {
-    res.send('Server is working.');
-  }
-);
+  res.status(response.statusCode).send(response.result);
+});
 
-export { router };
+router.get('/api/sneakers/:page', async(req, res) => {
+  const response: ResponseObj = await controller.getItems(req.params.page);
+
+  res.status(response.statusCode).send(response.result);
+});
+
+router.get('/api/sneakers/check/:_page', async(req, res) => {
+  const exists: boolean = controller.checkIfPageExists(req.params._page);
+
+  res.status(200).send({ 'exists': exists });
+});
+
+export { router };

backend/prod/db.json

@@ -1,24 +1,142 @@
 {
   "list": [
     {
-      "id": 0,
-      "name": "Item 0"
+      "name": "SLICER Light Coral",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1950,
+      "url": "https://github.com/exORYON/db/blob/main/119905085_323766932189419_4890343778692013862_n.jpg?raw=true"
     },
     {
-      "id": 1,
-      "name": "Item 1"
+      "name": "SLICER Titanium White",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1780,
+      "url": "https://github.com/exORYON/db/blob/main/120139455_115813640270969_2930161371286048021_n.jpg?raw=true"
     },
     {
-      "id": 2,
-      "name": "Item 2"
+      "name": "SLICER Black and White",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1990,
+      "url": "https://github.com/exORYON/db/blob/main/121235325_126877025548567_2222252721004759005_n.jpg?raw=true"
     },
     {
-      "id": 3,
-      "name": "Item 3"
+      "name": "SLICER Night",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1680,
+      "url": "https://github.com/exORYON/db/blob/main/123341033_274418847267096_9129209827290048632_n.jpg?raw=true"
     },
     {
-      "id": 4,
-      "name": "Item 4"
+      "name": "SLICER Bloody",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1999,
+      "url": "https://github.com/exORYON/db/blob/main/123403794_481755306065916_2801586288664686810_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Marine",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1500,
+      "url": "https://github.com/exORYON/db/blob/main/139852253_224291332519618_4265951042297070639_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Sneaky",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1499,
+      "url": "https://github.com/exORYON/db/blob/main/140370870_692321638119443_8194939502407238248_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Orbit-8",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1888,
+      "url": "https://github.com/exORYON/db/blob/main/141559958_867221300722438_7622904942041361159_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Drago",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1660,
+      "url": "https://github.com/exORYON/db/blob/main/131005842_382355842870688_2770087515132979497_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER White wolf",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 2199,
+      "url": "https://github.com/exORYON/db/blob/main/151387926_824830294738184_1265848908326283482_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Platinum",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 2000,
+      "url": "https://github.com/exORYON/db/blob/main/155499128_5197245506983789_8014452392662128956_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Gray Cloud",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1600,
+      "url": "https://github.com/exORYON/db/blob/main/121191948_383679462630941_3968448522456868699_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Vampire Gray",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1999,
+      "url": "https://github.com/exORYON/db/blob/main/160964331_286760039465375_4247176901054224023_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Black-X",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1800,
+      "url": "https://github.com/exORYON/db/blob/main/166251811_5159735014097212_7214717108794192230_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Slime",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1820,
+      "url": "https://github.com/exORYON/db/blob/main/169871320_458483692048571_6586004615848378570_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Trippie",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1780,
+      "url": "https://github.com/exORYON/db/blob/main/169885763_3971524352964830_3485694905555748694_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER White arrow",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1990,
+      "url": "https://github.com/exORYON/db/blob/main/170245210_139617121498587_9041741663206995882_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Wind",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 2220,
+      "url": "https://github.com/exORYON/db/blob/main/173098415_205665784369641_7395172627539371692_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Tangerine",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1770,
+      "url": "https://github.com/exORYON/db/blob/main/173212893_916892635540507_9071070730753087811_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Latte",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1999,
+      "url": "https://github.com/exORYON/db/blob/main/174067225_482599662867390_6427289361886396239_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Pink sugar",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1700,
+      "url": "https://github.com/exORYON/db/blob/main/175621456_1596487333880029_5209184562046024916_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Fire",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1860,
+      "url": "https://github.com/exORYON/db/blob/main/176262130_964991224237833_7678617603530331333_n.jpg?raw=true"
+    },
+    {
+      "name": "SLICER Grey Sand",
+      "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis dictum neque, at tincidunt eros convallis quis. Donec ultricies sapien in lobortis pretium. Sed suscipit ipsum dolor, at pellentesque metus auctor quis. Suspendisse rhoncus ultricies mi, nec pharetra turpis tincidunt et.",
+      "price": 1499,
+      "url": "https://github.com/exORYON/db/blob/main/176733894_832952043987991_1063118205796755369_n.jpg?raw=true"
     }
   ]
 }