framer-motion#AnimatePresence JavaScript Examples

ClaimRetroactivePoolWizardContainer = () => {
  const router = useRouter()
  const claim = router.query.claim

  const closeWizard = () => {
    handleCloseWizard(router)
  }

  if (!claim) {
    return null
  }

  return (
    <AnimatePresence>
      <ClaimRetroactivePoolWizard closeWizard={closeWizard} />
    </AnimatePresence>
  )
}

export default function AuthRouter() {
  const location = useLocation();
  return (
    <Suspense fallback={<PageLoader />}>
      <AnimatePresence exitBeforeEnter initial={false}>
        <Switch location={location} key={location.pathname}>
          <PublicRoute path="/" component={Login} render={() => <Redirect to="/login" />} exact />
          <PublicRoute component={Login} path="/login" exact />
          <Route path="*" component={NotFound} render={() => <Redirect to="/notfound" />} />
        </Switch>
      </AnimatePresence>
    </Suspense>
  );
}

export default function AppRouter() {
  const location = useLocation();
  return (
    <Suspense fallback={<PageLoader />}>
      <AnimatePresence exitBeforeEnter initial={false}>
        <Switch location={location} key={location.pathname}>
          <PrivateRoute path="/" component={Dashboard} exact />
          <PrivateRoute component={Customer} path="/customer" exact />
          <PrivateRoute
            component={SelectCustomer}
            path="/selectcustomer"
            exact
          />
          <PrivateRoute component={Lead} path="/lead" exact />
          <PrivateRoute component={Product} path="/product" exact />
          <PrivateRoute component={Admin} path="/admin" exact />

          <PrivateRoute component={Logout} path="/logout" exact />
          <PublicRoute path="/login" render={() => <Redirect to="/" />} />
          <Route
            path="*"
            component={NotFound}
            render={() => <Redirect to="/notfound" />}
          />
        </Switch>
      </AnimatePresence>
    </Suspense>
  );
}

Errorcard = ({ image, error, errormsg }) => {
	const ctx = useContext(Context);
	return (
		<AnimatePresence>
			{error ? (
				<>
					<Overlay />
					<Container variants={variants} key="Errorcard" initial="initial" animate="animate" exit="exit">
						<Gif>
							<img src={image} alt="Server Error" />
							<Closebtn
								onClick={() => {
									ctx.errorhandler();
								}}
							/>
						</Gif>
						<Errormsg>
							<h3>{errormsg}</h3>
						</Errormsg>
					</Container>
				</>
			) : null}
		</AnimatePresence>
	);
}

export default function AuthRouter() {
  const location = useLocation();
  return (
    <Suspense fallback={<PageLoader />}>
      <AnimatePresence exitBeforeEnter initial={false}>
        <Switch location={location} key={location.pathname}>
          <PublicRoute
            path="/"
            component={Login}
            render={() => <Redirect to="/login" />}
          />
          <PublicRoute component={Login} path="/login" exact />
          <Route
            path="*"
            component={NotFound}
            render={() => <Redirect to="/notfound" />}
          />
        </Switch>
      </AnimatePresence>
    </Suspense>
  );
}

export default function AppRouter() {
  const location = useLocation();
  return (
    <Suspense fallback={<PageLoader />}>
      <AnimatePresence exitBeforeEnter initial={false}>
        <Switch location={location} key={location.pathname}>
          {routesConfig.map((routeItem) => {
            return (
              <PrivateRoute
                key={routeItem.component}
                path={routeItem.path}
                exact={routeItem.exact || true}
                component={lazy(() =>
                  import(/* webpackChunkName: "[request]" */ `@/pages/${routeItem.component}`)
                )}
              />
            );
          })}
          <PublicRoute path="/login" render={() => <Redirect to="/" />} exact />
          <Route component={Logout} path="/logout" exact />
          <Route path="*" component={NotFound} render={() => <Redirect to="/notfound" />} />
        </Switch>
      </AnimatePresence>
    </Suspense>
  );
}

