Skip to content

Commit 085cbb2

Browse files
DAGOATTTTDAGOATTTT
committed
Finshed Library for Mock
1 parent 546d6c5 commit 085cbb2

File tree

8 files changed

+184
-26
lines changed

8 files changed

+184
-26
lines changed

‎backend/controllers/videoController.js

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -118,19 +118,6 @@ const postVideo = asyncHandler(async (req, res) => {
118118
}
119119

120120

121-
// const bucketName = process.env.BUCKET_NAME
122-
// const bucketRegion = process.env.BUCKET_REGION
123-
// const accessKey = process.env.ACCESS_KEY
124-
// const secretAccessKey = process.env.SECRET_ACCESS_KEY
125-
// // console.log(accessKey)
126-
// const s3 = new S3Client({
127-
// credentials: {
128-
// accessKeyId: accessKey,
129-
// secretAccessKey: secretAccessKey,
130-
// },
131-
132-
// region: bucketRegion
133-
// });
134121

135122

136123

@@ -222,9 +209,15 @@ const getVideo = asyncHandler(async (req, res) => {
222209
})
223210

224211
const getVideoURL = asyncHandler(async (req, res) => {
225-
const videos = await Video.findOne({})
226-
console.log(videos)
227-
res.send(videos);
212+
const videos = await Video.find({}, {URL:1, _id:0,})
213+
let videoData = [];
214+
//console.log((videos[0]))
215+
for(const video of videos) {
216+
videoData.push(video.URL)
217+
218+
}
219+
//console.log(videoData[20])
220+
res.send(videoData);
228221

229222

230223
})

‎frontend/package-lock.json

Lines changed: 43 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@
77
"@testing-library/react": "^13.4.0",
88
"@testing-library/user-event": "^13.5.0",
99
"axios": "^1.3.4",
10+
"get-youtube-id": "^1.0.1",
11+
"get-youtube-title": "^1.0.1",
1012
"react": "^18.2.0",
1113
"react-dom": "^18.2.0",
1214
"react-icons": "^4.8.0",
15+
"react-player": "^2.12.0",
1316
"react-router-dom": "^6.9.0",
1417
"react-scripts": "^5.0.1",
1518
"react-spinners": "^0.13.8",

‎frontend/src/components/Hero.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const Hero = () => {
3232
setError('Please enter a valid YouTube link.');
3333
}
3434
setLink(value);
35+
3536
};
3637

