SearchForm

PHOTO

Thu May 27 2021 15:30:56 GMT+0000 (Coordinated Universal Time)

Saved by @georeyff #react.js

import React from 'react'
import { MenuItem, IconButton, Button as MuiButton, Switch, RadioGroup, Radio, FormControlLabel,
	Typography, Paper, TextField, Collapse, Card, makeStyles, InputLabel, InputAdornment } from '@material-ui/core'
import Swap from 'components/Icons/Swap'
import FavoriteLoader from './FavoriteLoader.jsx'
import PassengersCount from './PassengersCount.jsx'
import Autocomplete from 'containers/Autocomplete/Autocomplete.js'
import CustomDayPickerInput from 'containers/CustomDayPickerInput/CustomDayPickerInput.jsx'
import styles from './form.cssmodule.scss'
import api from 'api'
import moment from 'moment'
import DropOff from 'components/Icons/DropOff/DropOff.jsx'
import PickUp from 'components/Icons/PickUp/PickUp.jsx'
import { FormattedMessage } from 'react-intl'
import LastBookings from './LastBookings'
import FormSectionHeader from './FormSectionHeader'
import { get } from 'lodash'
import {extrasToGenericSeats} from 'lib/genericSeatsFunctions'
import {KeyboardTimePicker as TimePicker} from '@material-ui/pickers'
import Clock from 'components/Icons/Clock/Clock.jsx'
import ExpandMore from '../Icons/ExpandMore.js'


const useStyles = makeStyles((theme) => ({
	input: {
		background: '#cee6f3',
		color: '#0869af',
		// fontSize:'18px'
		borderRadius:'10px',
		padding: '0.5rem',
	}
}))


