Style and Create User Pop up Modal in Registration Page #33 #34

m20arcusk · 2024-08-08T22:23:51Z

Changes
Added the pop up for the event registration table from Figma design
Created components for the pop up
Defined some types for the Registration Questions and Dynamic Responses for Events
Updated the 'appStatus' to have a 'select' type with values that appeared in the database in columns.tsx

Out of Scope
Proposing we create new tickets for these:

Connect backend functionality
Grabbing user registration data and event registration data from database
Functionality of the popup changing the values in the row
Not an exhaustive list

For Issue:
#33 Style and Create User Pop up Modal in Registration Page

Testing
Ran npm run build - passes for admin/event/blueprint/2025

Notes:
I defined some of my own types to handle how the data might be returned from the backend, but not sure if I did it right. I also think there was a partner view that was mentioned, but I wasn't sure how to implement so I'd be happy to make fixes if you see any improvements 🙏

Demo:
(mobile)
https://github.com/user-attachments/assets/8693170c-7a03-48aa-934e-bdd6d5501388
(desktop)
https://github.com/user-attachments/assets/46ec80c1-4bdc-4911-b895-0af3974f49f0

…ll be taken from backend

…is stored to handle dynamic fields

…l as the styling for smaller devices.

vercel · 2024-08-08T22:23:56Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
biztech-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 18, 2024 6:23pm

voctory

Hey Marcus, the admin attendee pop up modal looks good! Left a few comments on our approach to data handling and other minor things

voctory · 2024-08-11T04:37:32Z

src/components/RegistrationTable/EditCell.tsx

+    useEffect(() => {
+        if (router.isReady) {
+            const eventId = router.query.eventId as string;
+            const attendeeId = row.original.id;
+            const eventYear = router.query.year as string;
+
+            if (eventId && attendeeId && eventYear) {
+                fetchQuestionsAndResponses(attendeeId, eventId, eventYear).then(data => {
+                    setQuestions(data.questions);
+                    setResponses(data.responses);
+                }).catch(error => {
+                    console.error("Error fetching questions and responses:", error);
+                });
+            }
+        }
+    }, [row.original.id]);


Is this data not already available in row? Not sure if it's necessary to fetch again

voctory · 2024-08-11T04:41:50Z

src/components/RegistrationTable/EditCell.tsx

+                <div className="max-w-full h-[1px] bg-[#8DA1D1] my-3" />
+                <div className="max-h-[300px] max-w-full overflow-y-auto">
+                    <UserInfo row={row} table={table} />
+                    <div className="max-w-full h-[1px] bg-[#8DA1D1] my-3">
+                    <UserResponses questions={questions} responses={responses} />
+                    </div>
+                </div>
+                <div className="w-full h-[1px] bg-[#8DA1D1] my-3" />


If we're using the colour #8DA1D1 several times, could we add it to the styling sheet?

voctory · 2024-08-11T04:44:17Z

src/components/RegistrationTable/EditCell.tsx