function App() {
  const location = useLocation();
  return (
    <AnimatePresence exitBeforeEnter>
      <span location={ location } key={ location.key }>
        <Route exact path="/sign-up" component={ withRouter(Auth) } />
        <Route exact path="/sign-in" component={ withRouter(Auth) } />
        <Route path="/home" component={ withRouter(Search) } />
        <Route exact path="/" component={ withRouter(Homepage) } />
      </span>
    </AnimatePresence>
  )
}

Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <>
      <GlobalStyles />
      <AnimatePresence exitBeforeEnter>
        <Styled.Layout>
          <Header siteTitle={data.site.siteMetadata.title} />
          <motion.div
            initial={{ y: 30, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ delay: 0.2 }}
          >
            {children}
            <Newsletter />
            <Footer />
          </motion.div>
        </Styled.Layout>
      </AnimatePresence>
    </>
  );
}

render() {
        const { Component, pageProps } = this.props;
        return (
            <>
                <Head>
                    <title> Amazon Next </title>
                </Head>
                <Provider store={store}>
                    <PersistGate persistor={persistor}>
                        <AnimatePresence exitBeforeEnter>
                            <Component {...pageProps} />
                        </AnimatePresence>
                    </PersistGate>
                </Provider>
            </>
        );
    }

function Notification({ toast }) {
	return (
		<ToastWrapper>
			{toast.map((popup, index) => (
				<AnimatePresence key={index}>
					<motion.div
						initial={{ opacity: 0, y: 50, scale: 0.3 }}
						animate={{ opacity: 1, y: 0, scale: 1 }}
						exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }}>
						<Toast>{popup}</Toast>
					</motion.div>
				</AnimatePresence>
			))}
		</ToastWrapper>
	);
}

render() {
    return (
      <ToastProvider>
        <Border />
        <BorderTop />
        <Nav hasShadow={this.state.hasNavShadow} />
        <ContentContainer>
          <AnimatePresence>
            <Main
              variants={variants}
              initial="initial"
              animate="enter"
              exit="exit"
            >
              {this.props.children}
            </Main>
          </AnimatePresence>
          <Footer />
        </ContentContainer>
      </ToastProvider>
    )
  }

Transition = ({ children, location }) => {
  const duration = 0.35

  const variants = {
    initial: {
      opacity: 0,
      y: 20,
    },
    enter: {
      opacity: 1,
      y: 0,
      transition: {
        duration: duration,
        delay: duration,
        when: "beforeChildren",
      },
    },
    exit: {
      opacity: 0,
      y: -20,
      transition: { duration: duration },
    },
  }

  return (
    <AnimatePresence>
      <motion.div
        key={location.pathname}
        variants={variants}
        initial="initial"
        animate="enter"
        exit="exit"
      >
        {children}
      </motion.div>
    </AnimatePresence>
  )
}

export default function App({ Component, pageProps }) {
  return (
    <>
      <MDXProvider>
        <ThemeProvider theme={theme}>
          <CurrentSlideProvider>
            <ModeProvider>
              <AnimatePresence exitBeforeEnter>
                <TransitionPage>
                  <Head>
                    <title>
                      {siteConfig.name} - {siteConfig.title}
                    </title>
                    <link rel="icon" href="/favicon.ico" />
                    <link
                      href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap"
                      rel="stylesheet"
                    />
                  </Head>
                  <Header
                    name={siteConfig.name}
                    title={siteConfig.title}
                    date={siteConfig.date}
                    url={siteConfig.author.url}
                  />
                  <Component {...pageProps} />
                </TransitionPage>
              </AnimatePresence>
            </ModeProvider>
          </CurrentSlideProvider>
        </ThemeProvider>
      </MDXProvider>
    </>
  );
}