export default function SearchForm(props){
	const classes = useStyles()

	const { formData, errors, onAddressSelected, onFieldChange, loadFavorite, intl,
		territory, increasePassengers, decreasePassengers, onSubmit, swapActive, swapAddresses,
		actualizeDeparture, onDayClick, customFieldInfos, requesting } = props
	const { departure, destination, time, timeRestrictionType,
		passengers, asap, recurrence, selectedDays, customFields} = formData

	const recurringOffers = _.get(props, 'territory.booking.recurring_bookings.offers') || []

	const extras = _.get(territory,'extras',{}) // special seats
	const extrasTypes = extrasToGenericSeats(extras)

	const nbPassengers = _.reduce(extrasTypes, (red, type) => red + _.get(passengers, type, 0), passengers.standard)

	return (
		<div className={styles.form}>
			<Paper>
				<form
					className={'row'}
					style={{justifyContent:'space-around'}}
				>
					<div className="column padded" style={{ flex: '0 0 45%' }}>
						<div className='column' style={{justifyContent:'flex-start'}}>
							<div className={`row-only ${styles.autoCompletes}`}>
								<div className="column" style={{ width: '100%' }}>
									<div className="row-only" style={{margin:'0.5rem 0',alignItems: 'flex-end'}}>
										<PickUp width={24} height={24} style={{marginTop:'0.5rem', padding:'0.5rem', backgroundColor:'#f1f0f0', borderRadius:'5px 0 0 5px'}}/>
										<Autocomplete
											context="search"
											inputProps={{
												label:intl.formatMessage({id: 'search.pickup.placeholder'}),
												helperText:errors.departure,
												text:departure.display,
											}}
											onChange={ e => {
												onFieldChange('departure', {
													display: e.target.value
												})
											}}
											onSelect={p =>
												onAddressSelected(p.suggestion, p.nodeId, 'departure', p.latitude, p.longitude, p.address)
											}
										/>
									</div>
									<div className="row-only" style={{margin:'0.5rem 0',alignItems: 'flex-end'}}>
										<DropOff width={24} height={24}  style={{marginTop:'0.5rem', padding:'0.5rem', backgroundColor:'#f1f0f0', borderRadius:'5px 0 0 5px'}}/>
										<Autocomplete
											context="search"
											inputProps={{
												label:intl.formatMessage({id: 'search.dropoff.placeholder'}),
												helperText:errors.destination,
												text:destination.display
											}}
											onChange={ e => {
												onFieldChange('destination', {
													display: e.target.value
												})
											}}
											onSelect={p =>
												onAddressSelected(p.suggestion, p.nodeId, 'destination', p.latitude, p.longitude, p.address)
											}
										/>
									</div>
								</div>
								<div className={`column ${styles.swapIcon}`}>
									{swapActive &&
								<IconButton
									title={intl.formatMessage({ id: 'help.swap' })}
									onClick={swapAddresses}
								>
									<Swap
										color="primary"
										style={{width:'1.5rem', height:'1.5rem'}}
									/>
								</IconButton>
									}
								</div>

							</div>
							<FavoriteLoader
								intl={intl}
								loadFavorite={loadFavorite}
							/>

							<LastBookings />
						</div>
					</div>

					<div className="column aligned padded"
						style={{ flex: '0 0 45%'}}>
						<div // big vertical container so that the BOOK button is on bottom
							className="column aligned fullWidth"
							style={{flexGrow:1, justifyContent:'space-around'}}>

							<Card elevation={4} style={{width:'100%', padding:'1rem'}}>
								<div className="column aligned fullWidth" /* HOUR + DATE + RECURRENCE */>
									<FormSectionHeader title={intl.formatMessage({ id:'section.time'})}/>
									<RadioGroup aria-label={intl.formatMessage({id:'search.time'})}
									// MAYBE REFACTOR INTELLIGENCE ?
										row
										className="fullWidth"
										style={{paddingLeft:'1rem'}} 
										value={asap ? 'asap' : timeRestrictionType}
										onChange={(e)=>{
											if (e.target.value === 'asap'){
												actualizeDeparture()
											}
											else {
												onFieldChange('asap', false)
												onFieldChange('timeRestrictionType', e.target.value)
											}
										}}>
										<FormControlLabel value="asap"
											control={<Radio color="primary" id="asap"/>}
											label={intl.formatMessage({ id: 'search.departureNow' })}
										/>
										<FormControlLabel value="departure"
											control={<Radio color="primary" id="departure"/>}
											label={intl.formatMessage({id: 'search.departure_time'})}
										/>
										<FormControlLabel value="arrival"
											control={<Radio color="primary" id="arrival"/>}
											label={intl.formatMessage({id: 'search.arrival_time'})}
										/>
									</RadioGroup>
									<Collapse in={!asap} style={{width:'100%'}} /* HOUR + DATE + RECURRENCE */>
										<div // HOUR
											className={styles.selectTime}>
											<TimePicker
												value={window.Cypress ? 1582949766 : time}
												onChange={newTime=>{
													if (newTime && newTime.isValid()){
														onFieldChange('time',newTime.format())
													}
												}}
												autoOk
												ampm={false}
												disabled={asap}
												inputVariant="outlined"
												maskChar=" "
												// below is because the modal is not keyboard accessible
												KeyboardButtonProps={{tabIndex:-1}}
												keyboardIcon={<Clock color="grey"/>}
												invalidDateMessage={<Typography color="error">"Invalid date"</Typography>}
												invalidLabel="false"
												helperText={errors && errors.time}
												error={Boolean(errors.time)}
												label={intl.formatMessage({id:'search.time'})}
												id="time"
												className={styles.timePicker}
												required
											/>

											{ /**  recurrence enabled but "do not repeat" => classic calendar here */
												recurringOffers && recurringOffers.length > 0 && recurrence.id === 0 &&
											<CustomDayPickerInput
												disabled={asap}
												tabIndex={0}
												selectedDays={(!asap ? selectedDays : [time]) || []}
												onDayClick={(day, r) => onDayClick(moment(day).format(), r)}
												errorText={errors.selectedDays}
												maxBookingDay={_.get(territory, 'booking.max_booking_day')}
												name="date"
												maxBookableDates={
													_.get(territory, 'booking.multi_date.max_bookable_dates')
												}
												label={intl.formatMessage({
													id: _.get(territory, 'booking.multi_date.enabled')
														&& _.get(territory, 'booking.multi_date.max_bookable_dates',0) > 1
														? 'search.the'
														: 'search.monoDate'
												})}
											/>
											}
										

											{	/*recurring two fields (start & end) */
												recurringOffers && recurringOffers.length > 0 && recurrence.id !== 0 &&
												<div className="column">
													<CustomDayPickerInput
														name="startDate"
														disabled={asap}
														// tabIndex={asap ? -1 : 12}
														selectedDays={[recurrence.start_datetime]}
														onDayClick={(day, requestRide) => onFieldChange('recurrence', {
															...recurrence,
															start_datetime: moment(day).format()
														})}
														errorText={errors.selectedDays}
														label={intl.formatMessage({
															id: 'search.recurrence.start_date'
														})}
													/>
													<CustomDayPickerInput
														name="endDate"
														disabled={asap}
														selectedDays={[recurrence.end_datetime]}
														onDayClick={(day, requestRide) => onFieldChange('recurrence', {
															...recurrence,
															end_datetime: moment(day).format()
														})}
														// tabIndex={asap ? -1 : 12}
														errorText={errors.selectedDays}
														label={intl.formatMessage({
															id: 'search.recurrence.end_date'
														})}
													/>
												</div>
											}
										</div>
										
										{ // either calendar OR recurence-offer-choice here
											!recurringOffers || recurringOffers.length === 0
												// CALENDAR
												?
												<CustomDayPickerInput
													disabled={asap}
													tabIndex={0}
													selectedDays={(!asap ? selectedDays : [time]) || []}
													onDayClick={(day, r) => onDayClick(moment(day).format(), r)}
													errorText={errors.selectedDays}
													maxBookingDay={_.get(territory, 'booking.max_booking_day')}
													name="date"
													maxBookableDates={
														_.get(territory, 'booking.multi_date.max_bookable_dates')
													}
													label={intl.formatMessage({
														id: _.get(territory, 'booking.multi_date.enabled')
														&& _.get(territory, 'booking.multi_date.max_bookable_dates',0) > 1
															? 'search.the'
															: 'search.monoDate'
													})}
												/>
												:
												<div style={{display: 'flex', alignItems:'center'}}>
													<label 
														htmlFor={'recurrence-offer-select'} 
														variant='body' style={{fontSize:'18px', marginRight:'0.5rem'}}
													>
														{intl.formatMessage({id:'help.recurrenceOffer'})}
													</label>
													<TextField  // RECURRENCE OFFER
														required
														id="recurrence-offer-select"
														select
														name="recurrenceOffer"
														className={`column ${styles.selectTargetMode}`}
														value={recurrence.id}
														style={asap ? { color: '#ccc' } : null}
														disabled={asap}
														onChange={(e) => {
															onFieldChange('recurrence', {
																...recurrence,
																id: e.target.value
															})
														}}
														// style={{minWidth:'18rem'}}
														InputProps={{ 
															className: classes.input,
															disableUnderline: true,
														}}
														SelectProps={{ 
															IconComponent: () => <ExpandMore style={{position:'absolute', right: 10}}/>
														}}
													>
														<MenuItem value={0}>
															{intl.formatMessage({
																id: 'search.recurrence.doNotRepeat',
															})}
														</MenuItem>
														{/* map on [{id: "work_days", display_name:"Work days"}]}
												 	OR territory.recurringOffers. */}
														{recurringOffers.map((offer, index) =>
															(<MenuItem key={index} value={offer.id}>
																{offer.name}
															</MenuItem>)
														)}
													</TextField>
												</div>
										}
									</Collapse>
								</div>
							</Card>

							<Card elevation={4} style={{width:'100%', padding:'1rem', margin:'1rem'}}>
								<div className="column aligned fullWidth" /* OPTIONS : PASSENGERS + CUSTOM FIELDS */>
									<FormSectionHeader title={intl.formatMessage({ id:'section.options'})}/>
									<div className='fullWidth'>
										<PassengersCount
											type="standard"
											decrease={() => decreasePassengers('standard')}
											increase={() => increasePassengers('standard')}
											value={passengers.standard}
										/>
										{ extrasTypes.map( type =>{
											return(
												<PassengersCount
													extras={extras}
													key={type + '_counter'}
													type={type}
													decrease={() => decreasePassengers(type)}
													increase={() => increasePassengers(type)}
													value={passengers[type]}
												/>
											)}
										)}
									</div>
								</div>
								{ nbPassengers == 0 ?
									<Typography 
										color="error"
										variant="caption"
									>
										{intl.formatMessage({ id: 'search.error.nbPassengers'})}
									</Typography>
									: null 
                    		}
								{ /* customFields is a dict. This works similarly to "recurrence" */
									customFields &&
								<div className="column spaced" style={{flexWrap:'wrap'}}>
									{_.map(_.keys(customFieldInfos).sort(), (cf_key, name)=>{
										const cf = customFieldInfos[cf_key]
										return(
											<div
												className="ron-only column"
												style={{padding:'1rem 0 0 0'}}
												key={'cf-'+name}
											>
												<TextField
													id={cf.display_name}
													required={Boolean(cf.is_required)}
													label={cf.display_name}
													style={{width: '90%'}}
													select={cf.type === 'select'}
													value={_.get(formData, 'customFields.'+cf_key) || ''}
													onChange={e => onFieldChange(
														'customFields',{
															...customFields,
															[cf_key]:e.target.value
														}
													)}
													error={Boolean(get(errors,'customFields.'+cf_key))}
													helperText={get(errors,'customFields.'+cf_key)}
													variant="outlined"
													SelectProps={{ 
														IconComponent: () => <ExpandMore style={{position:'absolute', right: 10}}/>
													}}
												>
													{_.map(_.get(cf, 'options', []), (m, index) =>
														(<MenuItem key={index} value={m.key}>
															{m.display}
														</MenuItem>)
													)}
												</TextField>
											</div>
										)})
									}
								</div>
								}
							</Card>
						</div>
					</div>

				</form>
			</Paper>
			<div className="row"
				style={{ paddingTop:'1rem', flexDirection: 'row-reverse' }}>
				<MuiButton
					variant="contained"
					color="primary"
					disabled={requesting}
					onClick={()=>onSubmit()}
				>
					<Typography variant="body1">
						{intl.formatMessage({ id: 'search.submit' })}
					</Typography>
				</MuiButton>
			</div>
		</div>
	)
}

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

