dia 5 - a milha extra

Author: tgmarinho

mobile/src/pages/Detail/index.tsx

@@ -28,6 +28,7 @@ interface Data {
     whatsapp: string;
     city: string;
     uf: string;
+    image_url: string;
   };
   items: { title: string }[];
 }
@@ -73,7 +74,7 @@ const Detail = () => {
         <Image
           style={styles.pointImage}
           source={{
-            uri: data.point.image,
+            uri: data.point.image_url,
           }}
         />
 

mobile/src/pages/Points/index.tsx

@@ -29,6 +29,7 @@ interface Point {
   image: string;
   latitude: number;
   longitude: number;
+  image_url: string;
 }
 
 interface Params {
@@ -144,7 +145,7 @@ const Points = () => {
                     <Image
                       style={styles.mapMarkerImage}
                       source={{
-                        uri: point.image,
+                        uri: point.image_url,
                       }}
                     />
                     <Text style={styles.mapMarkerTitle}>{point.name}</Text>

server/package.json

@@ -12,14 +12,18 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@types/hapi__joi": "^17.1.2",
+    "celebrate": "^12.1.1",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "knex": "^0.21.1",
+    "multer": "^1.4.2",
     "sqlite3": "^4.2.0"
   },
   "devDependencies": {
     "@types/cors": "^2.8.6",
     "@types/express": "^4.17.6",
+    "@types/multer": "^1.4.3",
     "ts-node": "^8.10.2",
     "ts-node-dev": "^1.0.0-pre.44",
     "typescript": "^3.9.3"

server/src/config/multer.ts

@@ -0,0 +1,14 @@
+import multer from "multer";
+import path from "path";
+import crypto from "crypto";
+
+export default {
+  storage: multer.diskStorage({
+    destination: path.resolve(__dirname, "..", "..", "uploads"),
+    filename(request, file, callback) {
+      const hash = crypto.randomBytes(6).toString("hex");
+      const filename = `${hash}-${file.originalname}`;
+      callback(null, filename);
+    },
+  }),
+};

server/src/controllers/PointsController.ts

@@ -1,40 +1,52 @@
-import { Request, Response } from 'express';
-import knex from '../database/connection';
+import { Request, Response } from "express";
+import knex from "../database/connection";
 
 class PointsController {
   async index(request: Request, response: Response) {
     const { city, uf, items } = request.query;
 
     const parsedItems = String(items)
-      .split(',')
+      .split(",")
       .map((item) => Number(item.trim()));
 
-    const points = await knex('points')
-      .join('point_items', 'points.id', '=', 'point_items.point_id')
-      .whereIn('point_items.item_id', parsedItems)
-      .where('city', String(city))
-      .where('uf', String(uf))
+    const points = await knex("points")
+      .join("point_items", "points.id", "=", "point_items.point_id")
+      .whereIn("point_items.item_id", parsedItems)
+      .where("city", String(city))
+      .where("uf", String(uf))
       .distinct()
-      .select('points.*');
+      .select("points.*");
 
-    return response.json(points);
+    const serializedPoints = points.map((item) => {
+      return {
+        ...points,
+        image_url: `http://192.168.0.13:3333/uploads/${item.image}`,
+      };
+    });
+
+    return response.json(serializedPoints);
   }
 
   async show(request: Request, response: Response) {
     const { id } = request.params;
 
-    const point = await knex('points').where('id', id).first();
+    const point = await knex("points").where("id", id).first();
 
     if (!point) {
-      return response.status(400).json({ message: 'Point not found.' });
+      return response.status(400).json({ message: "Point not found." });
     }
 
-    const items = await knex('items')
-      .join('point_items', 'items.id', '=', 'point_items.item_id')
-      .where('point_items.point_id', id)
-      .select('items.title');
+    const items = await knex("items")
+      .join("point_items", "items.id", "=", "point_items.item_id")
+      .where("point_items.point_id", id)
+      .select("items.title");
+
+    const serializedPoint = {
+      ...point,
+      image_url: `http://192.168.0.13:3333/uploads/${point.image}`,
+    };
 
-    return response.json({ point, items });
+    return response.json({ point: serializedPoint, items });
   }
 
   async create(request: Request, response: Response) {
@@ -49,11 +61,12 @@ class PointsController {
       items,
     } = request.body;
 
+    console.log(request.body);
+
     const trx = await knex.transaction();
 
     const point = {
-      image:
-        'https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60',
+      image: request.file.filename,
       name,
       email,
       whatsapp,
@@ -63,18 +76,21 @@ class PointsController {
       uf,
     };
 
-    const insertedIds = await trx('points').insert(point);
+    const insertedIds = await trx("points").insert(point);
 
     const point_id = insertedIds[0];
 
-    const pointItems = items.map((item_id: number) => {
-      return {
-        item_id,
-        point_id,
-      };
-    });
-
-    await trx('point_items').insert(pointItems);
+    const pointItems = items
+      .split(",")
+      .map((item: string) => Number(item.trim()))
+      .map((item_id: number) => {
+        return {
+          item_id,
+          point_id,
+        };
+      });
+
+    await trx("point_items").insert(pointItems);
 
     await trx.commit();
 

server/src/database/database.sqlite

@@ -1,18 +1,43 @@
-import express from 'express'
-
-import PointsController from './controllers/PointsController';
-import ItemsController from './controllers/ItemsController';
+import express from "express";
+import { celebrate, Joi } from "celebrate";
+import multer from "multer";
+import multerConfig from "./config/multer";
+import PointsController from "./controllers/PointsController";
+import ItemsController from "./controllers/ItemsController";
 
 const routes = express();
+const upload = multer(multerConfig);
 
 const pointsController = new PointsController();
-const itemsController = new ItemsController()
+const itemsController = new ItemsController();
 
-routes.get('/items', itemsController.index)
+/** Items */
+routes.get("/items", itemsController.index);
 
+/** Points */
+routes.get("/points", pointsController.index);
+routes.get("/points/:id", pointsController.show);
 
-routes.post('/points', pointsController.create);
-routes.get('/points', pointsController.index)
-routes.get('/points/:id', pointsController.show);
+/** Create Point */
+routes.post(
+  "/points",
+  upload.single("image"),
+  celebrate(
+    {
+      body: Joi.object().keys({
+        name: Joi.string().required(),
+        email: Joi.string().required().email(),
+        whatsapp: Joi.number().required(),
+        latitude: Joi.number().required(),
+        longitude: Joi.number().required(),
+        city: Joi.string().required(),
+        uf: Joi.string().required().max(2),
+        items: Joi.string().required(),
+      }),
+    },
+    { abortEarly: false }
+  ),
+  pointsController.create
+);
 
 export default routes;

server/src/routes.ts

@@ -1,14 +1,17 @@
-import express from 'express';
-import routes from './routes';
-import path from 'path'
-import cors from 'cors';
+import express from "express";
+import routes from "./routes";
+import path from "path";
+import cors from "cors";
+import { errors } from "celebrate";
 
-const app = express()
+const app = express();
 
 app.use(cors());
-app.use(express.json())
+app.use(express.json());
 app.use(routes);
 
-app.use('/uploads', express.static(path.resolve(__dirname, '..', 'uploads')))
+app.use("/uploads", express.static(path.resolve(__dirname, "..", "uploads")));
 
-app.listen(3333)
+app.use(errors());
+
+app.listen(3333);