New sign up page with form completed and major and year dropdown done. #75

thai-truong · 2020-06-27T20:55:24Z

No description provided.

…ts to send in inputted data from the user to the db (need to wait for backend on that first)

…ld) and added the fix for the cypress+CircleCI bug

…ges/SignUpPageNew

…ts to send in inputted data from the user to the db (need to wait for backend on that first)

…ld) and added the fix for the cypress+CircleCI bug

…ges/SignUpPageNew

…EventsPage left (might have to take it out or rewrite it completely)

These two dropdown components can be put into the component prop of Formik's <Field /> i.e. <Field component={MajorDropdown}. Note that year dropdown needs to be supplied a minyear and a maxyear prop for it to work properly. Ex: <Field component={YearDropdown} minyear={#} maxyear={#} />

netlify · 2020-06-27T20:57:40Z

Deploy preview for hkn-portal-staging ready!

Built with commit db011ea

https://deploy-preview-75--hkn-portal-staging.netlify.app

godwinpang

thanks for fixing theme.spacing 👍 would be nice to have it in another PR next time
everything looks good, just need to wait for integration w/ signup route to merge in

If you want to pull out the theme.spacing commits into another branch we can merge that pr in

godwinpang · 2020-06-27T23:40:38Z

public/index.html

+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->


why is this file changed?

I'm guessing indentation? Not sure why this was changed, it might have been done by VSCode

Okay yeah it's indentation changes made automatically by VSCode, the actual code is still the same as the original html file.

godwinpang · 2020-06-27T23:41:23Z

src/components/Dropdowns/YearDropdown/index.js

+  form: { isSubmitting, touched, errors },
+  ...props
+}) {
+  const fieldError = getIn(errors, field.name);


what's getIn?

https://stackoverflow.com/questions/56089054/how-to-dynamically-access-nested-errors-touched-on-formik-field

This is probably the only thing I found that actually explains what getIn() does lol. I don't know why there is no documentation for it on Formik's official website, even though getIn() is imported from formik.

godwinpang · 2020-06-27T23:42:28Z

src/components/Dropdowns/YearDropdown/index.js

+  ...props
+}) {
+  const fieldError = getIn(errors, field.name);
+  const showError = getIn(touched, field.name) && !!fieldError;


no bang bang hacks :) just check if it's null or sth idk what getIn returns

godwinpang · 2020-06-27T23:44:38Z

src/components/Dropdowns/YearDropdown/index.js

+    ...field,
+    error: showError,
+    helperText: showError ? fieldError : props.helperText,
+    disabled: disabled ?? isSubmitting,


again change to null check for future sustainability - not a big fan of ??

Honestly that stuff is the stuff that came from formik-material-ui that I didn't touch. I'll change it tho

godwinpang · 2020-06-27T23:46:09Z

src/components/EventEditForm/edit_form.js

+      rsvp: PropTypes.string.isRequired,
+      signin: PropTypes.string.isRequired,
+    }),
+  }).isRequired,


lol looking at all these long af proptypes makes me miss typescript

godwinpang · 2020-06-27T23:46:57Z

src/components/SignUpForm/index.js

