Skip to content

Commit

Permalink
Merge pull request #8 from neuromatch/patch-frontend
Browse files Browse the repository at this point in the history 
patch frontend
  • Loading branch information
@titipata
titipata authored Oct 4, 2021
2 parents 73991d5 + 3d925df commit 883891b
Show file tree
Hide file tree
Showing 7 changed files with 198 additions and 203 deletions.
40 changes: 17 additions & 23 deletions frontend/src/components/Footer/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Link } from 'gatsby';
import React from 'react';
import styled from 'styled-components';
import { media } from '../../styles';
import { color } from '../../utils';
import { Link } from "gatsby"
import React from "react"
import styled from "styled-components"
import { media } from "../../styles"
import { color } from "../../utils"

const StyledFooter = styled.div`
height: 5.5em;
background-color: ${p => color.scale(p.theme.colors.primary, p.theme.colors.factor * 7)};
background-color: ${p =>
color.scale(p.theme.colors.primary, p.theme.colors.factor * 7)};
display: flex;
align-items: center;
Expand All @@ -16,50 +17,43 @@ const StyledFooter = styled.div`
${media.extraSmall`
height: 6.5em;
`}
`;
`

const StyledFooterText = styled.div`
font-size: 0.75em;
text-align: center;
color: ${p => p.theme.colors.secondary};
line-height: 1.6em;
`;
`

const StyledLink = styled.a.attrs({
target: '_blank',
rel: 'noopener noreferrer',
target: "_blank",
rel: "noopener noreferrer",
})`
color: ${p => p.theme.colors.accent};
`;
`

// const StyledInternalLink = styled(Link)`
// color: ${p => p.theme.colors.accent};
// `;

