axios added

backend/.env

@@ -1,2 +1,2 @@
 PORT = 5000
-MONGODB_CONNECTION_URL = "mongodb+srv://luxshan:[email protected]/items?retryWrites=true&w=majority"
+MONGODB_CONNECTION_URL = "mongodb+srv://luxshan:[email protected]/aws-pipeline?retryWrites=true&w=majority"

backend/server.js

@@ -2,26 +2,25 @@ const express = require("express")
 const cors = require("cors")
 const bodyParser = require("body-parser")
 
-
 const connectMongoDb = require("./config/database")
-// const addRoutes = require('./src/routes/addRoutes');
-// const getRoutes = require('./src/routes/getRoutes');
+const getRoutes = require('./src/routes/getRoutes')
+const addRoutes = require('./src/routes/addRoutes')
 
 const app = express()
 const PORT = process.env.PORT || 5000
 
 app.use(cors({
-  origin:["*"],//"exp://192.168.8.182:8081"
-  methods:["GET"],
+  origin:["*", "http://51.20.93.112:3000"],//"exp://192.168.8.182:8081"
+  methods:["GET","POST"],
   credentials:true
 }))  
 
 app.use(bodyParser.json())
 
 
 // app.use('/api/add', addRoutes); 
-// app.use('/api/get', getRoutes); 
-
+app.use('/api/get', getRoutes); 
+app.use('/api/add', addRoutes); 
 
 
 connectMongoDb()

backend/src/controllers/addData.js

@@ -0,0 +1,21 @@
+const Item = require('../modals/Item')
+
+
+
+exports.addItem = async (req,res) =>{
+    try{
+
+        const { name } =  req.body
+
+        const newItem = new Item({ name})
+        await newItem.save()
+
+
+        console.log("Successfully meal added!")
+
+
+
+    } catch(error){
+        console.log("There is an error occured in addMeal!")
+    }
+}

backend/src/controllers/getData.js

@@ -0,0 +1,13 @@
+const Item = require('../modals/Item')
+
+
+exports.getAllItem = async (req,res)=>{
+
+    try{
+        const   items = await Item.find({});
+        res.json(items)
+    }catch(err){
+        res.json(err)
+    }
+
+}

backend/src/modals/Item.js

@@ -0,0 +1,11 @@
+const mongoose = require("mongoose")
+
+
+const Item = mongoose.model("items",{
+    name:{
+        type:String,
+        required:true
+    }
+});
+
+module.exports = Item;

backend/src/routes/addRoutes.js

@@ -0,0 +1,9 @@
+const express = require('express');
+const router = express.Router();
+const addData = require('../controllers/addData');
+
+
+router.get('/items', addData.addItem)
+
+
+module.exports = router;

backend/src/routes/getRoutes.js

@@ -0,0 +1,9 @@
+const express = require('express');
+const router = express.Router();
+const getData = require('../controllers/getData');
+
+
+router.get('/items', getData.getAllItem)
+
+
+module.exports = router;

frontend/src/App.js

@@ -1,8 +1,23 @@
 import './App.css';
 import AddItems from './components/AddItems';
 import SeeItems from './components/SeeItems';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
 
 function App() {
+  const [items, setItems] = useState([])
+
+  useEffect(()=>{
+      axios.get("http://51.20.93.112:5000/api/get/items").then(response => {
+
+      setItems(response.data)
+    })
+    .catch(error => {
+      // Handle any errors here
+      console.log('Error:');
+    });
+  },[])
+
   return (
     <div className="App">
       <h1>This is an Demo Project for CICD Pipeline</h1>
@@ -11,7 +26,7 @@ function App() {
       <hr/>
 
       <AddItems />
-      <SeeItems />
+      <SeeItems items={items} />
     </div>
   );
 }

frontend/src/components/SeeItems.js

@@ -1,23 +1,21 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 
-const dummy = ["Apple", "Orange", "Car"]
 
 
-function SeeItems() {
-    const [items, setItems] = useState([])
 
-    useEffect(()=>{
-        setItems(dummy)
-    })
+function SeeItems({items}) {
+
+
+
 
     if(!items){
         return <h1>Loading.....</h1>
     }
   return (
     <div>
         {items.map((item)=>(
-                <h6>{item}</h6>
+                <h6 key={item._id}>{item.name}</h6>
         ))}
     </div>
   )