Branch

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])

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>

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

// 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);

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]);
};

import React, {useState, useEffect} from 'react'
import {connect} from 'react-redux'
import { FormattedMessage } from 'react-intl'
import {getCreditMatrix, getCreditBalance, purchaseCredit} from './actions'
import StripeContainer from 'containers/Stripe/StripeContainer'
import {Paper, Slider, CircularProgress, Typography, Divider, Button} from '@material-ui/core'
import Credit from '../../components/Icons/Credit'

function CreditManager(props) {
	const { matrix, balance, isRequesting, isRequestingPurchase, paymentOptions, showSuccess } = props
	const { getCreditMatrix, getCreditBalance, purchaseCredit} = props

	const [creditAmount, setCreditAmount] = useState(null)

	useEffect(() => {
		getCreditMatrix()
		getCreditBalance()
	}, [])

	useEffect(() => {
		if (matrix.length > 0)
			setCreditAmount(matrix[0][0])
	}, [matrix])

	if (matrix.length === 0 || balance === null)
		return null

	const min = matrix[0][0]
	const max = matrix[matrix.length - 1][0]


	const sliderMarks = matrix.map(pair => ({
		value: pair[0]
	}))

	const realAmount = _.get(_.find(matrix, pair => pair[0] === creditAmount), 1)
	return (
		<div style={{width:'100%'}}>
			<Paper className="row" classes={{root: 'paperContainer'}}>
				<Credit style={{fontSize:'36', padding: '1rem'}}/>

				<div className="row" style={{justifyContent:'space-between'}}>
					<Typography aria-label="credit balance" style={{padding: '1rem'}}>
						<FormattedMessage id="credit.balance" values={{balance}} />
					</Typography>
					<Button
						variant="outlined"
						color="primary"
						style={{margin: '1rem'}}
					>
						Acheter des crédits
					</Button>
				</div>
			</Paper>

			<Paper classes={{root: 'paperContainer'}}>
				<div className="column" style={{alignItems: 'center'}}>
					<Typography style={{padding: '1rem'}}>
						<FormattedMessage
							id="credit.buyWithDiscount"
							values={{
								creditAmount,
								price: realAmount,
								currency: _.get(paymentOptions, 'currency')
							}} />
					</Typography>
					<div className="row" style={{width: '100%', alignItems: 'center', justifyContent: 'space-between', padding: '1rem'}}>
						<Typography style={{padding: '1rem'}}>{min}</Typography>
						<Slider
							defaultValue={min}
							step={null}
							marks={sliderMarks}
							onChange={(e, v) => setCreditAmount(v)}
							min={min}
							max={max}
							valueLabelDisplay="auto"
						/>
						<Typography style={{padding: '1rem'}}>{max}</Typography>
					</div>
				</div>
			</Paper>

			{ /* this condition is a little hack for refreshing the form after success (more UX friendly) */
				!showSuccess &&
				<div className="paperContainer">
					<StripeContainer
						validate={data => purchaseCredit(creditAmount, realAmount, {
							method: 'STRIPE',
							data
						})}
						totalPrice={realAmount}
						isRequesting={isRequesting}
						buttonLabel="purchase credit with creditcard"
					/>
				</div>
			}

		</div>
	)
}
const mapStateToProps = (state) => {
	const credit = state.credit
	const territory = _.get(state, 'territory.locals', []).find(t => t.territory_key === state.territory.current)
	return {
		matrix: credit.matrix,
		balance: credit.balance,
		isRequesting: credit.isRequestingMatrix || credit.isRequestingBalance || credit.isRequestingPurchase,
		isRequestingPurchase: credit.isRequestingPurchase,
		paymentOptions: _.get(territory, 'payment', {})
	}
}

const mapDispatchToProps = dispatch => ({
	getCreditMatrix: () => dispatch(getCreditMatrix()),
	getCreditBalance: () => dispatch(getCreditBalance()),
	purchaseCredit: (creditAmount, realAmount, payment) => dispatch(purchaseCredit(creditAmount, realAmount, payment)),
})
export default connect(mapStateToProps, mapDispatchToProps)(CreditManager)

import React, {useState, useEffect} from 'react'
import {connect} from 'react-redux'
import { FormattedMessage } from 'react-intl'
import {getCreditMatrix, getCreditBalance, purchaseCredit} from './actions'
import StripeContainer from 'containers/Stripe/StripeContainer'
import {Paper, Slider, CircularProgress, Typography, Divider, Button} from '@material-ui/core'
import Credit from '../../components/Icons/Credit'

