London 10 | Maksim Lukianenko | Fullstack Project Assignment | Level 999 #337
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
feat(App.css): add center alignment to p element in container class feat(Modal.jsx): create Modal component for deleting bookings feat(Clip.jsx): create Clip component for displaying videos feat(Main.jsx): replace static video card with Clip component feat(http-hook.js): create custom hook for handling HTTP requests feat(package.json): add start script for nodemon feat(routes.js): create routes for getting videos feat(server.js): add CORS, MongoDB connection, and routes to server
feat(routes.js): update GET / route to retrieve all videos from MongoDB collection
refactor(Clip.jsx): remove unused code and replace iframe with ReactPlayer component feat(Container.jsx): create Container component to fetch and display videos refactor(Main.jsx): replace Clip component with Container component
feat(App.css): add styles for .video__header and .close-button feat(Modal.css): add styles for .modal and .modal__container fix(Modal.jsx): change text from "Delete booking?" to "Delete video?" feat(Clip.jsx): add functionality to delete video and change rating fix(Container.jsx): remove unused state variable feat(routes.js): add DELETE route to delete video by id
fix(Clip.jsx): remove useEffect import from react fix(Clip.jsx): remove unused console.log statements fix(Clip.jsx): change class attribute to className in JSX fix(Clip.jsx): add missing semicolons to function calls fix(Clip.jsx): update currentClip state when rating changes fix(Clip.jsx): update rating in updateRating function fix(Container.jsx): remove unused import statement feat(Container.jsx): add removeVideoLocally and changeRating functions feat(Container.jsx): update videos state when removing or changing rating fix(routes.js): remove unused console.log statement
feat(Clip.jsx): add support for updating rating locally and remotely fix(Container.jsx): fix useState initialization for currentClip feat(Container.jsx): add support for updating rating locally and remotely feat(routes.js): add PATCH route for updating video rating
…ntainer component fix(client): fix typo in Search component filename fix(client): fix typo in Search component placeholder fix(client): fix typo in Search component handleChange function fix(client): fix typo in Search component handleAdding function fix(client): fix typo in Search component addVideo function fix(client): fix typo in Container component filename fix(client): fix typo in Container component setCurrentClip function fix(client): fix typo in Container component removeVideoLocally function fix(client): fix typo in Container component changeRating function fix(client): fix typo in Container component changeRatingLocally function fix(client): fix typo in Clip component filename fix(client): fix typo in Clip component handleDelete function fix(client): fix typo in Clip component handleHover function fix(client): fix typo in Clip component changeRating function fix(client): fix typo in Clip component return statement fix(client): fix typo in Clip fix(routes.js): fix formatting and add missing semicolons feat(routes.js): add POST route to create new video clip
…cts with other services fix(server.js): update database connection URL to use the correct environment variables fix(routes.js): update the findOneAndUpdate method to return the updated document by setting the 'new' option to true feat(UploadComponent.jsx): add functionality to add a new video by sending a POST request to the server and updating the local state feat(Search.jsx): create a search component to filter videos based on a search query refactor(App.js): remove Selection component as it is no longer needed refactor(Container.jsx): pass the setData function as a prop to update the data state in App.js when videos are fetched from the server
…o improve UI fix(App.js): change variable name from data to videos for clarity and consistency feat(Container.jsx): add sortOption state to manage sorting option and handleSortOptionChange function to sort videos based on selected option
…formance and loading speed fix(App.css): update color variables and font family to improve consistency and readability feat(App.js): add Footer component to the main App component for better user experience and branding fix(Modal.css): update color variables and font family to improve consistency and readability fix(Modal.jsx): update button text and styling for better user experience fix(Container.jsx): remove unused sortOption state variable feat(Footer.jsx): create Footer component with CYF logo and attribution text fix(UploadComponent.jsx): add validation for required fields and handle error when adding video
| import Footer from "./components/Footer"; | ||
|
|
||
| const App = () => { | ||
| const [data, setData] = useState([]); |
There was a problem hiding this comment.
"data" is a very generic name for a piece of state - can you think of a name that better describes what data is stored here?
|
|
||
| const searchForVideo = () => { | ||
| const filteredVideos = data.filter((video) => { | ||
| return video.title.toLowerCase().includes(searchQuery); |
There was a problem hiding this comment.
Is the search query guaranteed to be lower case? If not, what will happen if I search for "Hello"?
| const filteredVideos = data.filter((video) => { | ||
| return video.title.toLowerCase().includes(searchQuery); | ||
| }); | ||
| setVideos(filteredVideos); |
There was a problem hiding this comment.
I would generally expect you not to discard the original list of videos, because ideally you wouldn't need to re-fetch them if I remove/change my search query... Can you think how to avoid throwing away the full list of videos when searching?
Comment on lines
+35
to
+36
| setCurrentClip({ ...currentClip, rating: currentClip.rating + 1 }); | ||
| updateRating(currentClip.id, currentClip.rating + 1); |
There was a problem hiding this comment.
It's interesting to need both of these calls - I would kind of expect just one function to be passed as a prop to update rating, and that would update all of the things needed - what do you think?
| const UploadComponent = ({ addVideo }) => { | ||
| const randomId = uuidv4(); | ||
| const [videoData, setVideoData] = useState({ | ||
| id: randomId, |
There was a problem hiding this comment.
I'd generally expect the server to be generating IDs (because it can guarantee they're actually unique), rather than trusting the client to give it a unique value.
| }); | ||
| console.log(response); | ||
| } catch (err) { | ||
| console.log("Error adding video.", { error: err }); |
There was a problem hiding this comment.
A user will never see this error - how can you ensure the user actually knows when something went wrong, and what they should do about it?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I completed the project using JS, React, Node, and MongoDB via Mongoose. While building the project, I utilised components from previous projects, such as the Modal window and custom http-hook. Also for better consistency and security reasons, I created .env files to store API key and other data in both front and back ends without pushing them online.