const Red = styled.span`
color: ${p => p.theme.colors.danger};
`;
`

const Footer = () => (
<StyledFooter>
<StyledFooterText>
Made with
<Red>&nbsp;❤&nbsp;</Red>
at
<br />
<StyledLink href="http://kordinglab.com/">
Kording lab (University of Pennsylvania)
</StyledLink>
&nbsp;and&nbsp;
<StyledLink href="http://neural-reckoning.org/">
Neural Reckoning Lab (Imperial College)
</StyledLink>
{"by "}
<StyledLink href="https://neuromatch.io/">NMC organizers</StyledLink>
<br />
<StyledLink to="https://neuromatch.io/terms-of-use">
Terms of Use | Code of Conduct
</StyledLink>
</StyledFooterText>
</StyledFooter>
);
)

export default Footer;
export default Footer
141 changes: 39 additions & 102 deletions frontend/src/components/RegisterForm/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import { Controller, ErrorMessage, useForm } from "react-hook-form"
import useAPI from "../../hooks/useAPI"
import useEventTime from "../../hooks/useEventTime"
import useFirebaseWrapper from "../../hooks/useFirebaseWrapper"
import MindMatchingModule from "../../modules/mind-matching"
// import MindMatchingModule, {
// defaultOptionalFields,
// } from "../../modules/mind-matching"
import {
common,
confirmPromise,
Expand Down Expand Up @@ -52,114 +54,44 @@ const genderChoices = [
"Female",
"Non-Binary",
"Gender non conforming",
"Transgender male",
"Transgender female",
"Prefer not to say",
]

const defaultOptionalFields = {
google_scholar: "",
personal_page: "",
collaboration_score: "0.5",
computational_score: "0.5",
meeting_platform: [],
abstracts: [],
coi: "",
participate_mind_match: false,
participate_grouped_mind: false,
}

const defaultOptionalCheckers = {
google_scholar: "",
personal_page: "",
collaboration_score: "0.5",
computational_score: "0.5",
meetingPlatformSelect: [],
// a bit hacky here as there is no way to have default text as none
abstracts: [""],
coi: "",
}

const RegisterForm = ({ prevUserData, origin }) => {
// get user info
const { currentUserInfo: user } = useFirebaseWrapper()
// state
const [isOptedOut, setIsOptedOut] = useState(false)
const [isPublic, setIsPublic] = useState(false)
// warning is true only when there is some data in the optional fields
const [optOutWarning, setOptOutWarning] = useState(false)
const [isSending, setIsSending] = useState(false)
// api
const { register: registerAPI, getAffiliation } = useAPI()
// timeBoundary
const { defaultAvailableTime } = useEventTime()
// ref
const toastControl = useRef(null)
// module states
// const [isOptedOutMindMatching, setIsOptedOutMindMatching] = useState(false)

const {
register,
handleSubmit,
errors,
setValue,
control,
watch,
getValues,
// watch,
// getValues,
setError,
} = useForm()

const watchOptIns = watch([
"participate_mind_match",
// 'participate_grouped_mind',
])

// side effect to track opt-in checkbox
useEffect(() => {
// isOptedOut is determined by 2 checkboxes
setIsOptedOut(Object.entries(watchOptIns).every(([_, v]) => v === false))

const optionalFields = getValues({ nest: true })

// check if any optional field is filled
const someIsFilled = Object.entries(defaultOptionalCheckers).some(
([k, v]) => JSON.stringify(optionalFields[k]) !== JSON.stringify(v)
)

if (someIsFilled) {
setOptOutWarning(true)
} else {
setOptOutWarning(false)
}
}, [getValues, watchOptIns])

useEffect(() => {
let isActive = true

if (prevUserData && isActive) {
// check if any of the prev optional field has value, if found even one
// do not disable optional fields
Object.entries(prevUserData).some(([key, val]) => {
// check only those optional fields
if (Object.keys(defaultOptionalFields).includes(key)) {
// in case of string
if (!Array.isArray(val) && defaultOptionalFields[key] !== val) {
setIsOptedOut(false)
return true
}
// in case of array
if (Array.isArray(val) && val.length > 0) {
setIsOptedOut(false)
return true
}
}

return false
})

const selectFields = {
institution: "institutionSelect",
gender_status: "genderStatusSelect",
academic_status: "academicStatusSelect",
meeting_platform: "meetingPlatformSelect",
// meeting_platform: "meetingPlatformSelect",
}

const datetimeFields = {
Expand Down Expand Up @@ -211,9 +143,9 @@ const RegisterForm = ({ prevUserData, origin }) => {
institutionSelect,
genderStatusSelect,
academicStatusSelect,
meetingPlatformSelect,
abstracts,
availableDatetimePicker,
// meetingPlatformSelect,
// abstracts,
...rest
} = data

Expand All @@ -231,7 +163,7 @@ const RegisterForm = ({ prevUserData, origin }) => {
setError(
"availableDatetimePicker",
"isRequired",
`Available Watching Time is required at least ${numberOfSlots} slots.`
`Available attending time is required at least ${numberOfSlots} slots.`
)
setIsSending(false)

Expand All @@ -249,27 +181,28 @@ const RegisterForm = ({ prevUserData, origin }) => {
academic_status: !isPublic
? reactSelectHelpers.optionsToSaveFormat(academicStatusSelect)
: "",
meeting_platform: !isPublic
? reactSelectHelpers.optionsToSaveFormat(meetingPlatformSelect)
: [],
abstracts: !isPublic
? abstracts.every(x => x === "")
? []
: abstracts
: [],
available_dt: !isPublic
? timePickerHelpers.serializeSelectedDatetime(availableDatetimePicker)
: "",
// meeting_platform: !isPublic
// ? reactSelectHelpers.optionsToSaveFormat(meetingPlatformSelect)
// : [],
// abstracts: !isPublic
// ? abstracts.every(x => x === "")
// ? []
// : abstracts
// : [],
}

const readyData = {
id: user.uid,
payload: !isOptedOut
? preparedPayload
: {
...preparedPayload,
...defaultOptionalFields,
},
payload: preparedPayload,
// payload: !isOptedOutMindMatching
// ? preparedPayload
// : {
// ...preparedPayload,
// ...defaultOptionalFields,
// },
}

console.log("readyData:", readyData)
Expand Down Expand Up @@ -484,8 +417,7 @@ const RegisterForm = ({ prevUserData, origin }) => {
</label>
<SubLabel>
Please tell us below time slots that work best for you to
watch talks. We will use it to optimize schedule that best fit
for everyone.
attend the meeting. We collect them for overall statistics.
</SubLabel>
<Controller
name="availableDatetimePicker"
Expand All @@ -501,13 +433,18 @@ const RegisterForm = ({ prevUserData, origin }) => {
as={<WarningMessage />}
/>
</InputContainer>
<hr />
<MindMatchingModule
abstracts={prevUserData?.abstracts}
formControl={{ register, control, setValue, errors }}
isOptedOut={isOptedOut}
optOutWarning={optOutWarning}
/>
{/* <MindMatchingModule
prevUserData={prevUserData}
onOptedOutChange={x => setIsOptedOutMindMatching(x)}
formControl={{
register,
control,
setValue,
errors,
getValues,
watch,
}}
/> */}
</>
)}
<ButtonsContainer>
Expand Down
Loading

0 comments on commit 883891b

Please sign in to comment.