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} />
<Details {...{ startTime, endTime, formattedAddress }} />
<Availability selected={availability} onSelected={setAvailability} />
<div
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 && (
{availability === 'interested' && (
<>
<span
<div
style={{
color: '#303030',
textTransform: 'uppercase',
fontWeight: 500,
marginTop: '1em',
display: 'flex',
flexDirection: 'row',
width: '100%',
justifyContent: 'center',
marginTop: '1rem',
}}
>
Ride There
</span>
<UIPlacesAutocomplete
placeholder="Pickup location"
onSelected={(address, placeID) => {
setRideTherePickupPlaceID(placeID);
setConfirmed(false);
}}
/>
<UITimeInput />
<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
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>
);
}