+    const mockQuestions: RegQuestionData[] = 
+        [ { "M" : { "questionImageUrl" : { "S" : "" }, "label" : { "S" : "What school do you attend?" }, "questionId" : { "S" : "bede9713-17cf-4bb9-b362-8c30a1e5b543" }, "type" : { "S" : "SELECT" }, "choices" : { "S" : "UBC,SFU,KPU,Douglas,High School,..." }, "required" : { "BOOL" : true } } }, { "M" : { "label" : { "S" : "Do you have any accessibility/mobility needs that you would need us to know about?" }, "questionId" : { "S" : "49512eca-eec6-4639-b70c-f60f2e0a9371" }, "type" : { "S" : "SELECT" }, "choices" : { "S" : "Yes,No" }, "required" : { "BOOL" : true } } }, { "M" : { "label" : { "S" : "If you answered \"Yes\" to the question above, please let us know of any accommodations you will need below:" }, "questionId" : { "S" : "ee2b5b93-3792-4332-ba83-24b995f12094" }, "type" : { "S" : "TEXT" }, "choices" : { "S" : "" }, "required" : { "BOOL" : false } } }, { "M" : { "label" : { "S" : "LinkedIn URL:" }, "questionId" : { "S" : "013bb98c-4286-4649-bbb9-fbc27185925c" }, "type" : { "S" : "TEXT" }, "choices" : { "S" : "" }, "required" : { "BOOL" : false } } }, { "M" : { "label" : { "S" : "Resume:" }, "questionId" : { "S" : "ea4a8fa7-7bcf-4f86-af60-27ac61c7680b" }, "type" : { "S" : "UPLOAD" }, "choices" : { "S" : "" }, "required" : { "BOOL" : false } } }, { "M" : { "label" : { "S" : "Do you consent to us sharing your resume with our attending partners? (If you didn't upload one, select N/A)" }, "questionId" : { "S" : "f33ba987-6a5f-4ea2-9ba9-ca5f087e6fef" }, "type" : { "S" : "SELECT" }, "choices" : { "S" : "Yes,No,N/A" }, "required" : { "BOOL" : true } } }, { "M" : { "label" : { "S" : "Do you consent to having your email added to our sponsors' mailing lists? " }, "questionId" : { "S" : "a04e1064-65b2-4873-bede-9c4d5cbd32c3" }, "type" : { "S" : "SELECT" }, "choices" : { "S" : "Yes,No" }, "required" : { "BOOL" : true } } }, { "M" : { "label" : { "S" : "Would you be interested in getting your headshot taken at the conference?" }, "questionId" : { "S" : "24f0b385-d92e-43be-92a3-2b225964a778" }, "type" : { "S" : "SELECT" }, "choices" : { "S" : "Yes,No" }, "required" : { "BOOL" : true } } }, { "M" : { "label" : { "S" : "What's the first thing that comes to mind when you hear \"Digital Disruptions\"?" }, "questionId" : { "S" : "04f58eea-1861-4da3-8e4c-8d8e994ce8ba" }, "type" : { "S" : "TEXT" }, "choices" : { "S" : "" }, "required" : { "BOOL" : true } } }, { "M" : { "label" : { "S" : "Would you like to participate in our Attendee Showcase (view the event description above for more info)? If so, please complete ALL of the questions from this point on, otherwise, you may skip them." }, "questionId" : { "S" : "cb1a1e83-f581-473c-97e0-48e9a88d7d20" }, "type" : { "S" : "SELECT" }, "choices" : { "S" : "I would like to participate,I would not like to participate" }, "required" : { "BOOL" : true } } }, { "M" : { "label" : { "S" : "[A/S] Project Name" }, "questionId" : { "S" : "16ce18ff-9e88-4988-8965-b3edc172437a" }, "type" : { "S" : "TEXT" }, "choices" : { "S" : "" }, "required" : { "BOOL" : false } } }, { "M" : { "label" : { "S" : "[A/S] Full names of those who contributed to this project (you may only submit projects with up to 4 contributors MAX)" }, "questionId" : { "S" : "0836c57c-6163-4905-acb5-6578510b5a63" }, "type" : { "S" : "TEXT" }, "choices" : { "S" : "" }, "required" : { "BOOL" : false } } }, { "M" : { "label" : { "S" : "[A/S] Brief description of your project" }, "charLimit" : { "N" : "350" }, "questionId" : { "S" : "5328b778-e593-4077-bd58-d7b0f7cd1752" }, "type" : { "S" : "TEXT" }, "choices" : { "S" : "" }, "required" : { "BOOL" : false } } }, { "M" : { "label" : { "S" : "[A/S] Key technologies used to create your project" }, "questionId" : { "S" : "10231b92-5503-4a22-a205-25d99bee580b" }, "type" : { "S" : "TEXT" }, "choices" : { "S" : "" }, "required" : { "BOOL" : false } } }, { "M" : { "label" : { "S" : "[A/S] Relevant photo of your project (i.e. logo, screenshot of webpage, photo of prototype, etc)" }, "questionId" : { "S" : "e44b5fea-b18a-41bf-b6f2-e685b88d74da" }, "type" : { "S" : "UPLOAD" }, "choices" : { "S" : "" }, "required" : { "BOOL" : false } } }, { "M" : { "label" : { "S" : "[A/S] Link to your project/to learn more about your project (i.e. Github repo, website link, etc)" }, "questionId" : { "S" : "1099caf7-6e25-4c9a-97ab-c7628d1507e9" }, "type" : { "S" : "TEXT" }, "choices" : { "S" : "" }, "required" : { "BOOL" : false } } }, { "M" : { "label" : { "S" : "I confirm that the project I submitted abides by Blueprint's Attendee Showcase requirements (stated in this form's description)" }, "questionId" : { "S" : "f83944a8-97e2-421c-903c-aac91106fe34" }, "type" : { "S" : "SELECT" }, "choices" : { "S" : "I confirm,I didn't submit a project" }, "required" : { "BOOL" : true } } } ]
+    ;
+    // The 'test' user from the database was used here for the responses
+    const mockResponses: UserQuestionIDs = {
+        "ee2b5b93-3792-4332-ba83-24b995f12094": { S: "asdf" },
+        "04f58eea-1861-4da3-8e4c-8d8e994ce8ba": { S: "asdf" },
+        "bede9713-17cf-4bb9-b362-8c30a1e5b543": { S: "UBC" },
+        "cb1a1e83-f581-473c-97e0-48e9a88d7d20": { S: "I would not like to participate" },
+        "ea4a8fa7-7bcf-4f86-af60-27ac61c7680b": { S: "https://drive.google.com/file/d/1Q60JBkifak4gSrZL65KvafCPVA2HwcZ4/view?usp=drivesdk" },
+        "013bb98c-4286-4649-bbb9-fbc27185925c": { S: "asdf" },
+        "24f0b385-d92e-43be-92a3-2b225964a778": { S: "No" },
+        "a04e1064-65b2-4873-bede-9c4d5cbd32c3": { S: "No" },
+        "49512eca-eec6-4639-b70c-f60f2e0a9371": { S: "No" },
+        "f33ba987-6a5f-4ea2-9ba9-ca5f087e6fef": { S: "No" },
+        "f83944a8-97e2-421c-903c-aac91106fe34": { S: "I didn't submit a project" }
+    };


