London10_Jan_Softa_Full-Stack_Project_Assessment_Level300 #362

softacoder · 2023-08-24T19:33:04Z

No description provided.

it worked in localhost with render it does not.

migmow · 2023-09-01T13:59:33Z

client/src/App.js

 import "./App.css";
+import VideoComponent from "./VideoComponent";


In a React application, it's generally not a good practice to add lots of functions directly in the App.js file which are not going to be re-used across other components.
The App.js file should primarily focus on rendering the main components and managing the state of your application.
I'm referring to handlers functions

migmow · 2023-09-01T14:03:53Z

client/src/VideoComponent.js

@@ -37,6 +37,44 @@ const VideoComponent = ({ video, onUpVote, onDownVote, onRemove }) => {

 export default VideoComponent;

+// version5 this works on all. but not same size youtube videos


Would be good not to commit commented out codes to remote

migmow · 2023-09-01T14:14:09Z

client/src/link-scripts.js

@@ -0,0 +1,26 @@
+// Get the links and add event listeners


Out of curiosity, you've used vanilla JavaScript to manage links on the page. While it certainly works, in a React application, we typically handle events and interactions using React's built-in capabilities. Is there a specific reason for choosing this approach over using React's event handling?

migmow · 2023-09-01T14:18:45Z

client/src/VideoComponent.js

+    <div className="video-component">
+      <h3>{video.title}</h3>
+      {/* Replace the iframe tag with ReactPlayer */}
+      <ReactPlayer


It's a good idea to use ReactPlayer component here, I've just noticed, it hasn't been installed. => https://www.npmjs.com/package/react-player
You have installed axios for instance, not this one though

migmow · 2023-09-01T14:31:27Z

server/server.js

+
+app.listen(port, () => console.log(`Listening on port ${port}`));
+
+// update6


Please avoide pushing comments which are for yourself, and not info for other devs.

migmow · 2023-09-01T14:32:51Z

server/server.js

+
+app.post("/videos", (req, res) => {
+  const newVideo = req.body;
+  newVideo.id = videos.length + 1;


Why is it increasing lenght of video's array?

migmow · 2023-09-01T14:36:18Z

server/server.js

+
+// // GET "/"
+// app.get("/", (req, res) => {
+//   // Delete this line after you've confirmed your server is running


Lots of commented codes! 😄

migmow · 2023-09-01T14:36:56Z

server/server.js

+  videos = videos.filter((v) => v.id !== id);
+  if (videos.length < initialLength) {
+    res.json({});
+  } else {


Very nice handling of response! 👏

migmow · 2023-09-01T14:42:51Z

client/public/index.html

@@ -1,4 +1,297 @@
 <!DOCTYPE html>
+<html lang="en">


Typically in a React application, it's not recommended to add code directly to the index.html file. This source could be helpful to find out the reason for that.

migmow

Hi Jan - left some comments. Let me know if there's question. 🙏

I did some small stuff - added hamburger menu, FAQ, ToA. And removed and updated the previous code.

illicitonion

What you have here is generally looking good, but the PR title says it's level 300 and I only see 299 in here? Do you have 300 somewhere that's missing?

illicitonion · 2023-09-18T18:59:55Z

client/src/AddYoutubeVideo.js

+      timestamp: new Date().toISOString(),
+    };
+
+    onAddVideo(newVideo);


on is a slightly strange prefix for this function name - typically we'd use an on prefix to show something is an event handler ("happens when a video is being added"), rather than the way we actually do the thing (add a video)...

(The same applies to several other names in this PR :))

illicitonion · 2023-09-18T19:11:14Z

client/src/VideoComponent.js

+        title={video.title}
+        width="560"
+        height="315"
+        src={`https://www.youtube.com/embed/${video.url.split("v=")[1]}`}


What would happen if the video URL didn't include v=? Is there anything we could do to make that better?

illicitonion · 2023-09-18T19:18:33Z

client/src/navbar.js

+  const [isMenuClicked, setIsMenuClicked] = useState(false);
+
+  const updateMenu = () => {
+    if (!isMenuClicked) {


It looks like these states all only ever get changed at the same time - could you think of a way to only have one state rather than three?

softacoder · 2023-09-19T15:05:29Z

Hi Thanks for the feedback. I will look into the feedback. Your comment: "What you have here is generally looking good, but the PR title says it's level 300 and I only see 299 in here? Do you have 300 somewhere that's missing?" My comment: See screenshot for instructions on level 300. It is deployed on render.

…

On Mon, 18 Sept 2023 at 20:35, Daniel Wagner-Hall ***@***.***> wrote: ***@***.**** commented on this pull request. What you have here is generally looking good, but the PR title says it's level 300 and I only see 299 in here? Do you have 300 somewhere that's missing? ------------------------------ In client/src/AddYoutubeVideo.js <#362 (comment)> : > + } + + if (!isYouTubeUrlValid(url)) { + alert("Please enter a valid YouTube URL."); + return; + } + + const newVideo = { + id: Date.now(), + title: title, + url: url, + rating: 0, + timestamp: new Date().toISOString(), + }; + + onAddVideo(newVideo); on is a slightly strange prefix for this function name - typically we'd use an on prefix to show something is an event handler ("happens when a video is being added"), rather than the way we actually do the thing (add a video)... (The same applies to several other names in this PR :)) ------------------------------ In client/src/VideoComponent.js <#362 (comment)> : > + `https://back-end-full-stack-project-assessment.onrender.com/videos/${video.id}` <https://back-end-full-stack-project-assessment.onrender.com/videos/$%7Bvideo.id%7D> + ); + onRemove(video.id); + } catch (error) { + console.error("Error deleting video:", error); + } + }; + + return ( + <div className="video-component"> + <h3>{video.title}</h3> + <iframe + title={video.title} + width="560" + height="315" + src={`https://www.youtube.com/embed/${video.url.split("v=")[1]}`} What would happen if the video URL didn't include v=? Is there anything we could do to make that better? ------------------------------ In client/src/navbar.js <#362 (comment)> : > @@ -0,0 +1,189 @@ +// version 3 +import React, { useState } from "react"; +import "./navbar.css"; + +const Navbar = () => { + const [burger_class, setBurgerClass] = useState("burger-bar unclicked"); + const [menu_class, setMenuClass] = useState("menu hidden"); + const [isMenuClicked, setIsMenuClicked] = useState(false); + + const updateMenu = () => { + if (!isMenuClicked) { It looks like these states all only ever get changed at the same time - could you think of a way to only have one state rather than three? — Reply to this email directly, view it on GitHub <#362 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A27REK3N7WACZ7GYW5AV733X3CO7HANCNFSM6AAAAAA35P2JAM> . You are receiving this because you authored the thread.Message ID: <CodeYourFuture/Full-Stack-Project-Assessment/pull/362/review/1631781508@ github.com>

softacoder · 2023-09-19T15:17:35Z

Hi Thanks for the feedback. I will look into the feedback. Something to learn from Your comment: "What you have here is generally looking good, but the PR title says it's level 300 and I only see 299 in here? Do you have 300 somewhere that's missing?" My comment: See screenshot for instructions on level 300. It is deployed on render. Here is link to postgreSQL https://dashboard.render.com/d/dpg-cjiv0o7jbvhs73dlt4i0-a You can test it by adding: /videos https://back-end-full-stack-project-assessment.onrender.com It takes a while before the videos load, but it will come. I have seen it is the same for many other projects. Maybe it is Render that is slow? https://front-end-full-stack-project-assessment.onrender.com

…

On Mon, 18 Sept 2023 at 20:35, Daniel Wagner-Hall ***@***.***> wrote: ***@***.**** commented on this pull request. What you have here is generally looking good, but the PR title says it's level 300 and I only see 299 in here? Do you have 300 somewhere that's missing? ------------------------------ In client/src/AddYoutubeVideo.js <#362 (comment)> : > + } + + if (!isYouTubeUrlValid(url)) { + alert("Please enter a valid YouTube URL."); + return; + } + + const newVideo = { + id: Date.now(), + title: title, + url: url, + rating: 0, + timestamp: new Date().toISOString(), + }; + + onAddVideo(newVideo); on is a slightly strange prefix for this function name - typically we'd use an on prefix to show something is an event handler ("happens when a video is being added"), rather than the way we actually do the thing (add a video)... (The same applies to several other names in this PR :)) ------------------------------ In client/src/VideoComponent.js <#362 (comment)> : > + `https://back-end-full-stack-project-assessment.onrender.com/videos/${video.id}` <https://back-end-full-stack-project-assessment.onrender.com/videos/$%7Bvideo.id%7D> + ); + onRemove(video.id); + } catch (error) { + console.error("Error deleting video:", error); + } + }; + + return ( + <div className="video-component"> + <h3>{video.title}</h3> + <iframe + title={video.title} + width="560" + height="315" + src={`https://www.youtube.com/embed/${video.url.split("v=")[1]}`} What would happen if the video URL didn't include v=? Is there anything we could do to make that better? ------------------------------ In client/src/navbar.js <#362 (comment)> : > @@ -0,0 +1,189 @@ +// version 3 +import React, { useState } from "react"; +import "./navbar.css"; + +const Navbar = () => { + const [burger_class, setBurgerClass] = useState("burger-bar unclicked"); + const [menu_class, setMenuClass] = useState("menu hidden"); + const [isMenuClicked, setIsMenuClicked] = useState(false); + + const updateMenu = () => { + if (!isMenuClicked) { It looks like these states all only ever get changed at the same time - could you think of a way to only have one state rather than three? — Reply to this email directly, view it on GitHub <#362 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A27REK3N7WACZ7GYW5AV733X3CO7HANCNFSM6AAAAAA35P2JAM> . You are receiving this because you authored the thread.Message ID: <CodeYourFuture/Full-Stack-Project-Assessment/pull/362/review/1631781508@ github.com>

illicitonion · 2023-09-19T15:45:35Z

What you have here is generally looking good, but the PR title says it's level 300 and I only see 299 in here? Do you have 300 somewhere that's missing?"

See screenshot for instructions on level 300. It is deployed on render.

Level 300 requires having integrated with a database, and I don't see any SQL in this pull request - is it possible you have some code locally which you haven't pushed to the PR?

softacoder · 2023-09-20T16:18:10Z

Hi Daniel! Maybe I dont understand it correctly. I have followed these instructions to set up postgreSQL: https://syllabus.codeyourfuture.io/guides/deployment-render/creating-a-postgres-db As you can see everything works on the website being deployed on render. I dont understand what particular SQL code you are asking for in the PR. I checked some of the other trainees and I cant find any particular SQL code in their repo. Great if you could give a link to a repo that did this and where in the repo so I can find out how they did it. Always happy to learn. 😀 Can I ask if you think of the SQL code that should be included in PR for the E-Commerce API? 😀 Thanks!

…

On Tue, 19 Sept 2023 at 16:45, Daniel Wagner-Hall ***@***.***> wrote: What you have here is generally looking good, but the PR title says it's level 300 and I only see 299 in here? Do you have 300 somewhere that's missing?" See screenshot for instructions on level 300. It is deployed on render. Level 300 requires having integrated with a database, and I don't see any SQL in this pull request - is it possible you have some code locally which you haven't pushed to the PR? — Reply to this email directly, view it on GitHub <#362 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A27REK3DHAGGSJJK432QJZTX3G42TANCNFSM6AAAAAA35P2JAM> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

softacoder · 2023-09-20T16:24:14Z

Jan Softa 17:17 (1 minute ago) to *CodeYourFuture/Full-Stack-Project-Assessment* Hi Daniel! Maybe I dont understand it correctly. I have followed these instructions to set up postgreSQL: https://syllabus.codeyourfuture.io/guides/deployment-render/creating-a-postgres-db As you can see everything works on the website being deployed on render. I dont understand what particular SQL code you are asking for in the PR. I checked some of the other trainees and I cant find any particular SQL code in their repo. Great if you could give a link to a repo that did this and where in the repo so I can find out how they did it. Always happy to learn. 😀 Can I ask if you think of the SQL code that should be included in PR for the E-Commerce API? 😀 Are you coming to class on Saturday, we can look into it. Or maybe you can contact Sherif and tell him what you mean and I talk to him on Saturday. Sherif is my mentor and I think he has checked my code earlier. I hope we can sort this out. Thanks!

…

On Tue, 19 Sept 2023 at 16:45, Daniel Wagner-Hall ***@***.***> wrote: What you have here is generally looking good, but the PR title says it's level 300 and I only see 299 in here? Do you have 300 somewhere that's missing?" See screenshot for instructions on level 300. It is deployed on render. Level 300 requires having integrated with a database, and I don't see any SQL in this pull request - is it possible you have some code locally which you haven't pushed to the PR? — Reply to this email directly, view it on GitHub <#362 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A27REK3DHAGGSJJK432QJZTX3G42TANCNFSM6AAAAAA35P2JAM> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

illicitonion · 2023-09-20T17:45:21Z

If you have a look at the "Success criteria" on https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/blob/main/300.md it says that "When this stage has been completed all of your data should exist only in your database - no data should be stored in your API or in your React app"

Right now, your code only stores data in the API server - in server.js you have a videos array, and that's where all of your videos are stored. If you deploy a new version of your server, or if render decides to restart your server, all of the data people have uploaded will be lost.

I understand you said you've created a database - that's a good step, but as far as I can tell your server isn't using the database.

If you have a look in server.js in https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/pull/435/files you'll see that that project has changed its handlers so that it looks up information in the database, and when things are added or deleted they're added/deleted in the database rather than in an array.

After you set up your database, did any data get put into it? What's your database being used for?

softacoder · 2023-09-20T21:27:18Z

Hi Daniel Thanks for the quick reply. Yes, I should have removed the let videos{ array } from server.js Dont remember why I left it in there, but it works just fine without it in server.js. I did most of this a month ago and when I tested then I unmarked let videos{array} and it all worked. I tested it again to unmark it and it all worked in localhost. I can commit without the let videos{array} in server.js I dont think I and the others understood there should be SQL coded by us for the fullstack. Does not say anything in the instructions we should code SQL code and that is probably why you dont see any SQL code in mine or the others PR. However if I would search or use/create a table for SQL it would use the information you find in let videos{array} that works even if I unmark it in server.js Name of table is Videos. id: 523523, title: "Never Gonna Give You Up", url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" rating: 23, Next video values here To display all the table. SELECT * FROM videos. You are pointing me to Irinas code. What lines do you want me to look at and what can I learn from her? https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/pull/435/files Does not this one fetch from Github? https://dashboard.render.com/d/dpg-cjiv0o7jbvhs73dlt4i0-a So whatever is committed it uses. I can add videos in https://front-end-full-stack-project-assessment.onrender.com/ to the array and it displays and I can do the same in localhost. If it should remain in the array I must commit to github. Thank you for your patience and I am sorry if I don't understand you completely yet. But we are getting closer. 😀 Is it ok to tell Sherif what you mean and I can talk to him on Saturday and we can sit down for a few minutes and I fix what needs to be fixed? Jan

…

On Wed, 20 Sept 2023 at 18:45, Daniel Wagner-Hall ***@***.***> wrote: If you have a look at the "Success criteria" on https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/blob/main/300.md it says that "When this stage has been completed all of your data should exist only in your database - no data should be stored in your API or in your React app" Right now, your code only stores data in the API server - in server.js you have a videos array, and that's where all of your videos are stored. If you deploy a new version of your server, or if render decides to restart your server, all of the data people have uploaded will be lost. I understand you said you've created a database - that's a good step, but as far as I can tell your server isn't *using* the database. If you have a look in server.js in https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/pull/435/files you'll see that that project has changed its handlers so that it looks up information in the database, and when things are added or deleted they're added/deleted in the database rather than in an array. After you set up your database, did any data get put into it? What's your database being used for? — Reply to this email directly, view it on GitHub <#362 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A27REKYDCYYGO6TWXJTDAZ3X3MTTZANCNFSM6AAAAAA35P2JAM> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

softacoder · 2023-09-23T09:36:23Z

Hi Daniel! If you want SQL code I will change it. No problem. I had deployed my project with a hard-coded copy of the video array in server.js. So everything worked also on the render link. But I will do the update with sql code and deploy again. I dont know if I have time during the weekend, but beginning of next week. This is the code for the table CREATE TABLE videos ( id SERIAL PRIMARY KEY, title VARCHAR(50) NOT NULL, url VARCHAR(120) NOT NULL, rating integer not null ) And in server.js I add and so on. // PostgreSQL database connection const db = new Pool({ user: process.env.USERNAME, host: process.env.HOSTNAME, database: process.env.DATABASE_NAME, password: process.env.PASSWORD, port: 5432, });

…

On Wed, 20 Sept 2023 at 22:27, Jan Softa ***@***.***> wrote: Hi Daniel Thanks for the quick reply. Yes, I should have removed the let videos{ array } from server.js Dont remember why I left it in there, but it works just fine without it in server.js. I did most of this a month ago and when I tested then I unmarked let videos{array} and it all worked. I tested it again to unmark it and it all worked in localhost. I can commit without the let videos{array} in server.js I dont think I and the others understood there should be SQL coded by us for the fullstack. Does not say anything in the instructions we should code SQL code and that is probably why you dont see any SQL code in mine or the others PR. However if I would search or use/create a table for SQL it would use the information you find in let videos{array} that works even if I unmark it in server.js Name of table is Videos. id: 523523, title: "Never Gonna Give You Up", url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" rating: 23, Next video values here To display all the table. SELECT * FROM videos. You are pointing me to Irinas code. What lines do you want me to look at and what can I learn from her? https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/pull/435/files Does not this one fetch from Github? https://dashboard.render.com/d/dpg-cjiv0o7jbvhs73dlt4i0-a So whatever is committed it uses. I can add videos in https://front-end-full-stack-project-assessment.onrender.com/ to the array and it displays and I can do the same in localhost. If it should remain in the array I must commit to github. Thank you for your patience and I am sorry if I don't understand you completely yet. But we are getting closer. 😀 Is it ok to tell Sherif what you mean and I can talk to him on Saturday and we can sit down for a few minutes and I fix what needs to be fixed? Jan On Wed, 20 Sept 2023 at 18:45, Daniel Wagner-Hall < ***@***.***> wrote: > If you have a look at the "Success criteria" on > https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/blob/main/300.md > it says that "When this stage has been completed all of your data should > exist only in your database - no data should be stored in your API or in > your React app" > > Right now, your code only stores data in the API server - in server.js > you have a videos array, and that's where all of your videos are stored. > If you deploy a new version of your server, or if render decides to restart > your server, all of the data people have uploaded will be lost. > > I understand you said you've created a database - that's a good step, but > as far as I can tell your server isn't *using* the database. > > If you have a look in server.js in > https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/pull/435/files > you'll see that that project has changed its handlers so that it looks up > information in the database, and when things are added or deleted they're > added/deleted in the database rather than in an array. > > After you set up your database, did any data get put into it? What's your > database being used for? > > — > Reply to this email directly, view it on GitHub > <#362 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/A27REKYDCYYGO6TWXJTDAZ3X3MTTZANCNFSM6AAAAAA35P2JAM> > . > You are receiving this because you authored the thread.Message ID: > ***@***.*** > .com> >

softacoder · 2023-09-23T09:39:38Z

Hi Daniel! If you want SQL code I will change it. No problem. I had deployed my project with a hard-coded copy of the video array in server.js. So everything worked also on the render link. But I will do the update with sql code and deploy again. I dont know if I have time during the weekend, but beginning of next week. I was at a conference Devops Days for two days so I did not have time to sit down and go through the code. This is the code for the table I will test CREATE TABLE videos ( id SERIAL PRIMARY KEY, title VARCHAR(50) NOT NULL, url VARCHAR(120) NOT NULL, rating integer not null ) And in server.js I add and so on. // PostgreSQL database connection const db = new Pool({ user: process.env.USERNAME, host: process.env.HOSTNAME, database: process.env.DATABASE_NAME, password: process.env.PASSWORD, port: 5432, });

…

On Wed, 20 Sept 2023 at 22:27, Jan Softa ***@***.***> wrote: Hi Daniel Thanks for the quick reply. Yes, I should have removed the let videos{ array } from server.js Dont remember why I left it in there, but it works just fine without it in server.js. I did most of this a month ago and when I tested then I unmarked let videos{array} and it all worked. I tested it again to unmark it and it all worked in localhost. I can commit without the let videos{array} in server.js I dont think I and the others understood there should be SQL coded by us for the fullstack. Does not say anything in the instructions we should code SQL code and that is probably why you dont see any SQL code in mine or the others PR. However if I would search or use/create a table for SQL it would use the information you find in let videos{array} that works even if I unmark it in server.js Name of table is Videos. id: 523523, title: "Never Gonna Give You Up", url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" rating: 23, Next video values here To display all the table. SELECT * FROM videos. You are pointing me to Irinas code. What lines do you want me to look at and what can I learn from her? https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/pull/435/files Does not this one fetch from Github? https://dashboard.render.com/d/dpg-cjiv0o7jbvhs73dlt4i0-a So whatever is committed it uses. I can add videos in https://front-end-full-stack-project-assessment.onrender.com/ to the array and it displays and I can do the same in localhost. If it should remain in the array I must commit to github. Thank you for your patience and I am sorry if I don't understand you completely yet. But we are getting closer. 😀 Is it ok to tell Sherif what you mean and I can talk to him on Saturday and we can sit down for a few minutes and I fix what needs to be fixed? Jan On Wed, 20 Sept 2023 at 18:45, Daniel Wagner-Hall < ***@***.***> wrote: > If you have a look at the "Success criteria" on > https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/blob/main/300.md > it says that "When this stage has been completed all of your data should > exist only in your database - no data should be stored in your API or in > your React app" > > Right now, your code only stores data in the API server - in server.js > you have a videos array, and that's where all of your videos are stored. > If you deploy a new version of your server, or if render decides to restart > your server, all of the data people have uploaded will be lost. > > I understand you said you've created a database - that's a good step, but > as far as I can tell your server isn't *using* the database. > > If you have a look in server.js in > https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/pull/435/files > you'll see that that project has changed its handlers so that it looks up > information in the database, and when things are added or deleted they're > added/deleted in the database rather than in an array. > > After you set up your database, did any data get put into it? What's your > database being used for? > > — > Reply to this email directly, view it on GitHub > <#362 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/A27REKYDCYYGO6TWXJTDAZ3X3MTTZANCNFSM6AAAAAA35P2JAM> > . > You are receiving this because you authored the thread.Message ID: > ***@***.*** > .com> >

moved server.js back to map server after testing moving it to client map

illicitonion

This looks good, thanks for taking the time to wire the backend up to the database!

illicitonion · 2023-09-26T17:55:09Z

server/server.js

+    const values = [id];
+
+    await db.query(query, values);
+    res.json({ message: "Downvoted successfully" });


With this kind of endpoint where the client hasn't supplied the value to set, we often would return the new value in the response, so that the UI can display the new value (which would factor in that other people may have changed the rating too), and means we can avoid replicating the logic on the client side to do the 0-clamping.

softacoder · 2023-09-26T20:32:46Z

ok. here is the sql code you asked for. In the screenshot you see the dbeaver and my table. https://github.com/softacoder/Full-Stack-Project-Assessment if you add /videos to the backend render link you see the videos in the table. https://back-end-full-stack-project-assessment.onrender.com render frontend link: https://front-end-full-stack-project-assessment.onrender.com/

…

On Sat, 23 Sept 2023 at 10:39, Jan Softa ***@***.***> wrote: Hi Daniel! If you want SQL code I will change it. No problem. I had deployed my project with a hard-coded copy of the video array in server.js. So everything worked also on the render link. But I will do the update with sql code and deploy again. I dont know if I have time during the weekend, but beginning of next week. I was at a conference Devops Days for two days so I did not have time to sit down and go through the code. This is the code for the table I will test CREATE TABLE videos ( id SERIAL PRIMARY KEY, title VARCHAR(50) NOT NULL, url VARCHAR(120) NOT NULL, rating integer not null ) And in server.js I add and so on. // PostgreSQL database connection const db = new Pool({ user: process.env.USERNAME, host: process.env.HOSTNAME, database: process.env.DATABASE_NAME, password: process.env.PASSWORD, port: 5432, }); On Wed, 20 Sept 2023 at 22:27, Jan Softa ***@***.***> wrote: > Hi Daniel > > Thanks for the quick reply. Yes, I should have removed the let videos{ > array } from server.js Dont remember why I left it in there, but it works > just fine without it in server.js. I did most of this a month ago and when > I tested then I unmarked let videos{array} and it all worked. I tested it > again to unmark it and it all worked in localhost. I can commit without the > let videos{array} in server.js > > I dont think I and the others understood there should be SQL coded by us > for the fullstack. Does not say anything in the instructions we should code > SQL code and that is probably why you dont see any SQL code in mine or the > others PR. > > However if I would search or use/create a table for SQL it would use the > information you find in let videos{array} that works even if I unmark it in > server.js > Name of table is Videos. > id: 523523, > title: "Never Gonna Give You Up", > url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" > rating: 23, > Next video values here > > To display all the table. SELECT * FROM videos. > > You are pointing me to Irinas code. What lines do you want me to look at > and what can I learn from her? > https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/pull/435/files > > > Does not this one fetch from Github? > https://dashboard.render.com/d/dpg-cjiv0o7jbvhs73dlt4i0-a So whatever is > committed it uses. > > I can add videos in > https://front-end-full-stack-project-assessment.onrender.com/ to the > array and it displays and I can do the same in localhost. If it > should remain in the array I must commit to github. Thank you for your > patience and I am sorry if I don't understand you completely yet. But we > are getting closer. 😀 > > Is it ok to tell Sherif what you mean and I can talk to him on Saturday > and we can sit down for a few minutes and I fix what needs to be fixed? > > Jan > > > On Wed, 20 Sept 2023 at 18:45, Daniel Wagner-Hall < > ***@***.***> wrote: > >> If you have a look at the "Success criteria" on >> https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/blob/main/300.md >> it says that "When this stage has been completed all of your data should >> exist only in your database - no data should be stored in your API or in >> your React app" >> >> Right now, your code only stores data in the API server - in server.js >> you have a videos array, and that's where all of your videos are >> stored. If you deploy a new version of your server, or if render decides to >> restart your server, all of the data people have uploaded will be lost. >> >> I understand you said you've created a database - that's a good step, >> but as far as I can tell your server isn't *using* the database. >> >> If you have a look in server.js in >> https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/pull/435/files >> you'll see that that project has changed its handlers so that it looks up >> information in the database, and when things are added or deleted they're >> added/deleted in the database rather than in an array. >> >> After you set up your database, did any data get put into it? What's >> your database being used for? >> >> — >> Reply to this email directly, view it on GitHub >> <#362 (comment)>, >> or unsubscribe >> <https://github.com/notifications/unsubscribe-auth/A27REKYDCYYGO6TWXJTDAZ3X3MTTZANCNFSM6AAAAAA35P2JAM> >> . >> You are receiving this because you authored the thread.Message ID: >> <CodeYourFuture/Full-Stack-Project-Assessment/pull/362/c1728182183@ >> github.com> >> >

softacoder added 18 commits August 17, 2023 10:13

Commit

01e66e6

commit

1033cda

commit

7923620

commit level 299 finished

c9eb157

Update html and css

e3519b0

commit cors etc

22722df

commit

167b7a4

commit render links

609f5dc

commit render links

c4694e1

commit

1563d6c

it worked in localhost with render it does not.

commit

5e3dd97

test

0a61322

commit

45e81b9

Commit html, css

bc77a34

Commit google maps, html, css

b493b90

commit

afaec74

commit

3670f4a

commit

9b77266

softacoder changed the title ~~London10_Jan_Softa_Full-Stack_Project_Assessment~~ London10_Jan_Softa_Full-Stack_Project_Assessment_Level300 Aug 24, 2023

softacoder added 4 commits August 25, 2023 12:05

commit index.js

c518ede

Updated .gitignore and removed node_modules

70cdeb0

gitignore commit

088d3f1

commit install react player

aeba518

migmow reviewed Sep 1, 2023

View reviewed changes

migmow added the Reviewed label Sep 1, 2023

Commit

ab175bf

I did some small stuff - added hamburger menu, FAQ, ToA. And removed and updated the previous code.

illicitonion reviewed Sep 18, 2023

View reviewed changes

softacoder added 2 commits September 22, 2023 18:25

commit

42bba22

commit

43bef2a

softacoder added 8 commits September 25, 2023 09:31

Commit with sql code

02bac80

commit

5eb20e0

commit

4b16bcb

moved server.js back to map server after testing moving it to client map

commit testing

81c7338

added pg dependency

f0a01ea

added env dependency

870f377

commit add pg and dotenv

2ee135f

commit increased no of characters

df485b4

illicitonion reviewed Sep 26, 2023

View reviewed changes

commit changes localhost

da55874

commit

18f6e28

Dedekind561 closed this Apr 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

London10_Jan_Softa_Full-Stack_Project_Assessment_Level300 #362

London10_Jan_Softa_Full-Stack_Project_Assessment_Level300 #362

softacoder commented Aug 24, 2023

migmow Sep 1, 2023

migmow Sep 1, 2023

migmow Sep 1, 2023

migmow Sep 1, 2023

migmow Sep 1, 2023

migmow Sep 1, 2023

migmow Sep 1, 2023

migmow Sep 1, 2023

migmow Sep 1, 2023

migmow left a comment

illicitonion left a comment

illicitonion Sep 18, 2023

illicitonion Sep 18, 2023

illicitonion Sep 18, 2023

softacoder commented Sep 19, 2023 via email

softacoder commented Sep 19, 2023 via email

illicitonion commented Sep 19, 2023

softacoder commented Sep 20, 2023 via email

softacoder commented Sep 20, 2023 via email

illicitonion commented Sep 20, 2023

softacoder commented Sep 20, 2023 via email

softacoder commented Sep 23, 2023 via email

softacoder commented Sep 23, 2023 via email

illicitonion left a comment

illicitonion Sep 26, 2023

softacoder commented Sep 26, 2023 via email

		import "./App.css";
		import VideoComponent from "./VideoComponent";

		@@ -37,6 +37,44 @@ const VideoComponent = ({ video, onUpVote, onDownVote, onRemove }) => {

		export default VideoComponent;

		// version5 this works on all. but not same size youtube videos


		app.listen(port, () => console.log(`Listening on port ${port}`));

		// update6

London10_Jan_Softa_Full-Stack_Project_Assessment_Level300 #362

London10_Jan_Softa_Full-Stack_Project_Assessment_Level300 #362

Conversation

softacoder commented Aug 24, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

migmow left a comment

Choose a reason for hiding this comment

illicitonion left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

softacoder commented Sep 19, 2023 via email

softacoder commented Sep 19, 2023 via email

illicitonion commented Sep 19, 2023

softacoder commented Sep 20, 2023 via email

softacoder commented Sep 20, 2023 via email

illicitonion commented Sep 20, 2023

softacoder commented Sep 20, 2023 via email

softacoder commented Sep 23, 2023 via email

softacoder commented Sep 23, 2023 via email

illicitonion left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

softacoder commented Sep 26, 2023 via email