[feat] create simple interest form component #25

varortz · 2023-10-25T22:15:01Z

🎋 Description

Converts the interest page into a component, and adds additional form inputs necessary (radio inputs & text input for start date)
Implements a Button component in components/Button.tsx
Passes in CaseListing objects into both the CaseDetails and InterestForm component to facilitate displaying/using case information for a specific case

🌴 What's new in this PR

🌲 Screenshots

🌳 How to review

Fetch this branch and go on it
navigate to the cases page in the url: http://localhost:3000/cases
scroll through the cases and click on random ones, make sure that the interest form looks good throughout all the cases being clicked on
Click on the radio buttons and use the text inputs. Keep in mind there's currently no validation yet, so just make sure they don't act wonky when being interacted with.
Hover over the "Submit Interest" button

Might be good to test all versions of the Button/ErrorButton component

Look at components/Button.tsx for documentation on how to use the buttons

🌱 Next steps

Update the CaseDetails component to display case information according to David's designs
Add validation to the interest form and update the interest submission functionality if necessary (focused more on the frontend aspect in this PR due to schema changes 🙈)
Fix scrolling on the cases page to facilitate scrolling to see the case details + interest form

🔗 Relevant Links

ℹ️ Online sources

Guide for creating a custom radio input using styled components (kinda janky implementation, but Jinkang++ helped make edits to it in this PR to improve it):

https://medium.com/@christinaroise/how-to-create-a-reusable-custom-radiobutton-in-react-with-typescript-3ae7fc704e09

Styled Components documentation that is useful for understanding the Button component implementation:
https://styled-components.com/docs/basics#adapting-based-on-props

🪴 Related PRs

CC: @pragyakallanagoudar @davidqing6432

linear · 2023-10-25T22:15:07Z

IJP-10 Create simple interest form component.

Routes:

/interest (src/app/interest/page.tsx)

/cases (src/app/cases/page.tsx)

Move the existing simple interest form onto the /cases route in order to consolidate the two.
Create a simplified version of the case interest form component. You can hardcode all case attributes, and just focus on visuals for right now. You can also leave out the profile match section entirely for simplicity. This will be added in a future sprint.
Use the existing query invocation to write an entry to the interests table when the submit button is pressed.

Screenshot 2023-10-12 at 1.01.49 AM.png

ccatherinetan

Looks rlly good! a couple things to implement:

clear out the form responses when clicking on a new case on the scroll bar
form validation + updating interests table w/ submission
include a warning on the interest form that the form responses are not saved (according to HIFI)
make the input text border to 2 pixels (David will also change on figma)
hover functionality for the Radio Button

The Button, ErrorButton + their secondary formats look great!

src/components/InterestForm/index.tsx

src/components/InterestForm/styles.tsx

src/components/Radio.tsx

src/app/cases/page.tsx

src/components/CaseDetails/styles.tsx

src/components/InterestForm/index.tsx

src/components/InterestForm/styles.tsx

src/components/Radio.tsx

src/components/Button.tsx

src/components/InterestForm/index.tsx

src/components/InterestForm/styles.tsx

pragyakallanagoudar · 2023-10-29T06:06:18Z

src/components/InterestForm/index.tsx

+  const [rolesInterested, setRolesInterested] = useState<string>('');
+  const [startDate, setStartDate] = useState<string>('');
+
+  const handleInsert = async () => {


Curious why this function seems to force a re-render of the whole page? Are we explicitly doing this somewhere?

I have a rough idea of why it might be re-rendering, but I'll also look more into this during the next sprint! I think once I reconnect the form to the backend it'll be easier to debug.

pragyakallanagoudar · 2023-10-29T06:09:49Z

src/components/InterestForm/index.tsx

+          start_date: startDate,
+        },
+      };
+      await insertInterest(newInterest);


Not sure if this is just on my end, but for me this doesn't seem to be writing an interest to the table? All of this seems fine though, so I'm not sure why this might be 🤔

But also since this sprint is entirely frontend-focused, we can look deeper into this in your next sprint!

Yup, there's a 409 error rn... I'll look more into it during the next sprint to not delay merging the frontend changes in!

src/components/InterestForm/index.tsx

jinkang-0

Looks great! I just added some minor details to consider, looking forward to the new changes!

src/app/cases/page.tsx

src/components/Button.tsx

src/components/CaseDetails/index.tsx

jinkang-0 · 2023-10-30T03:44:00Z

src/components/CaseDetails/styles.tsx

+  position: sticky;
+  top: 4rem;
+  width: 95%;
+  border-radius: 10px;


Shall we use rem here?

resolved this in slack DMs with sauhard! this is what he said:

i would rec using px
reason is rem depends on root font size and border widths have no relation to font size
and the variance is border width across screen size is pretty limited

so let's keep this as is

I think for border-radius we will still use rem, only px for border-width

@pragyakallanagoudar are you fine with going along with this change? I think it makes sense to change border-radius to rem

src/components/InterestForm/index.tsx

src/components/InterestForm/styles.tsx

src/components/ListingCard/ListingCard.tsx

src/components/InterestForm/index.tsx

pragyakallanagoudar · 2023-11-03T03:46:26Z

src/api/supabase/queries/profiles.ts

@@ -13,6 +13,15 @@ export async function fetchProfiles() {
  }
 }

+export async function fetchProfileById(userId: UUID) {


@jinkang-0 any idea why this might be here? 🤔 I assumed that this was part of the profile context PR which was already merged in...

actually it seems like all the changes from the profile context and global styles are included on here...? i somehow thought this diff would only included changes that were not already present on main after rebasing :o but i might be misremembering!

pragyakallanagoudar · 2023-11-03T03:47:19Z

src/components/Button.tsx

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+/* 


AMAZING documentation!! thank you for this alvaro :)))

pragyakallanagoudar

LOOKS AMAZINGGGG THANK YOU FOR ALL YOUR HARD WORK ALVARO!!!

jinkang-0

Gonna drop some unit policing stuff

src/components/Button.tsx

src/components/InterestForm/styles.tsx

src/components/TextInput/styles.tsx

src/utils/helpers.ts

varortz changed the title ~~Alvaro/ijp 10 create simple interest form component~~ [feat] create simple interest form component Oct 25, 2023

pragyakallanagoudar requested a review from ccatherinetan October 26, 2023 04:26