finished project

Author: RodrigoTadeuF

mobile/src/pages/Detail/index.tsx

@@ -14,6 +14,7 @@ interface Params {
 interface Data {
   point: {
     image: string;
+    image_url: string;
     name: string;
     email: string;
     whatsapp: string;
@@ -72,7 +73,7 @@ const Detail: React.FC = () => {
         <Image
           style={styles.pointImage}
           source={{
-            uri: data.point.image,
+            uri: data.point.image_url,
           }}
         />
 

mobile/src/pages/Points/index.tsx

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

server/package-lock.json

@@ -12,14 +12,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "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/hapi__joi": "^17.1.2",
+    "@types/multer": "^1.4.3",
     "ts-node": "^8.10.2",
     "ts-node-dev": "^1.0.0-pre.44",
     "typescript": "^3.9.3"

server/package.json

@@ -0,0 +1,16 @@
+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/config/multer.ts

@@ -17,6 +17,13 @@ class PointsController {
     .distinct()
     .select('points.*');
 
+    const serializedPoints = points.map(point => {
+      return { 
+        ...point,
+        image_url: `http://192.168.15.53:3333/uploads/${point.image}`,
+      };
+    });
+
     return response.json(points);
   }
 
@@ -29,12 +36,17 @@ class PointsController {
       return response.status(400).json({ message: 'Point not found.'});
     }
 
+    const serializedPoint =  {
+        ...point,
+        image_url: `http://192.168.15.53:3333/uploads/${point.image}`,
+    };
+
     const items = await knex('items')
       .join('point_items', 'items.id', '=', 'point_items.item_id')
       .where('point_items.point_id', id)
       .select('items.title');
 
-    return response.json({ point, items });
+    return response.json({ point: serializedPoint, items });
 
   }
 
@@ -53,7 +65,7 @@ class PointsController {
     const trx = await knex.transaction();
 
     const point = {
-      image: 'https://images.unsplash.com/photo-1556767576-5ec41e3239ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60',
+      image: request.file.filename,
       name,
       email,
       whatsapp,
@@ -67,7 +79,10 @@ class PointsController {
 
     const point_id = insertedIds[0];
 
-    const pointItems = items.map((item_id: number) => {
+    const pointItems = items
+      .split(',')
+      .map((item: string) => Number(item.trim()))
+      .map((item_id: number) => {
       return {
         item_id,
         point_id,