added the inbound role to recommendationRds

Shadi38 · Feb 16, 2025 · 7ffd0c9 · 7ffd0c9
1 parent a046348
commit 7ffd0c9
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 66 deletions.
diff --git a/client/.DS_Store b/client/.DS_Store
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
+import { Route, Routes, Link } from "react-router-dom"; // Removed BrowserRouter
 
 import "./App.css";
 import Videos from "./Videos.js";
@@ -13,13 +13,13 @@ function App() {
     const getData = async () => {
       try {
         const response = await fetch(
-          "http://ec2-18-132-98-88.eu-west-2.compute.amazonaws.com:3000/videos"
+           "http://ec2-18-132-98-88.eu-west-2.compute.amazonaws.com:3000/videos"
         );
         if (!response.ok) {
           throw new Error("something went wrong");
         }
         const data = await response.json();
-        //desending acording to the rating
+        //descending according to the rating
         data.sort((a, b) => b.rating - a.rating);
         return setLoadVideo(data);
       } catch (error) {
@@ -44,60 +44,57 @@ function App() {
   }
 
   return (
-    <Router>
-      <div className="App">
-        <header className="appHeader">
-          <h1 style={{ background: "#97CAEF", color: "black" }}>
-            Video Recommendation
-          </h1>
-        </header>
-        <nav className="nav">
-          <div className="orderBtn">
-            <p>order by rate : </p>
-            <button
-              onClick={(e) => orderClickHandler(e, "asc")}
-              disabled={order === "asc"}
-            >
-              Ase
-            </button>
+    <div className="App">
+      <header className="appHeader">
+        <h1 style={{ background: "#97CAEF", color: "black" }}>
+          Video Recommendation
+        </h1>
+      </header>
+      <nav className="nav">
+        <div className="orderBtn">
+          <p>order by rate : </p>
+          <button
+            onClick={(e) => orderClickHandler(e, "asc")}
+            disabled={order === "asc"}
+          >
+            Ase
+          </button>
 
-            <button
-              onClick={(e) => orderClickHandler(e, "desc")}
-              disabled={order === "desc"}
-            >
-              Desc
-            </button>
-          </div>
-          <div style={{ backgroundColor: "#55BCC9" }}></div>
-          <Link
-            to="/videos"
-            style={{
-              color: "#FC4445",
-              marginLeft: 20,
-              textDecoration: "none",
-              fontWeight: "bold",
-            }}
-            onClick={() => setShowVideos(true)}
+          <button
+            onClick={(e) => orderClickHandler(e, "desc")}
+            disabled={order === "desc"}
           >
-            Videos
-          </Link>
-        </nav>
-        <Routes>
-          {" "}
-          <Route
-            path="/videos"
-            element={
-              <Videos
-                show={showVideos}
-                setShow={setShowVideos}
-                loadVideo={loadVideo}
-                setLoadVideo={setLoadVideo}
-              />
-            }
-          />
-        </Routes>
-      </div>
-    </Router>
+            Desc
+          </button>
+        </div>
+        <div style={{ backgroundColor: "#55BCC9" }}></div>
+        <Link
+          to="/videos"
+          style={{
+            color: "#FC4445",
+            marginLeft: 20,
+            textDecoration: "none",
+            fontWeight: "bold",
+          }}
+          onClick={() => setShowVideos(true)}
+        >
+          Videos
+        </Link>
+      </nav>
+      <Routes>
+        <Route
+          path="/videos"
+          element={
+            <Videos
+              show={showVideos}
+              setShow={setShowVideos}
+              loadVideo={loadVideo}
+              setLoadVideo={setLoadVideo}
+            />
+          }
+        />
+      </Routes>
+    </div>
   );
 }
 

diff --git a/client/src/Videos.js b/client/src/Videos.js
@@ -18,7 +18,7 @@ function App() {
     const getData = async () => {
       try {
         const response = await fetch(
-          "http://ec2-18-132-98-88.eu-west-2.compute.amazonaws.com:3000/videos"
+           "http://ec2-18-132-98-88.eu-west-2.compute.amazonaws.com:3000/videos"
         );
         if (!response.ok) {
           throw new Error("something went wrong");

diff --git a/client/src/index.js b/client/src/index.js
@@ -1,13 +1,25 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
-import "bootstrap/dist/css/bootstrap.min.css";
+// import React from "react";
+// import ReactDOM from "react-dom";
+// import "./index.css";
+// import App from "./App";
+// import "bootstrap/dist/css/bootstrap.min.css";
 
 
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <App />
+//   </React.StrictMode>,
+//   document.getElementById("root")
+// );
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import { BrowserRouter } from 'react-router-dom';
+
 ReactDOM.render(
-  <React.StrictMode>
+  <BrowserRouter> {/* Wrapping App component with BrowserRouter */}
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </BrowserRouter>,
+  document.getElementById('root')
 );
diff --git a/infrastructure/resources.tf b/infrastructure/resources.tf
@@ -166,6 +166,12 @@ resource "aws_security_group" "recommendationRds" {
     protocol        = "tcp"
     security_groups = [aws_security_group.recommendationEc2.id] # Allow access from EC2 security group
   }
+  ingress {
+    from_port       = 5432
+    to_port         = 5432
+    protocol        = "tcp"
+    security_groups = ["0.0.0.0/0"]
+  }
 
   ingress {
     from_port   = 22
@@ -205,7 +211,7 @@ resource "aws_db_instance" "default" {
   username               = "postgres"
   password               = var.db_password
   publicly_accessible    = true
-  vpc_security_group_ids = [aws_security_group.recommendationRds.id] 
+  vpc_security_group_ids = [aws_security_group.recommendationRds.id]
   skip_final_snapshot    = true
   multi_az               = false
   tags = {

diff --git a/server/server.js b/server/server.js
@@ -2,7 +2,7 @@ const express = require("express");
 const app = express();
 const cors = require("cors");
 const corsOptions = {
-  origin: "http://reccomendationsh.s3-website.eu-west-2.amazonaws.com",
+   origin: "http://reccomendationsh.s3-website.eu-west-2.amazonaws.com",
 };
 app.use(cors(corsOptions));
 require("dotenv").config(); // Load environment variables from .env file
@@ -40,6 +40,7 @@ app.get("/videos", async function (req, res) {
     }
     res.json(result.rows);
   } catch (error) {
+
     console.error("Error fetching videos:", error); // Log error for debugging
     return res.status(500).json({ error: "Internal server error", details: error.message });
   }