function CreditManager(props) {
	const { matrix, balance, isRequesting, isRequestingPurchase, paymentOptions, showSuccess } = props
	const { getCreditMatrix, getCreditBalance, purchaseCredit} = props

	const [creditAmount, setCreditAmount] = useState(null)

	useEffect(() => {
		getCreditMatrix()
		getCreditBalance()
	}, [])

	useEffect(() => {
		if (matrix.length > 0)
			setCreditAmount(matrix[0][0])
	}, [matrix])

	if (matrix.length === 0 || balance === null)
		return null

	const min = matrix[0][0]
	const max = matrix[matrix.length - 1][0]


	const sliderMarks = matrix.map(pair => ({
		value: pair[0]
	}))

	const realAmount = _.get(_.find(matrix, pair => pair[0] === creditAmount), 1)
	return (
		<div style={{width:'100%'}}>
			<Paper className="row" classes={{root: 'paperContainer'}}>
				<Credit style={{fontSize:'36', padding: '1rem'}}/>

				<div className="row" style={{justifyContent:'space-between'}}>
					<Typography aria-label="credit balance" style={{padding: '1rem'}}>
						<FormattedMessage id="credit.balance" values={{balance}} />
					</Typography>
					<Button
						variant="outlined"
						color="primary"
						style={{margin: '1rem'}}
					>
						Acheter des crédits
					</Button>
				</div>
			</Paper>

			<Paper classes={{root: 'paperContainer'}}>
				<div className="column" style={{alignItems: 'center'}}>
					<Typography style={{padding: '1rem'}}>
						<FormattedMessage
							id="credit.buyWithDiscount"
							values={{
								creditAmount,
								price: realAmount,
								currency: _.get(paymentOptions, 'currency')
							}} />
					</Typography>
					<div className="row" style={{width: '100%', alignItems: 'center', justifyContent: 'space-between', padding: '1rem'}}>
						<Typography style={{padding: '1rem'}}>{min}</Typography>
						<Slider
							defaultValue={min}
							step={null}
							marks={sliderMarks}
							onChange={(e, v) => setCreditAmount(v)}
							min={min}
							max={max}
							valueLabelDisplay="auto"
						/>
						<Typography style={{padding: '1rem'}}>{max}</Typography>
					</div>
				</div>
			</Paper>

			{ /* this condition is a little hack for refreshing the form after success (more UX friendly) */
				!showSuccess &&
				<div className="paperContainer">
					<StripeContainer
						validate={data => purchaseCredit(creditAmount, realAmount, {
							method: 'STRIPE',
							data
						})}
						totalPrice={realAmount}
						isRequesting={isRequesting}
						buttonLabel="purchase credit with creditcard"
					/>
				</div>
			}

		</div>
	)
}
const mapStateToProps = (state) => {
	const credit = state.credit
	const territory = _.get(state, 'territory.locals', []).find(t => t.territory_key === state.territory.current)
	return {
		matrix: credit.matrix,
		balance: credit.balance,
		isRequesting: credit.isRequestingMatrix || credit.isRequestingBalance || credit.isRequestingPurchase,
		isRequestingPurchase: credit.isRequestingPurchase,
		paymentOptions: _.get(territory, 'payment', {})
	}
}

const mapDispatchToProps = dispatch => ({
	getCreditMatrix: () => dispatch(getCreditMatrix()),
	getCreditBalance: () => dispatch(getCreditBalance()),
	purchaseCredit: (creditAmount, realAmount, payment) => dispatch(purchaseCredit(creditAmount, realAmount, payment)),
})
export default connect(mapStateToProps, mapDispatchToProps)(CreditManager)

  bug/ch27169/booking-site-forbid-searchs-with-0-passengers
  bug/ch27169/booking-site-forbid-searchs-with-0-passengers-2
  bug/ch27458/cs-bug-show-displayed-name-for-equipments
  chore/ch30121/booking-site-api-management
  dev
  feature/ch28070/booking-site-allow-user-to-change-his-phone
  feature/ch29858/booking-site-creation-of-footer
* feature/ch30356/booking-site-account-page-new-design
  feature/ch30703/booking-site-new-menu-design

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>
    )
}

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>
  );
}

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>
  )
}

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