15 create new campaign page #31
Conversation
✅ Deploy Preview for elegant-klepon-993877 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
There was a problem hiding this comment.
good work. the file upload component looks very good 😄
some comments
- the button getting pushed down issue, u can refer to the 2 files that i will be sending u on tele to see how to structure the components
- the font size is very big. refer to the file i send u also for the updated size
- the drag and drop not working after 1st file might be bcos it is buggy. i managed to get it to work multiple times at some times
- add form validation and make every field required
- add state or some logic of keeping track of all the values. we do not have API yet but we can implement all logic except for the step of calling API
| // const[value, setValue] = useState<DateRange<Date>>([null, null]); | ||
| const[startDate, setStartDate] = useState(null); | ||
| const[endDate, setEndDate] = useState(null); |
There was a problem hiding this comment.
I understand that now we still just making the skeletal pages, but can already start considering how you are going to store the states for all the fields being entered. you can either have an object that stores the value of all fields or one state variable for each value. otherwise, if you are using Formik as mentioned below, there might be a different way that Formik can keep track of all the states. You should be implement all logic except for the step where we actually call API to send our form values
| const mappedAcc = accFiles.map((file) => ({ file, errors: [], id: getNewId() })); | ||
| const mappedRej = rejFiles.map((r) => ({ ...r, id: getNewId() })); | ||
| setFiles((curr) => [...curr, ...mappedAcc, ...mappedRej]); |
There was a problem hiding this comment.
think we can do away with id and just use the file's name as the key for ur map below, and we should not allow file with same name to be uploaded.
https://stackoverflow.com/questions/26296232/dropzone-prevent-uploading-of-duplicate-files
| let currentId = 0; | ||
|
|
||
| function getNewId() { | ||
| return ++currentId; | ||
| } |
There was a problem hiding this comment.
not good to have a global variable. if we really need an id, put it as a state in the component.
Closes #15 .
Overview of changes:
Completed a basic page of Create New Campaign page.
Anything you'd like to highlight/discuss:
However, I do need help in a few things in the "Upload Media" section.
If it helps, I followed this tutorial to do.
Thank you !