diff --git a/client/src/App.jsx b/client/src/App.jsx index dffd4bbb30..21656a5951 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,7 +1,10 @@ +import Videos from "./Videos/Videos"; + const App = () => { return ( <>

Video Recommendations

+ ); }; diff --git a/client/src/Videos/Videos.jsx b/client/src/Videos/Videos.jsx new file mode 100644 index 0000000000..5304d830a5 --- /dev/null +++ b/client/src/Videos/Videos.jsx @@ -0,0 +1,36 @@ +import { useState, useEffect, useRef } from "react"; +import "./videos.scss"; + +const Videos = () => { + const [videos, setVideos] = useState([]); + const fetchedVideos = useRef(true); + + useEffect(() => { + if (fetchedVideos.current) { + fetchedVideos.current = false; + fetch("/api/videos") + .then((res) => res.json()) + .then((data) => { + setVideos(data); + fetchedVideos.current = true; + }); + } + }, []); + + const mapVideos = videos.map((video, index) => { + return ( +
+

{video.title}

+ +
+ ); + }); + + return

{mapVideos}

; +}; + +export default Videos; diff --git a/client/src/Videos/videos.scss b/client/src/Videos/videos.scss new file mode 100644 index 0000000000..6c00affe40 --- /dev/null +++ b/client/src/Videos/videos.scss @@ -0,0 +1,11 @@ +.container { + margin-top: 2rem; + padding-left: 1rem; + + &_video { + border-radius: 1rem; + border: none; + box-shadow: 6px 4px 18px 0 #00000042; + margin-top: 0.6rem; + } +} diff --git a/client/src/index.css b/client/src/index.css index eae06a0a27..a6f83852a0 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -1,8 +1,15 @@ -html, -body { +* { + padding: 0; margin: 0; + box-sizing: border-box; +} + +body { + background-color: #f1f7ed; + color: #b33951; } h1 { text-align: center; + margin-top: 1.4rem; } diff --git a/db/initdb.sql b/db/initdb.sql index 1214bc1a9a..bbca627914 100644 --- a/db/initdb.sql +++ b/db/initdb.sql @@ -2,82 +2,13 @@ DROP TABLE IF EXISTS videos CASCADE; CREATE TABLE videos (title VARCHAR, src VARCHAR); -INSERT INTO - videos (title, src) -VALUES - ( - 'Never Gonna Give You Up', - 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' - ); - -INSERT INTO - videos (title, src) -VALUES - ( - 'The Coding Train', - 'https://www.youtube.com/watch?v=HerCR8bw_GE' - ); - -INSERT INTO - videos (title, src) -VALUES - ( - 'Mac & Cheese | Basics with Babish', - 'https://www.youtube.com/watch?v=FUeyrEN14Rk' - ); - -INSERT INTO - videos (title, src) -VALUES - ( - 'Videos for Cats to Watch - 8 Hour Bird Bonanza', - 'https://www.youtube.com/watch?v=xbs7FT7dXYc' - ); - -INSERT INTO - videos (title, src) -VALUES - ( - 'The Complete London 2012 Opening Ceremony | London 2012 Olympic Games', - 'https://www.youtube.com/watch?v=4As0e4de-rI' - ); - -INSERT INTO - videos (title, src) -VALUES - ( - 'Learn Unity - Beginner''s Game Development Course', - 'https://www.youtube.com/watch?v=gB1F9G0JXOo' - ); - -INSERT INTO - videos (title, src) -VALUES - ( - 'Cracking Enigma in 2021 - Computerphile', - 'https://www.youtube.com/watch?v=RzWB5jL5RX0' - ); - -INSERT INTO - videos (title, src) -VALUES - ( - 'Coding Adventure: Chess AI', - 'https://www.youtube.com/watch?v=U4ogK0MIzqk' - ); - -INSERT INTO - videos (title, src) -VALUES - ( - 'Why the Tour de France is so brutal', - 'https://www.youtube.com/watch?v=ZacOS8NBK6U' - ); - -INSERT INTO - videos (title, src) -VALUES - ( - 'Coding Adventure: Ant and Slime Simulations', - 'https://www.youtube.com/watch?v=X-iSQQgOd1A' - ); +INSERT INTO videos (title,src) VALUES ('Never Gonna Give You Up','https://www.youtube.com/embed/dQw4w9WgXcQ?si=sdvqEritjOTwN2Af'); +INSERT INTO videos (title,src) VALUES ('The Coding Train','https://www.youtube.com/embed/HerCR8bw_GE?si=5Xfqx9K1JMB_QCBh'); +INSERT INTO videos (title,src) VALUES ('Mac & Cheese | Basics with Babish','https://www.youtube.com/embed/FUeyrEN14Rk?si=dUHtCerjTKIdgK5u'); +INSERT INTO videos (title,src) VALUES ('Videos for Cats to Watch - 8 Hour Bird Bonanza','https://www.youtube.com/embed/xbs7FT7dXYc?si=W9bjQcH1cYbIlnY3'); +INSERT INTO videos (title,src) VALUES ('The Complete London 2012 Opening Ceremony | London 2012 Olympic Games','https://www.youtube.com/embed/4As0e4de-rI?si=QvvaM7T6gj31cQ6z'); +INSERT INTO videos (title,src) VALUES ('Learn Unity - Beginners Game Development Course','https://www.youtube.com/embed/gB1F9G0JXOo?si=zh21-opwR7otFnSZ'); +INSERT INTO videos (title,src) VALUES ('Cracking Enigma in 2021 - Computerphile','https://www.youtube.com/embed/RzWB5jL5RX0?si=OuYo20zJalIFBT2w'); +INSERT INTO videos (title,src) VALUES ('Coding Adventure: Chess AI','https://www.youtube.com/embed/U4ogK0MIzqk?si=xICbZlD8Hm9nCyWy'); +INSERT INTO videos (title,src) VALUES ('Coding Adventure: Ant and Slime Simulations','https://www.youtube.com/embed/X-iSQQgOd1A?si=bZUPXmKxC43YzERA'); +INSERT INTO videos (title,src) VALUES ('Why the Tour de France is so brutal','https://www.youtube.com/embed/ZacOS8NBK6U?si=nfaj6AHw0aaE-c7C'); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4b6732a523..6886da3202 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "e2e" ], "dependencies": { + "sass": "^1.75.0", "serverless-http": "^3.2.0" }, "devDependencies": { @@ -1919,20 +1920,6 @@ ], "peer": true }, - "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.5.tgz", - "integrity": "sha512-UmElV1OY2m/1KEEqTlIjieKfVwRg0Zwg4PLgNf0s3glAHXBN99KLpw5A5lrSYCa1Kp63czTpVll2MAqbZYIHoA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "peer": true - }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { "version": "4.9.5", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.5.tgz", @@ -3033,7 +3020,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "dev": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -3414,7 +3400,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, "engines": { "node": ">=8" } @@ -3444,7 +3429,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -3653,7 +3637,6 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, "funding": [ { "type": "individual", @@ -3680,7 +3663,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -5544,7 +5526,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -5621,7 +5602,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -6051,6 +6031,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -6228,7 +6213,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -6310,7 +6294,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -6364,7 +6347,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -6412,7 +6394,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, "engines": { "node": ">=0.12.0" } @@ -8142,7 +8123,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -8623,7 +8603,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -9045,7 +9024,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -9399,6 +9377,22 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/sass": { + "version": "1.75.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz", + "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/saxes": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", @@ -9560,7 +9554,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -9954,7 +9947,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "dependencies": { "is-number": "^7.0.0" }, diff --git a/package.json b/package.json index 86411114e6..5b7d4b4853 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "npm": ">=10" }, "dependencies": { + "sass": "^1.75.0", "serverless-http": "^3.2.0" } }