I don't think we work with DynamoDB-JSON marshalled data in our frontend, it's all dealt with in the backend. Can you confirm @AllanT102 @bennypc ?

Yeah we don't. This is a mock response sent by the backend

ahh okay i see i'll fix that asap thanks guys 🙏

voctory · 2024-08-11T04:45:37Z

src/components/RegistrationTable/editCellPopUp.tsx/userInfo.tsx

+        setDropDownList(generateDropDownList());
+
+    }, [table]);
+    console.log(fieldLabels);


Testing console.log? Can remove

voctory · 2024-08-11T04:48:14Z

src/components/RegistrationTable/editCellPopUp.tsx/userResponses.tsx

+}
+
+const UserResponses: React.FC<UserResponsesProps> = ({ questions, responses }) => {
+    console.log(questions);


AllanT102 · 2024-08-12T05:08:40Z

src/components/RegistrationTable/EditCell.tsx

+            const eventYear = router.query.year as string;
+
+            if (eventId && attendeeId && eventYear) {
+                fetchQuestionsAndResponses(attendeeId, eventId, eventYear).then(data => {


i prefer using async and await here as it's more readable.

…olour

…ow. Still fetching the reg questions for event

…nses.tsx

voctory

LGTM

voctory · 2024-08-17T23:05:24Z

src/components/RegistrationTable/EditCell.tsx

+        const fetchData = async () => {
+            if (router.isReady) {
+                const eventId = router.query.eventId as string;
+                const attendeeId = row.original.id;
+                const eventYear = router.query.year as string;
+
+                if (eventId && attendeeId && eventYear) {
+                    try {
+                        const data = await fetchQuestionsAndResponses(attendeeId, eventId, eventYear);
+                        setQuestions(data.questions);
+                    } catch (error) {
+                        console.error("Error fetching questions and responses:", error);
+                    }
+                }


This data will already be fetched by src/pages/admin/event/[eventId]/[year]/index.tsx and we can pass it to this Pop-up component instead of needing to re-fetch everything. Leave this in for now though, and we can refactor it once we have the backend working with the Admin Event Registrations page

m20arcusk added 5 commits July 30, 2024 11:57

achieved front-end view for pop up. just need to plan how the data wi…

e04139c

…ll be taken from backend

frontend visuals achieved, just need to refactor the method the data …

8b3ce41

…is stored to handle dynamic fields

updated and imported some types for the questions and respones as wel…

0960883

…l as the styling for smaller devices.

small fix on a comment

7a29faa

didn't mean to delete BasicInformation in types.ts so I added it back

a519108

m20arcusk requested review from voctory, bennypc, jaypark25, AllanT102, isa-leroux448 and kevinxiao27 August 8, 2024 22:24

voctory reviewed Aug 11, 2024

View reviewed changes

AllanT102 reviewed Aug 12, 2024

View reviewed changes

m20arcusk added 4 commits August 13, 2024 18:40

removed console.log testing lines and updated tailwind with divider c…

bdf2754

…olour

updated the fetchQuestion function to use async and await

d16fc21

changed to use async and await and now grabbing user responses from r…

f817709

…ow. Still fetching the reg questions for event

updated userResponse type and changed how it is accessed in userRespo…

edbbf14

…nses.tsx

vercel bot deployed to Preview August 17, 2024 05:40 View deployment

voctory approved these changes Aug 17, 2024

View reviewed changes

resolved merge conflicts

5ab669a

m20arcusk merged commit 231e7ec into dev Aug 18, 2024
1 of 2 checks passed

vercel bot deployed to Preview August 18, 2024 18:23 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Style and Create User Pop up Modal in Registration Page #33 #34

Style and Create User Pop up Modal in Registration Page #33 #34

m20arcusk commented Aug 8, 2024

vercel bot commented Aug 8, 2024 •

edited

Loading

voctory left a comment

voctory Aug 11, 2024

voctory Aug 11, 2024

voctory Aug 11, 2024

AllanT102 Aug 12, 2024

m20arcusk Aug 12, 2024

voctory Aug 11, 2024

voctory Aug 11, 2024

AllanT102 Aug 12, 2024

voctory left a comment

voctory Aug 17, 2024

Style and Create User Pop up Modal in Registration Page #33 #34

Style and Create User Pop up Modal in Registration Page #33 #34

Conversation

m20arcusk commented Aug 8, 2024

vercel bot commented Aug 8, 2024 • edited Loading

voctory left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

voctory left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Aug 8, 2024 •

edited

Loading