3738
return (

‎frontend/src/pages/Library.js

Lines changed: 103 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,60 @@ import Bubbles from '../assets/Bubbles.png'
22
import PinkCircle from '../assets/PinkCircle.png'
33
import BlueCircle from '../assets/BlueCircle.png'
44
import GradientGraphic from '../assets/GradientGraphic.png'
5-
5+
import { useState, useContext, useEffect } from 'react'
6+
import axios, { isCancel, AxiosError } from 'axios';
67
import styles from './styles/Library.module.css';
78
import { useNavigate } from 'react-router-dom'
9+
import ReactPlayer from 'react-player'
10+
811

912

1013
function Library() {
1114

1215
const navigate = useNavigate();
1316

17+
const [videos, Setvideos] = useState([]);
18+
const [titles, Settitles] = useState([]);
19+
1420

1521
function handleQuiz(e) {
1622
e.preventDefault()
1723
navigate('/quizpage')
1824
}
25+
26+
useEffect(() => {
27+
RetrieveVideo()
28+
}, [])
29+
30+
async function RetrieveVideo(){
31+
let videoArray = await axios.get("http://localhost:5000/api/videos/url")
32+
//console.log(videoArray.data)
33+
Setvideos(videoArray.data);
34+
RetrieveTitles(videos);
35+
36+
37+
}
38+
39+
async function RetrieveTitles(videosarray){
40+
for(let i=0; i<videos.length; i++){
41+
42+
const videoUrl = videosarray[i]
43+
const apiKey = process.env.Youtube_API_KEY
44+
45+
// Make an API request to get video data
46+
fetch(`https://www.googleapis.com/youtube/v3/videos?id=${videoUrl}&key=${apiKey}&part=snippet`)
47+
.then(response => response.json())
48+
.then(data => {
49+
const videoTitle = data.items[0].snippet.title;
50+
console.log(videoTitle); // Outputs the video title to the console
51+
})
52+
.catch(error => console.error(error));
53+
54+
55+
}
56+
}
57+
58+
1959

2060

2161
return (
@@ -48,9 +88,18 @@ function Library() {
4888
<div className={styles.flexChildElement}>
4989
<div className={styles.libraryVid}>
5090

91+
<ReactPlayer
92+
//className= {styles.reactplayer}
93+
url= {videos[0]}
94+
light = {true}
95+
width = '100%'
96+
height = '100%'
97+
playing = {false}
98+
/>
99+
51100
</div>
52101
<input type='text' className={styles.videotitles}
53-
placeholder='Introduction to Arrays'/>
102+
placeholder= "Learn PYTHON in 5 Minutes"/>
54103

55104
{/* Goes to the quiz page*/}
56105
<input type='text' className={styles.videotext} placeholder='Quiz | All Info' onClick ={handleQuiz} />
@@ -59,18 +108,41 @@ function Library() {
59108

60109
<div className={styles.flexChildElement}>
61110
<div className={styles.libraryVid}>
111+
112+
<ReactPlayer
113+
//className= {styles.reactplayer}
114+
url= {videos[1]}
115+
light = {true}
116+
width = '100%'
117+
height = '100%'
118+
/>
119+
120+
121+
122+
62123
</div>
63124
<input type='text' className={styles.videotitles}
64-
placeholder='Introduction to Linked Lists'/>
125+
placeholder='Learn Graphs in 5 minutes '/>
65126
<input type='text' className={styles.videotext}
66127
placeholder='Quiz | All Info'/>
67128
</div>
68129

69130
<div className={styles.flexChildElement}>
70131
<div className={styles.libraryVid}>
132+
133+
<ReactPlayer
134+
//className= {styles.reactplayer}
135+
url= {videos[2]}
136+
playing
137+
light = {true}
138+
width = '100%'
139+
height = '100%'
140+
/>
141+
142+
71143
</div>
72144
<input type='text' className={styles.videotitles}
73-
placeholder='AVL Trees'/>
145+
placeholder='Learn Big O notation in 6 minutes'/>
74146
<input type='text' className={styles.videotext}
75147
placeholder='Quiz | All Info'/>
76148
</div >
@@ -82,27 +154,51 @@ function Library() {
82154

83155
<div className={styles.flexChildElement}>
84156
<div className={styles.libraryVid}>
157+
<ReactPlayer
158+
//className= {styles.reactplayer}
159+
url= {videos[3]}
160+
playing
161+
light = {true}
162+
width = '100%'
163+
height = '100%'
164+
/>
85165
</div>
86166
<input type='text' className={styles.videotitles}
87-
placeholder='Data Structures'/>
167+
placeholder= "TypeScript - The Basics"/>
88168
<input type='text' className={styles.videotext}
89169
placeholder='Quiz | All Info'/>
90170
</div >
91171

92172
<div className={styles.flexChildElement}>
93173
<div className={styles.libraryVid}>
174+
<ReactPlayer
175+
//className= {styles.reactplayer}
176+
url= {videos[4]}
177+
playing
178+
light = {true}
179+
width = '100%'
180+
height = '100%'
181+
/>
94182
</div>
95183
<input type='text' className={styles.videotitles}
96-
placeholder= 'Computer Architecture'/>
184+
placeholder= 'How to OVER Engineer a Website // What is a Tech Stack?'/>
97185
<input type='text' className={styles.videotext}
98186
placeholder='Quiz | All Info'/>
99187
</div >
100188

101189
<div className={styles.flexChildElement}>
102190
<div className={styles.libraryVid}>
191+
<ReactPlayer
192+
//className= {styles.reactplayer}
193+
url= {videos[5]}
194+
playing
195+
light = {true}
196+
width = '100%'
197+
height = '100%'
198+
/>
103199
</div>
104200
<input type='text' className={styles.videotitles}
105-
placeholder='Code in React'/>
201+
placeholder='7 Database Paradigms'/>
106202
<input type='text' className={styles.videotext}
107203
placeholder='Quiz | All Info'/>
108204
</div >

‎frontend/src/pages/QuizPage.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ function QuizPage() {
1616

1717

1818
const [active, setActive] = useState(false);
19+
const [questions, setQuestions] = useState([])
20+
1921
const handleClick = () => {
2022
setActive(!active);
2123
};

‎frontend/src/pages/Summary.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@ const Summary = () => {
1313
const { summary, setSummary } = useContext(MyContext)
1414
const [ loading, setLoading ] = useState(true)
1515

16+
17+
1618
function handleBack(e) {
1719
e.preventDefault();
1820
navigate('/general')
1921
}
2022

2123
async function displaySummary(){
22-
let url = await axios.get("http://localhost:5000/api/videos")
24+
let url = await axios.get("http://localhost:5000/api/videos/")
2325
console.log(url.data);
2426
window.open(url.data, '_blank')
2527
}
@@ -44,11 +46,15 @@ const Summary = () => {
4446

4547
).then((response) => {
4648
result = response.data.text
47-
console.log(response.data.text)
49+
// console.log(response.data.text)
50+
})
51+
.catch((err) => {
52+
console.log(err);
4853
})
4954

5055
setLoading(true)
51-
console.log(result)
56+
// console.log(result)
57+
// console.log(summary)
5258
await setSummary(result)
5359
setLoading(false)
5460
}

0 commit comments

Comments
 (0)