AccordionSection = ({
  i,
  expanded,
  setExpanded,
  headerText,
  children,
}) => {
  const isOpen = expanded[i] === true
  const icon = isOpen ? faMinus : faPlus

  // By using `AnimatePresence` to mount and unmount the contents, we can animate
  // them in and out while also only rendering the contents of open accordions
  return (
    <Container>
      <Header
        initial={false}
        animate={{
          backgroundColor: isOpen ? styles.colorWhite : styles.colorWhite,
          color: isOpen ? styles.colorGrayDarkest : styles.colorGrayDarkest,
        }}
        onClick={() => setExpanded({ ...expanded, [i]: isOpen ? false : true })}
      >
        <span>
          <Icon icon={icon} />
        </span>
        <span>{headerText}</span>
      </Header>
      <AnimatePresence initial={false}>
        {isOpen && (
          <Section
            key="content"
            initial="collapsed"
            animate="open"
            exit="collapsed"
            variants={{
              open: { opacity: 1, height: "auto" },
              collapsed: { opacity: 0, height: 0 },
            }}
            transition={{ duration: 0.8, ease: [0.04, 0.62, 0.23, 0.98] }}
          >
            <Content
              variants={{ collapsed: { scale: 0.8 }, open: { scale: 1 } }}
              transition={{ duration: 0.8 }}
              className="accordion-content"
            >
              {children}
            </Content>
          </Section>
        )}
      </AnimatePresence>
    </Container>
  )
}

export default function Modal(props) {
  const { isVisible, setIsVisible, className, zIndex } = props;
  const modalRef = useRef(null);
  useLockBodyScroll(modalRef, isVisible);
  useEffect(
    () => {
      function close(e) {
        if (e.keyCode === 27) {
          setIsVisible(false);
        }
      }
      window.addEventListener('keydown', close);
      return () => window.removeEventListener('keydown', close);
    },
    [setIsVisible]
  );

  const fadeVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 },
  };

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          className={cx('Modal', className)}
          style={{ zIndex }}
          initial="hidden"
          animate="visible"
          exit="hidden"
          variants={fadeVariants}
          transition={{ duration: 0.2 }}
        >
          <div
            className="Modal-backdrop"
            style={{
              overflow: isVisible ? 'hidden' : 'visible',
              position: 'fixed',
            }}
            onClick={() => setIsVisible(false)}
          />
          <div className="Modal-content">
            <div className="Modal-title-bar">
              <div className="Modal-title">{props.label}</div>
              <div className="Modal-close-button" onClick={() => setIsVisible(false)}>
                <MdClose fontSize={20} className="Modal-close-icon" />
              </div>
            </div>
            <div className="divider" />
            <div className="Modal-body" ref={modalRef}>
              {props.children}
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

Nav = ({ hasShadow }) => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "favicon.png" }) {
        childImageSharp {
          fixed(height: 40) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)

  const [isOpen, toggleOpen] = useCycle(false, true)
  const containerRef = useRef(null) // TODO is this needed?

  return (
    <StyledNav
      className={hasShadow ? "nav-shadow" : ""}
      initial="closed"
      animate={isOpen ? "open" : "closed"}
      ref={containerRef}
    >
      <div>
        <NavLinkMain to="/">
          <NavLogo
            fixed={data.file.childImageSharp.fixed}
            alt="Ethereum Foundation Fellowship Program Logo"
          />
          <NavLogoText>Fellowship Program</NavLogoText>
        </NavLinkMain>
      </div>
      {/* Desktop */}
      <NavLinks>
        {navItems.map((item, idx) => {
          return (
            <NavLink to={item.to} key={idx}>
              {item.text}
            </NavLink>
          )
        })}
      </NavLinks>
      {/* Mobile */}
      <MobileNavBackground variants={backgroundVariants} />
      <AnimatePresence>
        {isOpen && (
          <MobileNavLinks
            navItems={navItems}
            key="navigation"
            toggle={() => toggleOpen()}
          />
        )}
      </AnimatePresence>
      <MobileNavMenu toggle={() => toggleOpen()} />
    </StyledNav>
  )
}