#react.js #redux

Check if token expires and logout user

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

##javascript ##js #next.js #react.js

Animate header on scroll with Next.js & TailwindCSS

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

React Color Gradients

https://codepen.io/marcobiedermann/pen/WNGWzYR

#react.js #javascript #checkboxtoggle

javascript - How to toggle boolean state of react component? - Stack Overflow

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

#javascript #react.js

lowercase, uppercase, remove spaces ( trim ) , capitalize first letter

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

Open new window onclick reactJS

onClick={() => window.open(url, "_blank")}

Определяет клик вне компонента

import { useEffect } from 'react';

export const useClickOutside = (ref, setIsModalOpen) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsModalOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

useWorker | useWorker

https://useworker.js.org/

React JSX Iterating a List/Array

this.state = {
	zombies:[
    {
    	name: 'Zombie'
    },{
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    }
    ]
}

render() {
	return (
    	<div>
        {
        	this.state.zombies.map(zombie => <h1>{zombie.name}</h1>)
        }
        
        </div>
    )
}

#javascript #react.js

Hooks at a Glance – React

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);


  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

#javascript #react.js

loop in react jsx

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

////////// or:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

Material UI style snippet

const useStyles = makeStyles((theme) => ({}));

GRID material ui

<Grid container><Grid item></Grid></Grid>

MATERIAL UI _ custom style

import { createMuiTheme } from '@material-ui/core/styles';

// A custom theme for this app
const theme = createMuiTheme({});

export default theme;

#react.js #setstate

A correct way to log the current state after the update would be:

this.setState({ name: 'Matt' }, () => console.log(this.state.name))

Browse more snippets >>