Event link#49
Conversation
added pages with router and navbar
Authentication Api integration Redux Register Login Logout
| @@ -1,5 +1,42 @@ | |||
| # Rocket Academy Coding Bootcamp: Project 3 Frontend | |||
|
|
|||
| # Event Link | |||
There was a problem hiding this comment.
I am missing here how to setup the environment variables to successfully run the project
| useRefreshTokens | ||
| cacheLocation="localstorage" | ||
| > | ||
| <BrowserRouter> |
There was a problem hiding this comment.
Why use two different routers here, when they both have the same setup?
| import AdminEventPage from "./pages/adminPages/adminEventPage.js"; | ||
|
|
||
| const root = ReactDOM.createRoot(document.getElementById("root")); | ||
| root.render(<App />); |
There was a problem hiding this comment.
Why did you delete the App.js? That is your entrypoint component usually
| useEffect(() => { | ||
| if (!isAuthenticated && !isLoading) { | ||
| navigate("/admin"); | ||
| } | ||
| }, [isAuthenticated, isLoading, navigate]); |
There was a problem hiding this comment.
This exists pretty much in every admin component. Maybe we could use context to identify authentication status and re-use that instead of running the same useEffect in every component
| const formatDate = (string) => { | ||
| const date = new Date(string); | ||
| const options = { | ||
| day: "numeric", | ||
| month: "long", | ||
| hour: "2-digit", | ||
| minute: "2-digit", | ||
| }; | ||
| return date.toLocaleDateString("en-US", options); | ||
| }; |
There was a problem hiding this comment.
this function could live outside of the component
| const formatDate = (string) => { | ||
| const date = new Date(string); | ||
| const options = { | ||
| day: "numeric", | ||
| month: "long", | ||
| hour: "2-digit", | ||
| minute: "2-digit", | ||
| }; | ||
| return date.toLocaleDateString("en-US", options); | ||
| }; | ||
|
|
||
| const formatHour = (string) => { | ||
| const date = new Date(string); | ||
| const options = { | ||
| hour: "2-digit", | ||
| minute: "2-digit", | ||
| }; | ||
| return date.toLocaleTimeString("en-US", options); | ||
| }; |
There was a problem hiding this comment.
I find that you generally have a lot of opportunities missed out where you could have refactored code, and re-used certain functions and components. Try to not do things too manually all the time. This is bloating up your codebase and makes it harder to read also.
| if (loading) { | ||
| return <p>Loading...</p>; | ||
| } |
There was a problem hiding this comment.
Why did you not do this everywhere you were just displaying a loading p tag?
| } else if (status === "open") { | ||
| return <Navigate to="/checkout" />; | ||
| } else { | ||
| return <p>Status: {status}</p>; | ||
| } |
There was a problem hiding this comment.
subjective, but i would place the one-liner conditions on top in separate if statements that return early. then place the huge chunk of code below those
| gestureHandling={"greedy"} | ||
| disableDefaultUI={true} | ||
| > | ||
| {markers} |
There was a problem hiding this comment.
this variable can be undefined, as such you would not render any markers? Is that desired?
| @@ -0,0 +1,7 @@ | |||
| .div-no-event { | |||
There was a problem hiding this comment.
I do not see a userPage component, so I assume this file is not named correctly? Especially since it is only used on the searchPage component.
| import theme from "../../theme"; | ||
| import Redirect from "../../components/Redirect.js"; | ||
|
|
||
| function CustomTabPanel(props) { |
There was a problem hiding this comment.
| function CustomTabPanel(props) { | |
| function CustomTabPanel({ children, value, index, ...other }) { |
3 participants
No description provided.