Space Travellers' Hub: Rocket #199

amrendrakind · 2023-05-31T16:59:49Z

Space Travellers' Hub

Created the homepage leading to the "Rockets" section

It let you make a reservation and show changes on time

Created a "Missions" sections

Shows a list of missions and allows to join them showing changes on time

Created a "Dragons" sections

It let you make a reservation and show changes on time

Created a "My Profile" section

Shows both reserved Rockets and Joined missions and it updates on time

All the information is taken from the provided APIs

Basic Dependency Installation

Nav Setup

Style : Main Page

Testing : Rockets Components

Ol-create

Hi @amrendrakind 👋 ,

Good job so far working on the project requirements!

There are some issues that you still need to work on to go to the next project but you are almost there!

To Highlight 🎯

No linter errors. ✔️
GitHub flow is followed. ✔️
Good Pr title/description ✔️
Good commit history ✔️

Required Changes ♻️

Kindly fix the issues described in the pr thread below in order to get an approval

Optional suggestions
Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

Cheers and Happy coding!clapclapclap

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me @Ol-create in your question so I can receive the notification.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
Happy coding! 🎉 🎉

Ol-create · 2023-06-01T07:57:24Z

src/App.js

-import logo from './logo.svg';
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
 import './App.css';
+import NotFound from './components/pages/NotFound';
+import Dragons from './components/dragon/dragons';
+import MissionsContainer from './components/pages/MissionsContainer';
+import Rockets from './components/rockets/Rockets';
+import NavBar from './components/navbar/NavBar';
+import ProfileContainer from './components/pages/ProfileContainer';


Please take into consideration the following suggestions to enhance the readability of your code:

Group the imports: Organize the imports into logical groups based on their source or functionality. For example, you can have separate groups for built-in modules, third-party libraries, and local project files.

Alphabetize the imports within each group: Within each import group, arrange the imports in alphabetical order based on their source. This approach provides a consistent and predictable ordering for easy reference.

By implementing these recommendations, your code will become more structured and easier to navigate.

Thank you for your suggestions to enhance the readability of my code. 💯

Ol-create · 2023-06-01T09:46:57Z

src/components/dragon/DragonElement.js

