-
Notifications
You must be signed in to change notification settings - Fork 0
Rifaq whats app clone sidebar #8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Conversation
|
||
const AddForm = () => { | ||
const [categoryOpen, setCategoryOpen] = useState(false); | ||
const cat = categories; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do you need to assign to another const?
const [modalOpen, setModalOpen] = useState(false); | ||
const handleTitle = (e) => { | ||
setTitle(e.target.value); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
single line
setAmount(""); | ||
return; | ||
} | ||
setAmount(val); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you could use ternary ..
isNaN(val) ? setAmount(“”) : setAmount(val);
const handleSubmit = () => { | ||
if (title === "" || amount === "" || !category) { | ||
const notify = () => toast("Please enter complete data"); | ||
notify(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
do u need notify const? You could directly call the toast method
<input | ||
placeholder="Give a name to your expenditure" | ||
value={title} | ||
onChange={(e) => handleTitle(e)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onChange={(e) => handleTitle(e)} | |
onChange={handleTitle} |
<input | ||
placeholder="Enter Amount" | ||
className="amount-input" | ||
onChange={(e) => handleAmount(e)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onChange={(e) => handleAmount(e)} | |
onChange={handleAmount} |
} | ||
|
||
@media only screen and (max-width: 1024px) { | ||
.card-title { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.card-title { | |
.card-title, | |
.card-amount { |
} | ||
.card-amount { | ||
font-size: 18px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove
} | ||
|
||
@media only screen and (max-width: 512px) { | ||
.card-title { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.card-title { | |
.card-title, | |
.card-amount { |
} | ||
.card-amount { | ||
font-size: 16px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove
|
||
const Footer = () => { | ||
return <footer>Made with ❤️ by Rifaq</footer>; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Single line
type="text" | ||
placeholder="Search for Expenses" | ||
value={query} | ||
onChange={(event) => handleQuery(event)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onChange={(event) => handleQuery(event)} | |
onChange={handleQuery} |
padding: 12px 0; | ||
align-items: center; | ||
} | ||
.home-topfold { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.home-topfold { | |
.home-topfold, | |
.add-topfold { |
display: flex; | ||
justify-content: space-between; | ||
flex: 1; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove after above change
No description provided.