+const MAX_GRAD_YEAR = moment().year() + 4;
+const PW_MIN_LENGTH = 4;
+
+const schema = Yup.object({


consider putting schema in separate file for readability

godwinpang · 2020-06-27T23:47:36Z

src/components/SignUpForm/index.js

+import * as Yup from 'yup';
+
+import styles from './styles';
+import MajorDropdown from '../Dropdowns/MajorDropdown';


add index.js in Dropdowns to export both so we only need 1 import statement
also change Dropdowns to lowercase to adhere with naming conventions throughout codebase

Wait but I thought the convention for src/components' naming of folders is capitalization of first letter of all words in a name? That's what I see for other folders. Am I missing something here?

yes that's true - and perhaps I shouldn't have said naming conventions throughout codebase.

My rationale was more along the lines of React codebases having only first letter capitalized for components - since dropdowns is a folder of components it shouldnt be capitalized

Oh I see now. Thank you so much for clarifying! Will change it accordingly

godwinpang · 2020-06-27T23:48:27Z

src/components/SignUpForm/index.js

+              </Grid>
+            </Grid>
+
+            {isSubmitting && <LinearProgress />}


godwinpang · 2020-06-27T23:49:34Z

src/components/SignUpForm/styles.js

@@ -0,0 +1,14 @@
+const styles = () => ({
+  nameFields: {
+    marginBottom: '8px',


in the scenarios that I can think of, we shouldn't ever ever have to hardcode any margin in terms of px

These bottom margins are there so that all the Formik's are spaced out evenly (and nicely) from each other. Any other way to do it? Using justify='space-evenly' does make them space out evenly, but the space between them is too small.

nvm fixed it, eliminated most hardcoded margin and padding

godwinpang · 2020-06-27T23:51:51Z

src/pages/SignUpPageNew/styles.js

+    textTransform: 'none',
+  },
+});
+


again, dont see need to hardcode margin/paddings - let's meet about this sometime

I could be missing something though - mainly just not sure about the hardcoded width (overflow small screens) and the margin/paddings

The hardcoded width is for the major dropdown box messing everything up when a major name was longer than the actual box, tho it probably shouldn't matter now because all major names are shorter than the dropdown box now (as far as I can tell).

I hardcoded the logo width and height because that's the true size of the logo. Honestly all the hardcoded margins and paddings are there so the whole page looks nice, since it's a little messed up if I take them out. I'm not sure how to balance things out nicely with like how I can do with , so I guess that's why there are more hardcoded margins and paddings here.

I've added most of the changes commented on the PR, but I left out styles.js in SignUpPageNew since I can't make things look nice without lots of hardcoded margins and paddings for <Card />, as opposed to <Grid />. Changes: - Got rid of !! and ?? operators in the dropdown files - Put schema in a separate file (schema.js) - Added index.js in dropdowns to export both major and year dropdowns with 1 import statement. - Put in proper changes for <Grid /> in SignUpForm so things look better now and I got rid of most of the hardcoded margins and paddings for styles.js. - Added clarification to what getIn() does as comments in the dropdown files.

godwinpang · 2020-06-28T03:37:47Z

also looks like dropdowns import is wrong cuz of casing - build fails rn

thai-truong · 2020-06-28T03:47:43Z

Yeah that was the thing that I was talking about in one of your comment threads. Not sure why it happens

Changes: - <Grid component item /> now becomes: <Grid item> <Grid component> ... </Grid> </Grid> - Changed schema name from VALIDATION_SCHEMA to just 'schema'

I changed major and year dropdowns so they use Formik's <Field /> so that we don't have to use formik-material-ui's <TextField /> code to make a custom MajorDropdown or YearDropdown. This is to prevent possible compatibility issue in the future.

…r-portal into newSignupPage

godwinpang · 2020-07-09T22:07:18Z

src/pages/SignUpPageNew/index.js

    const signUpSubmission = {
      ...values,
    };

-    console.log(JSON.stringify(signUpSubmission));
+    const response = await fetch(SIGN_UP_URL, {


throw this behind something in services - frontend pages should not know anything about how we're signing up

This is to ensure that layer abstraction is maintained, so that frontend SignUpPageNew doesn't know what we are doing for the sign up process.

godwinpang · 2020-07-20T20:07:38Z

src/services/auth.js

@@ -1,6 +1,10 @@
 import * as firebase from 'firebase/app';
 import 'firebase/auth';

+import SIGNUP_ENDPOINT from '../constants/endpoints';
+
+const SIGN_UP_URL = `http://localhost:3001${SIGNUP_ENDPOINT}`;


can you add a TODO to fetch base url based on env instead

I'll add that and then push it to newSignupPage then?

…r-portal into newSignupPage

Removed everything for the old signup page and put in the new signup page as the current signup page. Removed new signup page test endpoint from App/index.js and constants/routes.js.

godwinpang · 2020-07-27T02:00:23Z

Is this good? can we merge

thai-truong · 2020-07-27T02:06:02Z

Yeah it should be good now. I was just waiting for an approval from someone else.

thaigillespie added 14 commits June 18, 2020 21:37

Test run for CircleCI with different cypress version

cafa47d

Test out CircleCI after changing Cypress version

d036d4d

Finished the frontend of the sign up page, besides making HTTP reques…

3f846e0

…ts to send in inputted data from the user to the db (need to wait for backend on that first)

Forgot to integrate the cypress+circleci bug fix lol mb

08f8c57

Minor fixes to the front end of this new sign up page (first name fie…

2fe0d99

…ld) and added the fix for the cypress+CircleCI bug

Removed binding statement for handleState in <SignUpPage /> in src/pa…

2058bc3

…ges/SignUpPageNew

Test run for CircleCI with different cypress version

3045a41

Finished the frontend of the sign up page, besides making HTTP reques…

2e62a6e

…ts to send in inputted data from the user to the db (need to wait for backend on that first)

Minor fixes to the front end of this new sign up page (first name fie…

14f5930

…ld) and added the fix for the cypress+CircleCI bug

Removed binding statement for handleState in <SignUpPage /> in src/pa…

959070c

…ges/SignUpPageNew

Finish merging master with newSignupPage

de71729

Finish merging master with newSignupPage

c551b1c

Fixed minor bugs relating to proptypes and props, now just the buggy …

5430eba

…EventsPage left (might have to take it out or rewrite it completely)

thai-truong requested a review from a team June 27, 2020 20:55

godwinpang linked an issue Jun 27, 2020 that may be closed by this pull request

Rewrite the sign up page completely #62

Closed

godwinpang requested changes Jun 27, 2020

View reviewed changes

thaigillespie and others added 4 commits June 27, 2020 20:53

Made more changes in terms of caps and <Grid />.

faa946b

Changes: - <Grid component item /> now becomes: <Grid item> <Grid component> ... </Grid> </Grid> - Changed schema name from VALIDATION_SCHEMA to just 'schema'

Fix casing for dropdowns.

a77c04b

Merge branch 'newSignupPage' of https://github.com/HKN-UCSD/hkn-membe…

e4cc0c5

…r-portal into newSignupPage

godwinpang requested changes Jul 9, 2020

View reviewed changes

Moved fetch call to /signup in SignUpPageNew to services/auth.

677fd4a

This is to ensure that layer abstraction is maintained, so that frontend SignUpPageNew doesn't know what we are doing for the sign up process.

thai-truong force-pushed the newSignupPage branch from afbf359 to 677fd4a Compare July 9, 2020 22:32

godwinpang previously approved these changes Jul 20, 2020

View reviewed changes

Added base API url as an env var.

83b1317

thai-truong dismissed godwinpang’s stale review via 83b1317 July 20, 2020 22:00

thai-truong and others added 4 commits July 23, 2020 14:50

Merge branch 'master' into newSignupPage

2e0922d

Ran Prettier to make sure everything complies with Prettier code style.

b05455b

Merge branch 'newSignupPage' of https://github.com/HKN-UCSD/hkn-membe…

6a77b39

…r-portal into newSignupPage

Removed old signup page and put in new sign up page.

db011ea

Removed everything for the old signup page and put in the new signup page as the current signup page. Removed new signup page test endpoint from App/index.js and constants/routes.js.

godwinpang approved these changes Jul 27, 2020

View reviewed changes

thai-truong merged commit 1eb271e into master Jul 27, 2020

thai-truong linked an issue Jul 27, 2020 that may be closed by this pull request

Integrate new SignUpPage with /signup endpoint #77

Closed

thai-truong self-assigned this Aug 5, 2020

godwinpang deleted the newSignupPage branch August 19, 2020 19:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New sign up page with form completed and major and year dropdown done. #75

New sign up page with form completed and major and year dropdown done. #75

thai-truong commented Jun 27, 2020

netlify bot commented Jun 27, 2020 •

edited

Loading

godwinpang left a comment

godwinpang Jun 27, 2020

thai-truong Jun 28, 2020

thai-truong Jun 28, 2020 •

edited

Loading

godwinpang Jun 27, 2020

thai-truong Jun 28, 2020 •

edited

Loading

godwinpang Jun 27, 2020

godwinpang Jun 27, 2020

thai-truong Jun 28, 2020

godwinpang Jun 27, 2020

godwinpang Jun 27, 2020

godwinpang Jun 27, 2020

thai-truong Jun 28, 2020

godwinpang Jun 28, 2020

thai-truong Jun 28, 2020

godwinpang Jun 27, 2020

godwinpang Jun 27, 2020

thai-truong Jun 28, 2020 •

edited

Loading

thai-truong Jun 28, 2020

godwinpang Jun 27, 2020

godwinpang Jun 27, 2020

thai-truong Jun 28, 2020

thai-truong Jun 28, 2020

godwinpang commented Jun 28, 2020

thai-truong commented Jun 28, 2020

godwinpang Jul 9, 2020

godwinpang Jul 20, 2020

thai-truong Jul 20, 2020

godwinpang commented Jul 27, 2020

thai-truong commented Jul 27, 2020

New sign up page with form completed and major and year dropdown done. #75

New sign up page with form completed and major and year dropdown done. #75

Conversation

thai-truong commented Jun 27, 2020

netlify bot commented Jun 27, 2020 • edited Loading

godwinpang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thai-truong Jun 28, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thai-truong Jun 28, 2020 • edited Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thai-truong Jun 28, 2020 • edited Loading

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

godwinpang commented Jun 28, 2020

thai-truong commented Jun 28, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

godwinpang commented Jul 27, 2020

thai-truong commented Jul 27, 2020

netlify bot commented Jun 27, 2020 •

edited

Loading

thai-truong Jun 28, 2020 •

edited

Loading

thai-truong Jun 28, 2020 •

edited

Loading

thai-truong Jun 28, 2020 •

edited

Loading