+const DragonElement = (props) => {
+  const dispatch = useDispatch();
+  const {
+    id, name, description, flickrImages, reserved,
+  } = props;


Please consider to destructure the props directly in the function signature.
To improved readability and avoiding repetition:+1:

I appreciate your advice and have implemented it in this approach to enhance the readability and maintainability of my code. Thank you for your valuable suggestion. 👍

Ol-create · 2023-06-01T09:53:46Z

src/components/dragon/DragonElement.js

+  DragonElement.defaultProps = {  // Modifying defaultProps inside the component is not recommended
+    reserved: false,
+  };
+
+  const reserveDragonHandler = (e) => {
+    if (props.reserved) {  // Accessing props directly in the handler is not efficient
+      dispatch(DragonsActions.unreserveDragon(e.target.id));
+    } else {
+      dispatch(DragonsActions.reserveDragon(e.target.id));
+    }
+  };
+
+  const reservation = props.reserved ? 'Cancel Reservation' : 'Reserve Dragon';  // Accessing props directly
+  const btnClass = props.reserved ? 'grayBtn' : 'blueBtn';  // Accessing props directly
+
+  return (
+    <div className="dragonEl">
+      <div className="dragonImg">
+        <img src={flickrImages} alt={description} />
+      </div>
+      <div>
+        <h2>{name}</h2>
+        <p>
+          {props.reserved && <span className="badge">Reserved</span>}  {/* Using unnecessary parentheses */}
+          {description}


I suggest that you remove unnecessary comments, to Improved code readability and avoiding confusion and misinformation 🎉 🎉

Ol-create · 2023-06-01T09:59:15Z

src/components/dragon/JoinButton.js

+const JoinButton = (props) => {
+  const { dragon } = props;
+  const { id, reserved } = dragon;


Please destructured the dragon prop directly in the function signature.
To improved readability and avoiding repetition 👍

Thank you for your valuable suggestion.
I have implemented it 👍

Ol-create · 2023-06-01T10:06:40Z

src/components/dragon/JoinButton.js

+JoinButton.propTypes = {
+  dragon:
+        PropTypes.objectOf(
+          {
+            id: PropTypes.number,
+            reserved: PropTypes.string,
+          },
+        ).isRequired,
+};


Please consider removing unnecessary nesting in the propTypes definition.
By removing unnecessary nesting, you make the propTypes definition more straightforward and easier to comprehend. It allows developers to quickly identify and understand the expected props for a component without having to navigate through unnecessary layers of nesting. 🎉 🎉

I appreciate your advice
I have implemented in this approach to enhance the readability and maintainability of my code.
Thank you for your valuable suggestion. 🥇

Ol-create · 2023-06-01T10:51:01Z

src/components/dragon/dragons.js

+        {dragonsList.map((dragon) => (
+          <DragonElement
+            key={dragon.dry_mass_kg}
+            id={dragon.id}
+            name={dragon.name}
+            description={dragon.description}
+            flickrImages={dragon.flickr_images[0]}
+            reserved={dragon.reserved}
+          />


Please consider destructuring the necessary properties (id, name, description, flickr_images, reserved) directly
from the dragon object, to improved readability and avoiding repetition 👍

I appreciate your advice
I have implemented in this approach to enhance the readability and maintainability of my code.
Thank you for your valuable suggestion. 🥇 🥇

src/components/missions/MissionItem.js

src/components/missions/ProfileMissions.js

Ol-create · 2023-06-01T11:12:08Z

src/components/navbar/NavBar.js

+      <ul className="nav-links">
+        {links.map((link) => (
+          <li className="nav-link" key={link.id}>
+            <NavLink to={link.path}>


Please add the activeClassName prop to the NavLink component
to specify the class name for the active link. 👍

Thank you buddy 👍

Ol-create

Status: Approved 🍾 ✔️🎊

Congratulations! 🎉 Project Approved ✅

Good job so far. Well Done.👍🏻
Your project is complete! There is nothing else to say other than... it's time to merge it

To Highlight 🎉

No linter errors. ✔️
Git flow is followed. ✔️
You have followed JavaScript best practices. ✔️
Professional README file. ✔️
PR has a good title and summary. ✔️
Your app works as expected 💯 🥇
Your Design looks awesome, keep rocking 🚀

Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.

Cheers 🥂 and Happy coding!!! 👯💻

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please ping me @Ol-create when you comment so I can receive the notification.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

amrendrakind · 2023-06-01T13:05:50Z

Thank you @Ol-create 👍
I appreciate your time and effort 💯

amrendrakind and others added 30 commits May 17, 2022 02:56

Merge pull request #186 from amrendrakind/basic-dependency

9881da3

Basic Dependency Installation

Nav setup done

f0f8c13

Linter error fixed

fe15e39

Add Router

c67b34b

Update Navigation link underlined

462cbe0

Linter error fixed

d929192

Merge pull request #187 from amrendrakind/setup

1f9603f

Nav Setup

feat: create dragon api variable

64286a6

feat: create fetchDragon function to call api

da904fb

feat: import fetchDragon 'api function'

db8c97b

feat: create const. variables for action

3edb65c

feat: create initialState with empty array

9240688

feat: create getDragon function

c3d5508

feat: create reserveDragons action

0deca6f

feat: create unreserveDragon action

ebf72c6

feat: create reducer function

8ffd8b0

feat: use case statement to lay out reducer logic

d97f93f

feat: export reducer function

1b5ff8f

feat: import createStore, combineReducers, applyMiddleware from 'redux'

d63c88e

import thunk from 'redux-thunk'

71f9ee9

feat: import rockets from './dragons/dragon'

5608fa1

feat: add all reducers into one place

d9a79c3

feat: create store

779d027

feat: export store

91c5069

feat: install redux and redux-thunk

4f7e755

feat: import all necessary components

25e7f69

feat: dispatch getDragons action

ba03c27

feat: render dragon info with list element

a2dcb19

feat: import all necessary modules and component

8d720b3

feat: declare DragonElement Props

8eb0f1d

amrendrakind and others added 21 commits May 20, 2022 02:54

Update Logo: Space

b13df8a

Update Styling for ProfileRocket.js

3e63dc0

Update Styling for ProfileRocket.js

d20c47b

Folder restructured

4a5e57e

Folder restructured

bcb3d77

Update: Fetching and Dispatching data

73c3ab2

Update style for Rocket component

e60c23b

Update style for Mission component

ca6fdae

Linter error fixed

c21df56

Merge pull request #195 from amrendrakind/style-mainpage

393b752

Style : Main Page

Add Testing of Rockets components, NavBar and reducer

ba617c1

Add Testing of Missions

27ed368

Add Testing of App components

7444a02

Add Testing of App components

d311174

Add Testing of Dragon conponents

eaf366a

Linter error fixed

b1c826c

Merge pull request #197 from amrendrakind/testing-rocket

689c6bf

Testing : Rockets Components

Reviewer's reccomendation implemented

0a62b76

Update: Cancel Reservation on profile page

4434745

Dragon folder restructuring

946045a

Update: Cancel Reservation for Dragon on profile page

74137dc

amrendrakind requested a review from Ol-create May 31, 2023 17:00

amrendrakind assigned Ol-create May 31, 2023

Update DragonElement.js

da0ee13

Ol-create requested changes Jun 1, 2023

View reviewed changes

amrendrakind added 3 commits June 1, 2023 13:02

Update DragonElement.js

ca0e796

Update JoinButton.js

df7791f

Update App.js

2402d7f

Ol-create approved these changes Jun 1, 2023

View reviewed changes

Uh oh!

Space Travellers' Hub: Rocket #199

Are you sure you want to change the base?

Space Travellers' Hub: Rocket #199

Uh oh!

Conversation

amrendrakind commented May 31, 2023

Uh oh!

Ol-create left a comment

Choose a reason for hiding this comment

To Highlight 🎯

Required Changes ♻️

Uh oh!

Ol-create Jun 1, 2023 • edited by amrendrakind Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amrendrakind Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

Ol-create Jun 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amrendrakind Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

Ol-create Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

Ol-create Jun 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amrendrakind Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

Ol-create Jun 1, 2023 • edited by amrendrakind Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amrendrakind Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

Ol-create Jun 1, 2023 • edited by amrendrakind Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amrendrakind Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Ol-create Jun 1, 2023 • edited by amrendrakind Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amrendrakind Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

Ol-create left a comment

Choose a reason for hiding this comment

Status: Approved 🍾 ✔️🎊

Congratulations! 🎉 Project Approved ✅

To Highlight 🎉

Uh oh!

amrendrakind commented Jun 1, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Ol-create Jun 1, 2023 •

edited by amrendrakind

Loading

Ol-create Jun 1, 2023 •

edited

Loading

Ol-create Jun 1, 2023 •

edited

Loading

Ol-create Jun 1, 2023 •

edited by amrendrakind

Loading

Ol-create Jun 1, 2023 •

edited by amrendrakind

Loading

Ol-create Jun 1, 2023 •

edited by amrendrakind

Loading