rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

make 'need ride there' buttons responsive to availability selection

Browse Source
This commit is contained in:
Michael Fatemi 2021-06-24 13:57:51 -04:00
parent f24f7b6572
commit 0758b36479
1 changed files with 92 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
src/components/NewUI/Event.tsx
View File

@ -117,100 +117,104 @@ export default function Event({
<GroupName name={group} /> <GroupName name={group} />
<Details {...{ startTime, endTime, formattedAddress }} /> <Details {...{ startTime, endTime, formattedAddress }} />
<Availability selected={availability} onSelected={setAvailability} /> <Availability selected={availability} onSelected={setAvailability} />
<div {availability === 'interested' && (
style={{
display: 'flex',
flexDirection: 'row',
width: '100%',
justifyContent: 'center',
marginTop: '1rem',
}}
>
<UIButton
style={{
backgroundColor: needRideThere ? green : lightgrey,
color: needRideThere ? 'white' : 'black',
transition: 'color 0.2s, background-color 0.2s',
marginRight: '0.5em',
}}
onClick={() => {
setNeedRideThere((needRideThere) => !needRideThere);
}}
>
I need a ride there
</UIButton>
<UIButton
style={{
backgroundColor: needRideBack ? green : lightgrey,
color: needRideBack ? 'white' : 'black',
transition: 'color 0.2s, background-color 0.2s',
marginLeft: '0.5em',
}}
onClick={() => {
setNeedRideBack((needRideBack) => !needRideBack);
}}
>
I need a ride back
</UIButton>
</div>
{needRideThere && (
<> <>
<span <div
style={{ style={{
color: '#303030', display: 'flex',
textTransform: 'uppercase', flexDirection: 'row',
fontWeight: 500, width: '100%',
marginTop: '1em', justifyContent: 'center',
marginTop: '1rem',
}} }}
> >
Ride There <UIButton
</span> style={{
<UIPlacesAutocomplete backgroundColor: needRideThere ? green : lightgrey,
placeholder="Pickup location" color: needRideThere ? 'white' : 'black',
onSelected={(address, placeID) => { transition: 'color 0.2s, background-color 0.2s',
setRideTherePickupPlaceID(placeID); marginRight: '0.5em',
setConfirmed(false); }}
}} onClick={() => {
/> setNeedRideThere((needRideThere) => !needRideThere);
<UITimeInput /> }}
>
I need a ride there
</UIButton>
<UIButton
style={{
backgroundColor: needRideBack ? green : lightgrey,
color: needRideBack ? 'white' : 'black',
transition: 'color 0.2s, background-color 0.2s',
marginLeft: '0.5em',
}}
onClick={() => {
setNeedRideBack((needRideBack) => !needRideBack);
}}
>
I need a ride back
</UIButton>
</div>
{needRideThere && (
<>
<span
style={{
color: '#303030',
textTransform: 'uppercase',
fontWeight: 500,
marginTop: '1em',
}}
>
Ride There
</span>
<UIPlacesAutocomplete
placeholder="Pickup location"
onSelected={(address, placeID) => {
setRideTherePickupPlaceID(placeID);
setConfirmed(false);
}}
/>
<UITimeInput />
</>
)}
{needRideBack && (
<>
<span
style={{
color: '#303030',
textTransform: 'uppercase',
fontWeight: 500,
marginTop: '1em',
}}
>
Ride Back
</span>
<UIPlacesAutocomplete
placeholder="Dropoff location"
onSelected={(address, placeID) => {
setRideBackDropoffPlaceID(placeID);
setConfirmed(false);
}}
/>
<UITimeInput />
</>
)}
{(needRideThere || needRideBack) &&
(rideTherePickupPlaceID || rideBackDropoffPlaceID) && (
<UIButton
style={{
backgroundColor: confirmed ? green : lightgrey,
color: confirmed ? 'white' : 'black',
}}
onClick={() => {
setConfirmed((confirmed) => !confirmed);
}}
>
{confirmed ? 'Confirmed' : 'Confirm'}
</UIButton>
)}
</> </>
)} )}
{needRideBack && (
<>
<span
style={{
color: '#303030',
textTransform: 'uppercase',
fontWeight: 500,
marginTop: '1em',
}}
>
Ride Back
</span>
<UIPlacesAutocomplete
placeholder="Dropoff location"
onSelected={(address, placeID) => {
setRideBackDropoffPlaceID(placeID);
setConfirmed(false);
}}
/>
<UITimeInput />
</>
)}
{(needRideThere || needRideBack) &&
(rideTherePickupPlaceID || rideBackDropoffPlaceID) && (
<UIButton
style={{
backgroundColor: confirmed ? green : lightgrey,
color: confirmed ? 'white' : 'black',
}}
onClick={() => {
setConfirmed((confirmed) => !confirmed);
}}
>
{confirmed ? 'Confirmed' : 'Confirm'}
</UIButton>
)}
</UISecondaryBox> </UISecondaryBox>
); );
} }