Overlay = ({
  backgroundColor,
  color,
  children,
  onClose,
  fullWidth,
  isOpen,
  ...props
}) => {
  const onDismiss = (event) => {
    if (event.target.dataset.overlayAction === 'close') {
      onClose(event)
    }
  }

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          variants={variants}
          initial='default'
          animate='enter'
          exit='exit'
        >
          <Box
            data-overlay-action='close'
            sx={{
              display: 'flex',
              p: [2, '', 4],
              position: 'fixed',
              top: 0,
              right: 0,
              bottom: 0,
              left: 0,
              backgroundColor: 'rgba(0,0,0,0.85)',
              zIndex: 950,
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center'
            }}
            onClick={onDismiss}
          >
            <motion.div style={{ maxWidth: '100%' }} variants={innerVariants}>
              <Box
                sx={{
                  borderRadius: 4,
                  display: 'flex',
                  flexDirection: 'column',
                  bg: backgroundColor,
                  color: color,
                  position: 'relative',
                  zIndex: 999,
                  width: fullWidth ? '100%' : 560,
                  maxWidth: '100%',
                  overflow: 'auto',
                  p: 4
                }}
                {...props}
              >
                {children}
              </Box>
            </motion.div>
          </Box>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

export default function ProjectCard({
  card: { img, title, desc, demo, source },
}) {
  const [isLoading, setIsLoading] = useState(true)

  const thumbnail = {
    backgroundImage: `url(${img})`,
  }

  const LoadingAnimation = () => {
    return (
      <AnimatePresence>
        {isLoading && (
          <motion.div className="overlay">
            <img
              src={img}
              onLoad={() => setTimeout(() => setIsLoading(false), 1000)}
              onError={() => setIsLoading(false)}
              style={{ display: "none" }}
              alt={title}
            />
            <img src={loadingGif} alt="Loading card..." />
          </motion.div>
        )}
      </AnimatePresence>
    )
  }

  return (
    <Card data-aos="flip-left">
      <div className="card-thumbnail" style={thumbnail}>
        <LoadingAnimation />
      </div>

      <Card.Body>
        <Card.Title className="title">{title}</Card.Title>
        <Card.Text>{desc}</Card.Text>
        <div className="btn-grp">
          <Button href={demo} target="_blank">
            Live Demo
          </Button>
          <Button href={source} target="_blank" variant="secondary">
            Source Code
          </Button>
        </div>
      </Card.Body>
    </Card>
  )
}

function App() {
  const location = useLocation();
  return (
    <div className="App">
      <>
        <NavBar />
        <AnimatePresence exitBeforeEnter>
          <Switch location={location} key={location.pathname}>
            {frameworks.map((framework, i) => (
              <Route
                exact
                path={framework.path}
                key={i}
                // whenever we want to use props, we will use render instead of components
                render={() => (
                  <Learn name={framework.title} content={framework.content} />
                )}
              />
            ))}

            {languages.map((language, i) => (
              <Route
                exact
                path={language.path}
                key={i}
                // whenever we want to use props, we will use render instead of components
                render={() => (
                  <Learn name={language.title} content={language.content} />
                )}
              />
            ))}

            {databases.map((language, i) => (
              <Route
                exact
                path={language.path}
                key={i}
                // whenever we want to use props, we will use render instead of components
                render={() => (
                  <Learn name={language.title} content={language.content} />
                )}
              />
            ))}

            <Route exact path="/languages" component={Languages} />
            <Route exact path="/frameworks" component={Frameworks} />
            <Route exact path="/tags" component={Tags} />
            <Route exact path="/softwares" component={Softwares} />
            <Route exact path="/databases" component={Databases} />
            <Route exact path="/contactus" component={ContactUs} />
            <Route exact path="/" component={Home}></Route>
            <Route
              render={props => (
                <div>
                  <ErrorPage />
                </div>
              )}
            ></Route>
          </Switch>
        </AnimatePresence>
        <ScrollToTop />
      </>
    </div>
  );
}

Router = () => {
  const language = useSelector((state) => state.settings.language);

  const pageVariants = {
    in: {
      opacity: 1,
      scale: 1,
    },
    initial: {
      opacity: 0,
      scale: 0.99,
    },
    out: {
      opacity: 0,
      scale: 1.01,
    },
  };

  const pageTransition = {
    duration: 0.4,
    ease: 'anticipate',
    type: 'tween',
  };

  const messages = languageProvider[language];

  return (
    <BrowserRouter>
      <AnimatePresence>
        <Suspense fallback={<SuspenseLoading messages={messages} />}>
          <Switch>
            <motion.div
              initial="initial"
              animate="in"
              exit="out"
              variants={pageVariants}
              transition={pageTransition}
            >
              <Route path="/">
                <Dashboard>
                  <Switch>
                    <motion.div
                      initial="initial"
                      animate="in"
                      exit="out"
                      variants={pageVariants}
                      transition={pageTransition}
                    >
                      <Route component={Web3SignIn} path="/login" />
                      <Route component={ContractManager} exact path="/" />
                    </motion.div>
                  </Switch>
                </Dashboard>
              </Route>
            </motion.div>
          </Switch>
        </Suspense>
      </AnimatePresence>
    </BrowserRouter>
  );
}

Menu = ({ setMenuState, menuState, setCursorHovered, x, y }) => {
  const closeMenu = () => {
    setMenuState(!menuState)
  }

  return (
    <>
      <AnimatePresence>
        {menuState && (
          <>
            <motion.div
              initial={{ visibility: "hidden" }}
              exit={{
                visibility: "hidden",
                transition: { delay: 1 },
              }}
              animate={{
                visibility: "visible",
                transition: { delay: 1 },
              }}
              className="projects"
            >
              <div className="menu-title">Products</div>
              <div
                onClick={() => closeMenu()}
                onMouseEnter={() => setCursorHovered(true)}
                onMouseLeave={() => setCursorHovered(false)}
                className="close"
              >
                <Close />
              </div>
              <div className="menu">
                <div className="container">
                  <div className="menu-inner">
                    <motion.ul
                      variants={parent}
                      initial="initial"
                      animate="animate"
                      exit="exit"
                    >
                      {menuList.map(list => (
                        <List
                          key={list.id}
                          setCursorHovered={setCursorHovered}
                          leftLineFlex={list.leftLineFlex}
                          rightLineFlex={list.rightLineFlex}
                          title={list.title}
                          thumbnailPosition={list.thumbnailPosition}
                          offset={list.offset}
                          src={list.src}
                          id={list.id}
                          x={x}
                          y={y}
                        />
                      ))}
                    </motion.ul>
                  </div>
                </div>
              </div>
            </motion.div>
            <Panels />
          </>
        )}
      </AnimatePresence>
    </>
  )
}

Results = () => {
	const ctx = useContext(Context);
	const truncate = (str, num) => {
		if (str.length <= num) return str;
		return str.substring(0, num).concat('...');
	};
	const closeResult = () => {
		ctx.cardhandler();
	};
	return (
		<AnimatePresence>
			{ctx.animeinfoexits ? (
				<>
					<Overlay key="Overlay" onClick={closeResult} />
					<Animecard key="animecard" variants={variants} initial="initial" animate="animate" exit="exit">
						<Banner>
							<Closebtn onClick={closeResult}></Closebtn>
							{ctx.animeinfo.bannerImage ? (
								<>
									<Bannerimg src={ctx.animeinfo.bannerImage}></Bannerimg>
									<Banneroverlay></Banneroverlay>{' '}
								</>
							) : null}
						</Banner>
						<Animeinfo>
							<Cover>
								<Coverimg src={ctx.animeinfo.coverImage.large} alt=""></Coverimg>
							</Cover>
							<Animetext>
								<Title>{ctx.animeinfo.title.english || ctx.animeinfo.title.native}</Title>
								<Info>
									<Details>
										<h3>Ep {ctx.animeinfo.episode}</h3>
										<h3>at {(ctx.animeinfo.time / 60).toFixed(2).replace('.', ':')}</h3>
										<h3>{ctx.animeinfo.seasonYear}</h3>
										<Similarity props={ctx.animeinfo.similarity.toFixed(2) * 100}>
											{ctx.animeinfo.similarity.toFixed(2) * 100}%
										</Similarity>
									</Details>
								</Info>
								<Summary>
									<p>{ctx.animeinfo.description ? truncate(ctx.animeinfo.description, 250) : null}</p>
									<Links>
										{ctx.animeinfo.externalLinks.map(({ id, site, url }) => {
											return (
												<li key={id}>
													<StyledLink href={url} target="_blank">
														{site}
													</StyledLink>
												</li>
											);
										})}
									</Links>
								</Summary>
							</Animetext>
							<Resultfooter>
								<Moreinfo href={ctx.animeinfo.siteUrl} target="_blank">
									<AiOutlineInfoCircle size={15} />
									<span>More Info</span>
									<IoIosArrowForward size={15} />
								</Moreinfo>
								<span>
									Information by{' '}
									<StyledLink href="https://anilist.com" target="_blank">
										Anilist
									</StyledLink>
								</span>
							</Resultfooter>
						</Animeinfo>
					</Animecard>
				</>
			) : null}
		</AnimatePresence>
	);
}

ModuleItem = ({ module, units, query, progress }) => {
  const isCurrentModule = units.find((u) => u.slug === query.slug);
  const [isOpen, setIsOpen] = useState(isCurrentModule);
  const toggleOpen = () => setIsOpen(!isOpen);

  return (
    <div>
      <button
        className="font-bold p-2 cursor-pointer w-full text-left hover:bg-blue-100 rounded-md focus:outline-none focus:ring-2 ring-inset ring-blue-500 flex"
        onClick={toggleOpen}
      >
        <span>{module}</span>
        <span className="w-4 h-4 inline-block ml-auto self-center">
          {isOpen ? <Less /> : <More />}
        </span>
      </button>
      <AnimatePresence>
        {isOpen && units && (
          <motion.div
            initial="collapsed"
            animate="open"
            exit="collapsed"
            variants={{
              open: { opacity: 1, height: "auto", overflow: "hidden" },
              collapsed: { opacity: 0, height: 0 },
            }}
            transition={{ duration: 0.3, ease: [0.5, 0.7, 0.4, 1] }}
          >
            <ul>
              {units.map((unit) => (
                <UnitItem
                  key={unit.slug}
                  unit={unit}
                  query={query}
                  progress={progress}
                />
              ))}
            </ul>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default function Popup({ className }) {
  const { jsx } = React.useContext(ToastContext)
  const hovered = Boolean(jsx)
  return (
    <Flex
      position="fixed"
      justifyContent="center"
      display="flex"
      zIndex={0}
      alignItems="center"
      maxHeight="40vh"
      height="100%"
      pointerEvents="none"
      backgroundPosition={hovered ? "100px" : "0"}
      transition={transition}
      opacity={hovered ? 1 : 0}
      background="bgPopupShadow"
      width="100%"
      bottom={0}
      left={0}
      right={0}
    >
      <AnimatePresence>
        {hovered && (
          <MotionFlex
            width={["auto", null, "100%"]}
            borderLeft={`2px solid`}
            borderColor="brand.100"
            background="bg.100"
            transition={{ type: "tween", duration: 0.24 }}
            initial={{
              opacity: 0,
              y: 25,
            }}
            animate={{
              opacity: 1,
              y: 0,
            }}
            exit={{
              opacity: 0,
              y: 25,
            }}
            alignItems="center"
            borderTopRightRadius="md"
            borderBottomRightRadius="md"
            position="absolute"
            bottom={[4, null, null, 8]}
            left={4}
            right={4}
            mx={"auto"}
            maxWidth="lg"
            py={3}
            px={4}
            boxShadow="xl"
          >
            {jsx ?? "Oh no this toast isn't meant to be blank!"}
          </MotionFlex>
        )}
      </AnimatePresence>
    </Flex>
  )
}

Urlinput = ({ url, toggleurl, urlhandler, showurl, open }) => {
	return (
		<>
			<AnimatePresence exitBeforeEnter={true}>
				{showurl ? (
					<UrlContainer>
						<Url
							key="urlbtn"
							onClick={e => e.stopPropagation()}
							onBlur={toggleurl}
							type="url"
							name="url"
							id="url"
							placeholder="Paste your url"
							pattern="https://.*"
							autoComplete="off"
							onChange={urlhandler}
							value={url}
							initial={{ width: 0 }}
							animate={{ width: '220px' }}
							exit={{
								width: 0,
								padding: 0,
								transition: {
									duration: 1,
									ease: 'easeInOut',
								},
							}}
							transition={{
								duration: 1,
								ease: 'easeInOut',
								type: 'spring',
							}}
						/>
						<UrlClosebtn
							initial={{ opacity: 0 }}
							animate={{ opacity: 1 }}
							transition={{
								delay: 1,
							}}>
							<CloseBtn onClick={toggleurl}>
								<IoMdClose color={'black'} size={20} />
							</CloseBtn>
						</UrlClosebtn>
					</UrlContainer>
				) : (
					<Filebtn open={open} toggleurl={toggleurl} key1="btn1" key2="btn2" />
				)}
			</AnimatePresence>
		</>
	);
}

export function wrapPageElement({ element }) {
  return <AnimatePresence exitBeforeEnter>{element}</AnimatePresence>
}

export default function ConfirmationModal({ language, show, close }) {
  const router = useRouter();
  const content = confirmationModalContent[language];
  return (
    <AnimatePresence>
      {show && (
        <div className="fixed z-50 bottom-0 inset-x-0 px-4 pb-6 sm:inset-0 sm:p-0 sm:flex sm:items-center sm:justify-center">
          <motion.div
            key="modalWrapper"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={close}
            className="fixed inset-0">
            <div className="absolute inset-0 bg-teal-900 opacity-50"></div>
          </motion.div>
          <motion.div
            key="modal"
            initial={{ opacity: 0, y: 32, transition: { delay: 0.15 } }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 32 }}
            className="relative bg-white rounded-lg px-4 pt-5 pb-4 overflow-hidden shadow-xl sm:max-w-lg sm:w-full sm:p-6">
            <div>
              <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
                <svg className="h-6 w-6 text-green-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <div className="mt-3 text-center sm:mt-5">
                <h3 className="text-lg leading-6 font-medium text-gray-900">{content.title}</h3>
                <div className="mt-2">
                  <p className="text-sm leading-5 text-gray-500">{content.description}</p>
                </div>
              </div>
            </div>
            <div className="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
              <span className="flex w-full rounded-md shadow-sm sm:col-start-2">
                <button
                  type="button"
                  onClick={() => router.push('/')}
                  className="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-teal-500 text-base leading-6 font-medium text-white shadow-sm hover:bg-teal-600 sm:text-sm sm:leading-5">
                  {content.close}
                </button>
              </span>
              <span className="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:col-start-1">
                <button
                  type="button"
                  onClick={close}
                  className="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                  {content.back}
                </button>
              </span>
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
}

export default function LanguageSwitcher({ mobile }) {
  const context = React.useContext(I18nextContext)
  const lang = context.language ? context.language : context.defaultLanguage
  const [showDropdown, setShowDropdown] = useState(false)
  const { originalPath } = useI18next()
  const selectedLanguage = LANGUAGES.find(l => l.value === lang)

  return (
    <LanguageSwitcherContainer mobile={mobile}>
      <ActiveLanguage
        mobile={mobile}
        onClick={() => setShowDropdown(show => !show)}
      >
        <LanguageLabel>
          {mobile ? selectedLanguage.label : selectedLanguage.value}
        </LanguageLabel>
        <RotatingSmallCaret
          start="top"
          rotated={showDropdown}
          highlight={true}
        />
      </ActiveLanguage>
      {showDropdown && (
        <AnimatePresence>
          <Dropdown
            mobile={mobile}
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
          >
            {LANGUAGES.map(language => {
              return (
                <Link to={originalPath} language={language.value}>
                  <span css={{ paddingRight: "12px" }}>{language.label}</span>
                  <Ball selected={selectedLanguage.value === language.value} />
                </Link>
              )
            })}
          </Dropdown>
        </AnimatePresence>
      )}
    </LanguageSwitcherContainer>
  )
}

function App() {
    const [showLatestPatchNote, setShowLatestPatchNote] = useState(false);

    const dispatch = useDispatch();
    const { loading: loadingUser, user } = useSelector((state) => state.auth);
    const { loading: loadingPonce } = useSelector((state) => state.ponce);
    const { theme } = useSelector((state) => state.settings);
    const { socket } = useSelector((state) => state.socket);
    const { latest: latestPatchNote } = useSelector(
        (state) => state.patchNotes
    );

    useEffect(() => {
        dispatch(fetchUser());
        dispatch(fetchPonce());
        dispatch(fetchTracks());
        dispatch(fetchLatestPatchNote());
        dispatch(fetchTheme());
    }, []);

    useEffect(() => {
        dispatch(setSocket(user));
        if (user?.isAdmin) dispatch(fetchPatchNotes());
    }, [user]);

    useEffect(() => {
        if (latestPatchNote) {
            const previousPatchNote = localStorage.getItem('latestPatchNote');

            if (
                !previousPatchNote ||
                moment(previousPatchNote).isBefore(latestPatchNote.createdAt)
            )
                setShowLatestPatchNote(true);
        }
    }, [latestPatchNote]);

    useEffect(() => {
        if (socket) {
            socket.on('getTournaments', (tournaments) =>
                dispatch(setTournaments(tournaments))
            );
            socket.on('createTournament', (tournament) => {
                dispatch(addTournament(tournament));
            });
            socket.on('updateTournament', (tournament) =>
                dispatch(editTournament(tournament))
            );

            fetchTournaments();
        }

        return () => {
            if (socket) {
                socket.off('getTournaments');
                socket.off('createTournament');
                socket.off('updateTournament');
            }
        };
    }, [socket]);

    const closePatchNote = () => {
        setShowLatestPatchNote(false);
        localStorage.setItem('latestPatchNote', latestPatchNote.createdAt);
    };

    const fetchTournaments = () => {
        socket.emit('getTournaments', {}, (err) =>
            dispatch(setTournamentsError(err))
        );
    };

    return loadingUser || loadingPonce ? (
        <></>
    ) : (
        <Router>
            <Helmet
                titleTemplate="%s - Tournoi des fleurs"
                defaultTitle="Tournoi des fleurs"
            />

            <ScrollToTop />

            <div className="container">
                <SkeletonTheme
                    color={CSSTheme[theme].secondaryBackgroundColor}
                    highlightColor={CSSTheme[theme].borderColor}
                >
                    <AnimatePresence>
                        {showLatestPatchNote && (
                            <LatestPatchNote
                                patchNote={latestPatchNote}
                                onClose={closePatchNote}
                            />
                        )}
                    </AnimatePresence>

                    <Header />
                    <Analytics />
                    <Container>
                        <Switch>
                            <Route exact path="/signup" component={Signup} />
                            <Route exact path="/signin" component={Signin} />

                            <Route exact path="/" component={Home} />
                            <Route
                                exact
                                path="/history"
                                component={PonceParticipations}
                            />
                            <Route exact path="/races" component={PonceRaces} />
                            <Route
                                exact
                                path="/statistics"
                                component={PonceStatistics}
                            />

                            <Route
                                path="/users/:username"
                                component={UserWrapper}
                            />

                            <PrivateRoute
                                exact
                                path="/settings"
                                component={Settings}
                            />

                            <AdminRoute
                                path="/admin"
                                component={AdminWrapper}
                            />

                            <Route exact path="/cgu" component={CGU} />
                        </Switch>
                    </Container>
                </SkeletonTheme>
            </div>
            <Footer />
        </Router>
    );
}