DocConnect v1 FrontEnd PR #19

misalazeem · 2023-10-02T17:15:38Z

Note to Reviewer # 2: I didn't realize the deployment didn't reset on the latest change. so could be kind enough to check on local. My partner isn't available to redeploy. Thank you

Link To Backend PR: Click here

Hi Code Reviewer,

Following are the tasks completed in this Pull Request:

The user logs in to the website, only by typing the username (a proper authenticated login is a requirement if your group is made of 5 people).

In the navigation panel, the user can see links to:

Motorcycles/doctors/classes/items that you selected as a theme.
"Reserve" form.
"My reservations".
"Add motorcycle/doctor/class/item that you selected as a theme" (the link is visible to everybody).
"Delete motorcycle/doctor/class/item that you selected as a theme" (the link is visible to everybody).
On the main page, the user can see a [list of motorcycles/doctors/classes/items that you selected as a theme]

(https://www.behance.net/gallery/26425031/Vespa-Responsive-Redesign/modules/173005577).
List

When the user selects a specific item, they can see the details page with its full description (skip the "Rotate image" button).
In the details page, the user can click the "Reserve" button (in the design you can see the "Configure" button - please replace it with the "Reserve" button).

Details

When the user clicks the "Add item" link in the navigation panel they can see a form for adding a new item.
Make the app responsive, creating both mobile and desktop versions.

Additional features - Required for teams with 3-4 & 5 members (optional for others)

When the user clicks the "Delete item" link in the navigation panel they can see a list of all items with title and "Delete" button.
When the user clicks the "Delete" button, the selected item is marked as removed and does not show on the main list anymore.
To reserve an appointment, the user has to select a date and city (username and selected item are autofilled).
Use the design based on the "Book a vespa test-ride" and add all necessary inputs.
The user can also access the "Reserve" page from the navigation panel. In that case only username is autofilled.
Booking
When the user clicks the "My reservations" link in the navigation panel they can see a list of their reservations (with information about item name, date and city).
Add full documentation for your API.

Additional features - Required only for teams with 5 members (optional for others)

Implement proper user authentication from the front-end to the server.
Make sure that the "Add item" and "Delete item" links are accessible only by users who are admins.

Setup React App For Frontend

Feature/home main page

Login signup scaffold

Feature/appointmnet list

… retrieval

Fetching Data For Doctor & Finalize Styling

…nnect-Frontend into Fix/slider-styling

PR: Fix/slider styling

Meltrust

Hi @misalazeem,

Good job so far!
There are some issues that you still need to work on to prepare your project for the final evaluation, but you are almost there!

You are really close to finishing the Microverse program!! Keep it up! 👍👍👍

After implementing the requested changes, please submit another review request. ♻️

Check the comments under the review.

Cheers and Happy coding!👏👏👏

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the previous reviews unless it is requested otherwise.

Meltrust · 2023-10-02T18:32:17Z

src/App.js

+
+const queryClient = new QueryClient();
+
+function App() {


Please, kindly refactor this and all other functions in your project to ES6 arrow functions, so your code complies with the latest standards.

Refactoring is easy:

const App = () => { // ... }

Explanation

The function keyword has been soft deprecated in almost all the software industry in favor of ES6 arrow functions. This means, almost nobody uses it anymore, so much that it's considered a non-best practice.

You can do a search in Vscode for the "function" word, and correct as needed. Shouldn't take you more than 5-10 min so don't worry (I found 4):

That way, your code will meet the latest standards. 💪

Meltrust · 2023-10-02T18:43:03Z

src/routes/SignUp.jsx

+import Input from '../components/Input';
+import Button from '../components/Button';
+
+const SignUp = () => {


Every time I sign up or login, I get this error:

I can get into the app, but the error always shows up "Couldn't find an active session"

Kindly, fix this error so your app behaves correctly. 👍

Meltrust · 2023-10-02T18:52:44Z

src/routes/SignUp.jsx

+import Input from '../components/Input';
+import Button from '../components/Button';
+
+const SignUp = () => {


When I try to use the provided admin credentials, I get this error:

Kindly, take a look at this issue so the "add" and "delete" can be accessed.

note: This may be working on your end because your browser's local storage is already populated, which is not the case for new users. In order to correctly debug this, kindly test it on an incognito tab.

note 2: This means I couldn't get into the admin functionality. This will be taken a look in the next review.

Requested changes

Refreshing deploy.

Ci

mcrd25

Hi Team,

Great work on making the changes requested by a previous reviewer 👏
You've done well implementing some of the requested changes, but there are still some which aren't addressed yet.

Highlights

Good job implementing requested changes 👍

Required Changes ♻️

Check the comments under the review.
Now, i totally get if you ignore my requested changes since they were not mentioned before, but please consider for final evaluation, you are also free to ignore.

I am not seeing tests for your Front-End code - this is something we expect to be implemented for the final evaluation. Here are some resources you can use:

There are some candidates to make some of these html components reusable.

Optional suggestions

[OPTIONAL] Don't forget that the application needs to look exactly like design with exception of photos, titles and descriptions
[OPTIONAL] Seeing where you can make code better by following best practices: See the following articles
- https://www.freecodecamp.org/news/best-practices-for-react/
- https://betterprogramming.pub/21-best-practices-for-a-clean-react-project-df788a682fb

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.

Hope all is well, and that my comments were helpful. 😸

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me 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.

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.
Also, you do not have to implement all requested changes, as this is up to you in the end, but I strongly recommend you implement them.

mcrd25 · 2023-10-03T00:31:28Z

src/components/Input.jsx

+    <div className="relative h-10 w-full min-w-[200px]">
+      <input
+        type={type}
+        className="peer h-full w-full rounded-[7px] border border-gray-400 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-gray-400 focus:border-2 focus:border-green-400 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"


[OPTIONAL] these class names are pretty long, consider using styled components or variables for long className, it makes code much cleaner.

mcrd25 · 2023-10-03T00:32:03Z

src/components/Input.jsx

+        {...register(name)}
+      />
+      <label
+        className="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-gray-400 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-gray-400 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-green-400 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-green-400 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-green-400 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"


[OPTIONAL] these class names are pretty long, consider using styled components or variables for long className, it makes code much cleaner.

mcrd25 · 2023-10-03T00:32:20Z

src/components/Select.jsx

+    <div className="relative h-10 min-w-[200px]">
+      <select
+        {...register(name)}
+        className="peer h-full w-full rounded-[7px] border border-gray-400 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 empty:!bg-red-500 focus:border-2 focus:border-green-400 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"


[OPTIONAL] these class names are pretty long, consider using styled components or variables for long className, it makes code much cleaner.

mcrd25 · 2023-10-03T00:32:38Z

src/components/Select.jsx

+        ))}
+      </select>
+      <label
+        className="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-gray-400 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-gray-400 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-green-400 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-green-400 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-green-400 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"


[OPTIONAL] these class names are pretty long, consider using styled components or variables for long className, it makes code much cleaner.

mcrd25 · 2023-10-03T00:34:55Z

src/components/Sidebar.jsx

+            <button
+              type="button"
+              onClick={() => directLink('/doctors')}
+              className="block w-full"
+            >
+              List of Doctors
+            </button>
+          </li>
+          <li className="px-8 py-4 transition-colors border-b cursor-pointer border-white-700 hover:text-green-400">
+            <button
+              type="button"
+              onClick={() => directLink('/appointment-list')}
+              className="block w-full"
+            >
+              Check your Appointments
+            </button>
+          </li>
+          <li className="px-8 py-4 transition-colors border-b cursor-pointer border-white-700 hover:text-green-400">
+            <button
+              type="button"
+              onClick={() => directLink('/create-appointment')}
+              className="block w-full"
+            >
+              Schedule a new Appointment
+            </button>
+          </li>
+          { userInfo.role === 'admin' ? (
+            <>
+              <li className="px-8 py-4 transition-colors border-b cursor-pointer border-white-700 hover:text-green-400">
+                <button
+                  type="button"
+                  onClick={() => directLink('/add-docs')}
+                  className="block w-full"
+                >
+                  Add a new Doctor
+                </button>
+              </li>
+              <li className="px-8 py-4 transition-colors border-b cursor-pointer border-white-700 hover:text-green-400">
+                <button
+                  type="button"
+                  onClick={() => directLink('/delete-docs')}
+                  className="block w-full"
+                >
+                  Delete a Doctor
+                </button>
+              </li>
+            </>
+          ) : (<></>)}
+          <li className="px-8 py-4 transition-colors border-b cursor-pointer border-white-700 hover:text-green-400">
+            <button
+              type="button"
+              onClick={() => directLink('/logout')}
+              className="block w-full"
+            >
+              Sign out
+            </button>
+          </li>


These button list items could be abstracted into a subcomponent and you can clean up the code by using some sort of array/map combination. I strongly recommend this.

mcrd25 · 2023-10-03T00:36:44Z

src/components/Sidebar.jsx

+            <li className="w-full px-4 py-4 transition-all rounded-xl text-start hover:text-white hover:bg-green-400">
+              <Link
+                to="/doctors"
+                className="block w-full "
+              >
+                Doctors
+              </Link>
+            </li>
+            <li className="w-full px-4 py-4 transition-all rounded-xl text-start hover:text-white hover:bg-green-400">
+              <Link
+                to="/appointment-list"
+                className="block w-full"
+              >
+                Check your Appointments
+              </Link>
+            </li>
+            <li className="w-full px-4 py-4 transition-all rounded-xl text-start hover:text-white hover:bg-green-400">
+              <Link
+                to="/create-appointment"
+                className="block w-full"
+              >
+                Schedule a new Appointment
+              </Link>
+            </li>
+            { userInfo.role === 'admin' ? (
+              <>
+                <li className="w-full px-4 py-4 transition-all rounded-xl text-start hover:text-white hover:bg-green-400">
+                  <Link
+                    to="/add-docs"
+                    className="block w-full"
+                  >
+                    Add a new Doctor
+                  </Link>
+                </li>
+                <li className="w-full px-4 py-4 transition-all rounded-xl text-start hover:text-white hover:bg-green-400">
+                  <Link
+                    to="/delete-docs"
+                    className="block w-full"
+                  >
+                    Delete a Doctor
+                  </Link>
+                </li>
+              </>
+            ) : (<></>)}
+            <li className="w-full px-4 py-4 transition-all rounded-xl text-start hover:text-white hover:bg-green-400">
+              <Link
+                to="/logout"
+                className="block w-full"
+              >
+                Sign out
+              </Link>
+            </li>


[OPTIONAL] Consider same as above for the Link / List item to make code cleaner

mcrd25 · 2023-10-03T00:36:58Z

src/components/Textarea.jsx

+    <div className="relative w-full min-w-[200px]">
+      <textarea
+        {...register(name)}
+        className="peer h-full min-h-[100px] w-full resize-none rounded-[7px] border border-gray-400 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-gray-400 focus:border-2 focus:border-green-400 focus:border-t-transparent focus:outline-0 disabled:resize-none disabled:border-0 disabled:bg-blue-gray-50"


[OPTIONAL] these class names are pretty long, consider using styled components or variables for long className, it makes code much cleaner.

mcrd25 · 2023-10-03T00:37:07Z

src/components/Textarea.jsx

+        placeholder=" "
+      />
+      <label
+        className="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-gray-400 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-gray-400 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-green-400 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-green-400 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-green-400 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"


[OPTIONAL] these class names are pretty long, consider using styled components or variables for long className, it makes code much cleaner.

Meltrust

Hi team,

Wow, you did it 🎉

Thank you for implementing the changes requested by the previous reviewer 💪 🥇 ㊗️

Well done!

Your project is complete! There is nothing else to say other than... it's time to merge it
Congratulations! 🎉

Optional suggestions

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, remember to tag me in your question 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.

misalazeem and others added 30 commits September 22, 2023 17:46

setting up create react app and dependencies

a59cf72

Setup Linters & Github Flow

6b00b26

Setup tailwind

f9b170a

Setup basic routes

9e00ca5

Setup Redux & Update Readme.md File

00781d7

Merge pull request #1 from Atril33/project-setup

1f43226

Setup React App For Frontend

creating home page

6f8801b

implementing the sidebar and mobile menu for other pages

5e4650c

Merge pull request #2 from Atril33/feature/home-main-page

44b07c6

Feature/home main page

adding fixes

8cf9959

fixing

b3e9d4d

removing react query

1e9a881

removing unnecessary comment

972737c

Idea files updates

668991c

Update ESLint to accept props spreading

614f259

Add react-toaster

f067488

Global axios config

8f94c42

Implement redux for user Login/SignUp

0e10f3f

Login/Signup scallfolds

1ad2e0a

making corrections

bf4076e

Update session logic

74f0eed

adding create appointment route and required components

9ed1f55

fixing linter

72626b9

Merge pull request #3 from Atril33/login_signup_scaffold

ac6eb4b

Login signup scaffold

fixing conflicts

0f7035f

fixing imports

7edd27b

fixing liner

e0ee36e

Merge pull request #4 from Atril33/feature/appointmnet-list

87a6b7e

Feature/appointmnet list

Fetch Data From API

0267c09

feature: Applying current user to reservation booking and appointment…

f4e9835

… retrieval

Atril33 and others added 9 commits October 2, 2023 14:10

Add Slider Function

7f14da1

Merge pull request #15 from Atril33/final-doctor-styling

b4dd543

Fetching Data For Doctor & Finalize Styling

Implement hook to check screen size

cf3a145

Implement Doctors List slider

8d286df

Fix linter issues

eb26fc8

fixing linters and slight gui issues

0cd42e8

Merge branch 'Fix/slider-styling' of https://github.com/Atril33/DocCo…

2a96d24

…nnect-Frontend into Fix/slider-styling

Merge pull request #18 from Atril33/Fix/slider-styling

d55edd4

PR: Fix/slider styling

Add serve

6f25a30

misalazeem mentioned this pull request Oct 2, 2023

DocConnect v1.0 Backend PR Atril33/DocConnect-Backend#34

Merged

11 tasks

Update README.md

757609d

Meltrust suggested changes Oct 2, 2023

View reviewed changes

misalazeem and others added 6 commits October 3, 2023 02:37

fixing the error showing up when the user logs in

30628c7

changing App component into arrow function

ada4845

converting all functions to ES6 arrow function format

262c0f7

Merge pull request #20 from Atril33/requested-changes

e254e96

Requested changes

Merge pull request #21 from Atril33/requested-changes

9686b18

Refreshing deploy.

Merge pull request #22 from Atril33/ci

c95a4c5

Ci

mcrd25 suggested changes Oct 3, 2023

View reviewed changes

misalazeem and others added 9 commits October 3, 2023 14:35

Adding dependencies for tests and added test for Home

e75441c

writing tests for the following routes Login, Logout, Signup

c844a85

adding remaining tests

4d8e053

updating readme

cb58d87

displaying actual doctor image

2e0abf0

Update links in Sidebar

e804f86

Fix linter issues

f10539a

Merge remote-tracking branch 'origin/requested-changes-v2' into dev

58ca51e

Fix linters issue

7cbe0e2

Meltrust approved these changes Oct 3, 2023

View reviewed changes

andrianarivo merged commit 1544e62 into main Oct 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DocConnect v1 FrontEnd PR #19

DocConnect v1 FrontEnd PR #19

misalazeem commented Oct 2, 2023 •

edited

Loading

Meltrust left a comment

Meltrust Oct 2, 2023

Meltrust Oct 2, 2023

Meltrust Oct 2, 2023

mcrd25 left a comment

mcrd25 Oct 3, 2023

mcrd25 Oct 3, 2023

mcrd25 Oct 3, 2023

mcrd25 Oct 3, 2023

mcrd25 Oct 3, 2023

mcrd25 Oct 3, 2023

mcrd25 Oct 3, 2023

mcrd25 Oct 3, 2023

Meltrust left a comment

DocConnect v1 FrontEnd PR #19

DocConnect v1 FrontEnd PR #19

Conversation

misalazeem commented Oct 2, 2023 • edited Loading

Meltrust left a comment

Choose a reason for hiding this comment

You are really close to finishing the Microverse program!! Keep it up! 👍👍👍

After implementing the requested changes, please submit another review request. ♻️

Choose a reason for hiding this comment

Explanation

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcrd25 left a comment

Choose a reason for hiding this comment

Highlights

Required Changes ♻️

Optional suggestions

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

Meltrust left a comment

Choose a reason for hiding this comment

Wow, you did it 🎉

Thank you for implementing the changes requested by the previous reviewer 💪 🥇 ㊗️

Well done!

Optional suggestions

misalazeem commented Oct 2, 2023 •

edited

Loading