Conversation
| @@ -13,3 +13,23 @@ Open [http://localhost:3000](http://localhost:3000) to view it in your browser. | |||
|
|
|||
There was a problem hiding this comment.
Would be great to also include install instructions!
| "@emotion/styled": "^11.11.0", | ||
| "@mui/icons-material": "^5.14.16", | ||
| "@mui/material": "^5.14.17", | ||
| "gh-pages": "^6.1.0", |
There was a problem hiding this comment.
I think this is probably a dev dependency. Can try using npm install -D gh-pages to install as dev dependency
| justifyContent: "center", | ||
| alignItems: "center", | ||
| padding: "5px 20px", | ||
| // bgcolor: "#daa06d", |
| import HomeIcon from "@mui/icons-material/Home"; | ||
| import { useNavigate } from "react-router-dom"; | ||
|
|
||
| const modalStyles = { |
There was a problem hiding this comment.
nice job defining this outside of the component
| setIsTransactionFormShown, | ||
| }) => { | ||
| const [showMessage, setShowMessage] = useState([]); | ||
| const [open, setOpen] = useState(false); |
There was a problem hiding this comment.
I would rather name this isOpen like a boolean
| }; | ||
|
|
||
| const handleSubmit = () => { | ||
| if (!activity || !items) { |
There was a problem hiding this comment.
I like your early returns, very good practice!
| if (getActivityData) { | ||
| return true; | ||
| } |
There was a problem hiding this comment.
| if (getActivityData) { | |
| return true; | |
| } | |
| if (getActivityData) return true; |
curly braces are not necessary for one liners, feel free to use it if you like it
| const getActivityData = JSON.parse(localStorage.getItem("activityDetails")); | ||
|
|
||
| const [activityDetails, setActivityDetails] = useState( | ||
| getActivityData ? getActivityData : { activity: "", items: "" } | ||
| ); |
There was a problem hiding this comment.
| const getActivityData = JSON.parse(localStorage.getItem("activityDetails")); | |
| const [activityDetails, setActivityDetails] = useState( | |
| getActivityData ? getActivityData : { activity: "", items: "" } | |
| ); | |
| const [activityDetails, setActivityDetails] = useState( | |
| JSON.parse(localStorage.getItem("activityDetails")) || { activity: "", items: "" } | |
| ); |
| return ( | ||
| <> | ||
| {!isTransactionFormShown ? ( | ||
| <> | ||
| <CreateForm | ||
| setActivityDetails={setActivityDetails} | ||
| setIsTransactionFormShown={setIsTransactionFormShown} | ||
| /> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <div style={{ overflow: "auto", height: "50vh" }}> | ||
| <AddTransactionsForm | ||
| activityDetails={activityDetails} | ||
| setIsTransactionFormShown={setIsTransactionFormShown} | ||
| /> | ||
| </div> | ||
| </> | ||
| )} | ||
| </> | ||
| ); |
There was a problem hiding this comment.
| return ( | |
| <> | |
| {!isTransactionFormShown ? ( | |
| <> | |
| <CreateForm | |
| setActivityDetails={setActivityDetails} | |
| setIsTransactionFormShown={setIsTransactionFormShown} | |
| /> | |
| </> | |
| ) : ( | |
| <> | |
| <div style={{ overflow: "auto", height: "50vh" }}> | |
| <AddTransactionsForm | |
| activityDetails={activityDetails} | |
| setIsTransactionFormShown={setIsTransactionFormShown} | |
| /> | |
| </div> | |
| </> | |
| )} | |
| </> | |
| ); | |
| if (!isTransactionFormShown) return <CreateForm ... /> | |
| return ( | |
| <div style={{ overflow: "auto", height: "50vh" }}> | |
| <AddTransactionsForm | |
| activityDetails={activityDetails} | |
| setIsTransactionFormShown={setIsTransactionFormShown} | |
| /> | |
| </div> | |
| ); |
There was a problem hiding this comment.
We can also return early for components to improve readability
| return greetings; | ||
| }; | ||
|
|
||
| let greetMessage = `${greetUser()} ${username},`; |
There was a problem hiding this comment.
| let greetMessage = `${greetUser()} ${username},`; | |
| const greetMessage = `${greetUser()} ${username},`; |
No description provided.