NW5 Manchester - Doris Siu - SQL - Week 1

.github/workflows/ frontend-s3-deploy.yml

@@ -0,0 +1,30 @@
+name: Frontend deployments to S3
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "client/**"
+defaults:
+  run:
+    working-directory: ./client
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Setup NodeJS
+        uses: actions/setup-node@v2
+      - name: Install Dependencies
+        run: npm install
+      - name: Build Frontend
+        run: npm run build
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{secrets.AWS_ACCESS_KEY_ID}}
+          aws-secret-access-key: ${{secrets.AWS_SECRET_KEY}}
+          aws-region: eu-west-2
+      - name: Sync build folder to S3 bucket
+        run: aws s3 sync ./build s3://doris-video-recommendation-app

.github/workflows/backend-ec2-deploy.yml

@@ -0,0 +1,27 @@
+name: Backend deployments to EC2
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "server/**"
+defaults:
+  run:
+    working-directory: ./server
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Add SSH key to agent
+        run: |
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > backend-ec2.pem
+          chmod 400 backend-ec2.pem
+
+      - name: SSH into EC2 instance and deploy 
+        run: | 
+          cat backend-ec2.pem
+          ssh -i backend-ec2.pem -o StrictHostKeyChecking=no ec2-user@${{ secrets.EC2_DNS }} "bash -c 'cd server && git pull && npm install && pm2 start server.js'"  
+
+

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.env
+client/build

client/src/AddVideo.js

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+
+export default function AddVideo({ addVideo }) {
+  let [input, setInput] = useState({
+    title: "",
+    url: "",
+    rating: 0,
+  });
+
+  const handleChange = (e) => {
+    setInput({ ...input, [e.target.name]: e.target.value });
+  };
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    input.id = uuidv4();
+    addVideo(input);
+  };
+
+  function uuidv4() {
+    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+      (
+        c ^
+        (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+      ).toString(16)
+    );
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <div>
+        <h3>Add a video</h3>
+        <label>Title:</label>
+        <input
+          id="title"
+          type="text"
+          name="title"
+          value={input.title}
+          onChange={handleChange}
+          required
+        />
+        <label>URL:</label>
+        <input
+          id="url"
+          type="text"
+          name="url"
+          value={input.url}
+          onChange={handleChange}
+          required
+        />
+        <button type="submit" className="btn btn-primary">
+          Add
+        </button>
+      </div>
+    </form>
+  );
+}

client/src/App.css

@@ -1,3 +1,18 @@
 .App {
   text-align: center;
 }
+
+.grid-container {
+  display: grid;
+  margin: 20px;
+  gap: 50px 0px;
+  grid-template-columns: auto auto auto auto;
+}
+
+button, input {
+  margin: 10px;
+}
+
+h3 {
+  color: red;
+}

client/src/App.js

@@ -1,13 +1,38 @@
 import "./App.css";
+import React, { useState, useEffect } from "react";
+import VideoCards from "./VideoCards";
+import AddVideo from "./AddVideo";
+// import data from "./exampleresponse.json";
 
 function App() {
+  let [videos, setVideos] = useState([]);
+
+  useEffect(function () {
+    fetch("http://52.56.239.192:5004")
+      .then((res) => res.json())
+      .then((data) => {
+        setVideos(data);
+      });
+  }, []);
+
+  function addVideo(video) {
+    setVideos([...videos, video]);
+  }
+
+  function removeVideo(id) {
+    setVideos(videos.filter((video) => video.id !== id));
+  }
+
   return (
     <div className="App">
       <header className="App-header">
         <h1>Video Recommendation</h1>
       </header>
+      <AddVideo addVideo={addVideo} />
+      <VideoCards videoList={videos} removeVideo={removeVideo} />
     </div>
   );
 }
 
 export default App;
+//test

client/src/Rating.js

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+
+export default function Rating({ rating }) {
+  let [rate, setRate] = useState(rating);
+  function incrementRate() {
+    setRate(rate + 1);
+  }
+  function decrementRate() {
+    setRate(rate - 1);
+  }
+
+  return (
+    <div>
+      Rating: {rate}
+      <br />
+      <button type="button" className="btn btn-primary" onClick={incrementRate}>
+        Up Vote
+      </button>
+      <button type="button" className="btn btn-primary" onClick={decrementRate}>
+        Down Vote
+      </button>
+    </div>
+  );
+}

client/src/VideoCards.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Rating from "./Rating";
+
+export default function VideoCards({ videoList, removeVideo }) {
+  return (
+    <div className="grid-container">
+      {videoList.map((element, index) => (
+        <span key={index} className="card">
+          <iframe
+            width="560"
+            height="315"
+            src={
+              "https://www.youtube.com/embed/" +
+              element.url.replace("https://www.youtube.com/watch?v=", "")
+            }
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          ></iframe>{" "}
+          <div className="card-body">
+            <h4>{element.title}</h4>
+            <Rating rating={element.rating} />
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={() => {
+                removeVideo(element.id);
+              }}
+            >
+              Remove video
+            </button>
+          </div>
+        </span>
+      ))}
+    </div>
+  );
+}