Downloading selected files #42
Conversation
also includes linking to firestore (if new user, add them to firestore)
need to think about this
|
Visit the preview URL for this PR (updated for commit 2baf747): https://mmp-site-b1c9b--pr42-download-files-wgzswji2.web.app (expires Tue, 02 Jul 2024 16:40:09 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 4eb870c89e876f1812e204af417359065d2a23b1 |
There was a problem hiding this comment.
This looks good! How does this relate to the firebase auth stuff? Let's try and check in sometime soon to go over this stuff! I had a thought around how to handle the split between static cms and firebase
We can have a github action copy data over to firebase storage when new content is pushed to main. Then users can have firebase do the auth stuff. The github action can also make zip files for this stuff too!
There was a problem hiding this comment.
@galenwinsor made the comments I would have made again. I'm just commenting so when you add in the fixes you won't have to get two approvals
src/components/DataTable.tsx
Outdated
| useEffect(() => { | ||
| const newSelectedFiles = files.filter((file) => file.selected) | ||
| // updateFileList is from parent -- updates parent state to pass to the form | ||
| // used for eventual history table to show what files user downloaded | ||
| updateFileList(newSelectedFiles.map((file) => file.file)) | ||
| }, [files]) | ||
|
|
There was a problem hiding this comment.
Could you get rid of this useEffect and the files state if you had the fileList state in the parent store the selected field?
| </Form.Field> | ||
| </Form.Root> | ||
| {filesToDownload.map((file) => { | ||
| const name = file.replace(/.+?(?=[^_]+$)/, "").replace(/\.[^.]*$/, "") |
There was a problem hiding this comment.
Could you add a comment saying what this does?
Lots of changes in this one, mostly because I uploaded all the codebooks for testing.
Files Added
Codebooks
The PDFs get uploaded to the public folder so users can easily access them (public/files).
MD files are created in src/content so that StaticCMS can display them in its UI
Component
DataForm.tsx : This is a parent react component that passes logic between the table and the download modal
Files Changed
Components
CustomInput and CustomTextarea : added functionality for radix form; passes ref from the form into the custom input
DataTable : receives the state change function from parent (DataForm), passes back the selected files on change
DownloadModal : Uses radix form and react-hook-form for some convenient form logic
Page
data.astro : uses the DataForm component to display reactive components
Upcoming (Next PR)
authentication with firebase
disabled buttons dependent on auth status
better messaging to user in the modal
Questions
For now I threw each file individually in the modal for the user to click on to download, but that feels clunky. Do you have thoughts on a different flow? A zip file would be nice -- any recs?