react-i18next#useTranslation JavaScript Examples

ProfileMenu = (props) => {
    const { t } = useTranslation();

    if (!props.user) {
        return null;
    }

    const title = (
        <span>
            <Avatar imgPath={props.user.avatar}></Avatar>
            {props.user.username}
        </span>
    );

    return (
        <NavDropdown title={title} id='nav-dropdown'>
            {props.menu.map((menuItem) => {
                if (!menuItem.path) {
                    return null;
                }

                return (
                    <Link key={menuItem.path} href={menuItem.path}>
                        <NavDropdown.Item>{t(menuItem.title)}</NavDropdown.Item>
                    </Link>
                );
            })}
        </NavDropdown>
    );
}

function SHCItem({ i, m }) {
  var {t} = useTranslation();
  var theme = useSelector(i => i.themes[i.theme]);
  var [open, setOpen] = React.useState(false);
  return <Menu
    visible={open}
    onDismiss={() => setOpen(false)}
    anchor={
      <TouchableRipple onPress={() => setOpen(true)}>
        <View key={i.icon} style={{ padding: 2, alignItems: "center", position: "relative" }}>
          <Image style={{ height: 32, width: 32 }} source={getIcon(i.pin)} />
          {m && <Image style={{ height: 20, width: 20, position: "absolute", bottom: 0, right: -4 }} source={getIcon(m.pin)} />}
        </View>
      </TouchableRipple>
    }
    style={{ marginTop: 61 }}
  >
    <View style={{ paddingHorizontal: 4, alignItems: "center" }}>
      <Image style={{ height: 48, width: 48 }} source={getIcon(i.pin)} />
      <Text allowFontScaling={false} style={{ fontSize: 12, ...font("bold") }}>{i.friendly_name}</Text>
      <Text allowFontScaling={false} style={{ fontSize: 12, ...font("bold") }}>{t('activity:by_user',{user:i.username})}</Text>
    </View>
  </Menu>;
}

LanguageSelector = () => {
    const { i18n } = useTranslation();

    /**
     * @param {string} language
     */
    const onLanguageSelect = (language) => {
        i18n.changeLanguage(language);
    };

    useEffect(() => {
        let currentLanguage = languages.find((l) => l.value === i18n.language);

        if (!currentLanguage) {
            i18n.changeLanguage('en');
        }
    }, [i18n]);

    return (
        <NavDropdown
            title={i18n.language}
            id='nav-dropdown'
            drop='left'
            onSelect={onLanguageSelect}
        >
            {languages.map((language) => (
                <NavDropdown.Item key={language.value} eventKey={language.value}>
                    {language.name}
                </NavDropdown.Item>
            ))}
        </NavDropdown>
    );
}

function SHCItem({ i, m }) {
  var {t} = useTranslation();
  var theme = useSelector(i => i.themes[i.theme]);
  var [open, setOpen] = React.useState(false);
  return <Menu
    visible={open}
    onDismiss={() => setOpen(false)}
    anchor={
      <TouchableRipple onPress={() => setOpen(true)}>
        <View key={i.icon} style={{ padding: 2, alignItems: "center", position: "relative" }}>
          <Image style={{ height: 32, width: 32 }} source={getIcon(i.pin)} />
          {m && <Image style={{ height: 20, width: 20, position: "absolute", bottom: 0, right: -4 }} source={getIcon(m.pin)} />}
        </View>
      </TouchableRipple>
    }
    style={{ marginTop: 61 }}
  >
    <View style={{ paddingHorizontal: 4, alignItems: "center" }}>
      <Image style={{ height: 48, width: 48 }} source={getIcon(i.pin)} />
      <Text allowFontScaling={false} style={{ fontSize: 12, ...font("bold") }}>{i.friendly_name}</Text>
      <Text allowFontScaling={false} style={{ fontSize: 12, ...font("bold") }}>{t('activity:by_user',{user:i.username})}</Text>
    </View>
  </Menu>;
}

InGameSettings = ({ formProps }) => {
    const { t } = useTranslation();

    return (
        <Panel title={t('Game Settings')}>
            <Form.Row>
                <Form.Check
                    id='orderForcedAbilities'
                    name='gameOptions.orderForcedAbilities'
                    label={t('Prompt to order simultaneous abilities')}
                    type='switch'
                    checked={formProps.values.gameOptions.orderForcedAbilities}
                    onChange={formProps.handleChange}
                    onBlur={formProps.handleBlur}
                />
                <Form.Check
                    id='confirmOneClick'
                    name='gameOptions.confirmOneClick'
                    label={t('Show a prompt when initating 1-click abilities')}
                    type='switch'
                    checked={formProps.values.gameOptions.confirmOneClick}
                    onChange={formProps.handleChange}
                    onBlur={formProps.handleBlur}
                />
                <Form.Check
                    id='leftPrompt'
                    name='gameOptions.leftPrompt'
                    label={t('Show the prompt area on left')}
                    type='switch'
                    checked={formProps.values.gameOptions.leftPrompt}
                    onChange={formProps.handleChange}
                    onBlur={formProps.handleBlur}
                />

            </Form.Row>
        </Panel>
    );
}

export default function Area() {
  const [t] = useTranslation();
  let { latitude, longitude, error } = usePosition();

  let initialZoom

  if (error) {
    /* se não conseguir pegar o lat e lng do usário coloca do Brasil */
    initialZoom = 4
    latitude = -14.2350044
    longitude = -51.9252815
  } else {
    initialZoom = 14
  }

  const initalCases = {
    cases: []
  }
  const [citiesCases, setTotalCases] = useState(initalCases)


  return (
    <>
      <Header title={t("header.area")} />
      <Styled.Container>
        {((latitude && longitude) || error) &&
          <Styled.ContainerMap>
            <MapArea
              error={error}
              userLat={latitude}
              userLng={longitude}
              initialZoom={initialZoom}
              citiesCases={citiesCases.cases} />
          </Styled.ContainerMap>
        }
      </Styled.Container>
    </>
  );
}

function BlastType({ data, icon }) {
  var { t } = useTranslation();
  var theme = useSelector(i => i.themes[i.theme]);
  var [open, setOpen] = React.useState(false);
  return <Menu
    visible={open}
    onDismiss={() => setOpen(false)}
    anchor={
      <TouchableRipple onPress={() => setOpen(true)}>
        <View key={icon} style={{ padding: 2, alignItems: "center" }}>
          <Image style={{ height: 36, width: 36 }} source={getIcon(icon)} />
          <Text allowFontScaling={false} style={{ ...font(), color: theme.page_content.fg, fontSize: 16 }}>{data.total}</Text>
        </View>
      </TouchableRipple>
    }
    style={{ marginTop: 61 }}
  >
    <View style={{ paddingHorizontal: 4, alignItems: "center" }}>
      <Image style={{ height: 48, width: 48 }} source={getIcon(icon)} />
      <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold") }}>{data.total}x {getType(icon)?.name || icon}</Text>
      <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold") }}>{t('blast_checker:type_points',data.points)}</Text>
    </View>
  </Menu>;
}

AdminDashboard = () => {
  const { t } = useTranslation();
  const style = Style();

  return (
    <div className={style.root}>
      <Grid container direction="column" alignItems="center" spacing={2}>
        <Grid item className={style.center}>
          <Typography variant="h2">{t('adminDashboard.title')}</Typography>
        </Grid>
      </Grid>
    </div>
  );
}

function App() {
  const [t, i18n] = useTranslation();

  function handleChangeLang(lang) {
    i18n.changeLanguage(lang);
  }

   

  return (
    <Layout>
      <Routes />
    </Layout>
  );
}

function OverviewItem({ i, total }) {
  var small = total > 25;
  var theme = useSelector(i => i.themes[i.theme]);
  var [open, setOpen] = React.useState(false);
  var nav = useNavigation();
  var { t } = useTranslation();
  return <Menu
    visible={open}
    onDismiss={() => setOpen(false)}
    anchor={
      <TouchableRipple onPress={() => setOpen(true)}>
        <View key={i.icon} style={{ padding: 2, alignItems: "center" }}>
          <Image style={{ height: small ? 24 : 32, width: small ? 24 : 32 }} source={getIcon(i[0])} />
          <Text allowFontScaling={false} style={{ color: theme.page_content.fg, ...font(), fontSize: 12 }}>{i[1].total}</Text>
          {hostIcon(i[0]) && <Image style={{ height: small ? 16 : 24, width: small ? 16 : 24, position: "absolute", right: small ? -3 : -5, bottom: small ? 18 : 15 }} source={hostIcon(i[0])} />}
        </View>
      </TouchableRipple>
    }
    style={{ marginTop: 61 }}
    contentStyle={{ backgroundColor: theme.page_content.bg, borderWidth: theme.page_content.border ? 1 : 0, borderColor: theme.page_content.border }}
  >
    <View style={{ paddingHorizontal: 4, alignItems: "center" }}>
      <View>
        <Image style={{ height: 48, width: 48 }} source={getIcon(i[0])} />
        {hostIcon(i[0]) && <Image style={{ height: 36, width: 36, position: "absolute", right: -7.5, bottom: -7.5 }} source={hostIcon(i[0])} />}
      </View>
      <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, ...font("bold") }}>{i[1].total}x {(getType(i[0]) || { name: i[0].slice(49, -4) }).name}</Text>
      <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, ...font("bold") }}>{t('activity:point', { count: i[1].points })}</Text>
      <Button
        mode="contained"
        style={{ backgroundColor: theme.navigation.bg }}
        onPress={() => { setOpen(false); nav.push('DBType', { munzee: i[0].slice(49, -4) }) }}>
        {t('db:type_info')}
      </Button>
    </View>
  </Menu>
}

GameTypes = ({ formProps }) => {
    const { t } = useTranslation();

    let types = [
        { name: 'beginner', label: t('Beginner') },
        { name: 'casual', label: t('Casual') },
        { name: 'competitive', label: t('Competitive') }
    ];

    return (
        <Form.Row>
            <Col xs={12} className='font-weight-bold'>
                <Trans>Type</Trans>
            </Col>
            <Form.Group as={Col}>
                {types.map((type) => (
                    <Form.Check
                        name='gameType'
                        key={type.name}
                        type='radio'
                        id={type.name}
                        label={type.label}
                        inline
                        onChange={formProps.handleChange}
                        value={type.name}
                        checked={formProps.values.gameType === type.name}
                    ></Form.Check>
                ))}
            </Form.Group>
        </Form.Row>
    );
}

ErrorSnackbar = (props) => {
  const { error, ...other } = props;

  const { t } = useTranslation();

  const message = typeof error === 'string' ? error : t('errorsList.generic');

  return (
    <Portal>
      <ClosableSnackbar
        message={message}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        {...other}
      />
    </Portal>
  );
}

export default function UserActivityDash({ user_id, username, displayUsername }) {
  var { t } = useTranslation();
  var theme = useSelector(i => i.themes[i.theme])
  var nav = useNavigation();
  var moment = useMoment();
  var date = moment().tz('America/Chicago');
  var dateString = `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
  const { data, status } = useAPIRequest({
    endpoint: 'user/activity',
    data: { day: dateString, user_id },
    cuppazee: true
  }, true)
  return (
    <Card noPad>
      <TouchableRipple onPress={displayUsername ? () => nav.navigate('UserDetails', { username: username }) : () => nav.navigate('UserActivity', { username: username })}>
        <View style={{ ...(theme.page_content.border ? { borderBottomWidth: 1, borderBottomColor: theme.page_content.border } : {}), backgroundColor: (theme.clanCardHeader || theme.navigation).bg, padding: 8, borderTopLeftRadius: 8, borderTopRightRadius: 8, flexDirection: "row", alignItems: "center" }}>
          {displayUsername ?
            <Image style={{ height: 32, width: 32, borderRadius: 16 }} source={{ uri: `https://munzee.global.ssl.fastly.net/images/avatars/ua${Number(user_id).toString(36)}.png` }} /> :
            <MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="format-list-bulleted" size={24} color={(theme.clanCardHeader || theme.navigation).fg} />}
          <Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: (theme.clanCardHeader || theme.navigation).fg }}>{displayUsername ? username : t('user:activity')}</Text>
          <MaterialCommunityIcons name="chevron-right" size={24} color={(theme.clanCardHeader || theme.navigation).fg} />
        </View>
      </TouchableRipple>
      {!status ?
        <View style={{ paddingBottom: 4 }}><ActivityOverview username={username} user_id={user_id} /></View> :
        (status === "loading" ? <View style={{ flex: 1, justifyContent: "center", alignItems: "center", padding: 8 }}>
          <ActivityIndicator size="large" color={theme.page_content.fg} />
        </View> : <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
            <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), textAlign: "center", color: theme.page_content.fg }}>{t('error:' + status)}</Text>
          </View>)}
    </Card>
  );
}

Login = () => {
  const classes = useStyles();
  const { doOpenAuth } = useConnect();
  const { t } = useTranslation();
  const onClick = () => {
    doOpenAuth();
  };

  return (
    <div className={classes.Login}>
      <div>
        <object title="fullLogo" className={classes.fullLogo} data={FullLogo} type="image/svg+xml" />
        <Typography variant="h6">
          {t(
            'loginSection.text.title.yourHealthAppToMonitorFluLikeSymptomsConnectToTelehealthDoctorsInYourAreaAndDiscoverResourcesCloseToYou'
          )}{' '}
        </Typography>
        <Button variant="login" className={classes.Button} onClick={onClick}>
          {t('loginSection.text.button.getStarted')}
        </Button>
        <TranslationsMenu />
        <Typography>If on mobile, please disable popups for best use!</Typography>
      </div>
    </div>
  );
}

export default function EvoPlannerScreen({ navigation }) {
  var { t } = useTranslation();
  var moment = useMoment();
  var theme = useSelector(i => i.themes[i.theme])
  var [date, setDate] = React.useState(moment());
  var [option, setOption] = React.useState(options[0].id);
  return (
    <ScrollView
      contentContainerStyle={{ width: 400, maxWidth: "100%", alignItems: "stretch", flexDirection: "column", alignSelf: "center", padding: 4 }}
      style={{ flex: 1, backgroundColor: theme.page.bg }}>
      <View style={{ padding: 4 }}>
        <DatePicker value={date} onChange={setDate} />
      </View>

      <View style={{ padding: 4 }}>
        <Dropdown dense={true} mode="outlined" selectedValue={option} onValueChange={setOption}>
          {options.map(i=><DropdownItem label={t(`evo_planner:types.${i.id}`)} value={i.id} />)}
        </Dropdown>
      </View>
      {options.find(i => i.id === option).stages.map((i, index) => <View style={{ padding: 4 }}>
        <Card noPad>
          <View style={{ flexDirection: "row", alignItems: "center" }}>
            <View style={{ padding: 8, width: 60, alignItems: "center" }}>
              <Image source={getIcon(i.icon)} style={{ width: 48, height: 48 }} />
            </View>
            <View style={{ padding: 8, paddingLeft: 0, flex: 1, justifyContent: "center" }}>
              <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>{moment(date).add(i.days, "days").format('L')}</Text>
              <Text allowFontScaling={false} style={{ fontSize: 14, ...font(400), color: theme.page_content.fg, opacity: 1 }}>{t('evo_planner:days',{count:i.days})}</Text>
              <Text allowFontScaling={false} style={{ fontSize: 14, ...font(400), color: theme.page_content.fg, opacity: 1 }}>{t('evo_planner:stage',{n:index+1})}</Text>
            </View>
          </View>
        </Card>
      </View>)}
    </ScrollView>
  );
}

GameConfigurationModal = ({ optionSettings, onClose, onOptionSettingToggle }) => {
    const { t } = useTranslation();

    return (
        <>
            <Modal show={true} onHide={onClose}>
                <Modal.Header closeButton>
                    <Modal.Title>{t('Game Configuration')}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <GameConfiguration
                        optionSettings={optionSettings}
                        onOptionSettingToggle={onOptionSettingToggle}
                    />
                </Modal.Body>
            </Modal>
        </>
    );
}

InterestCard = (props) => {
  const { interest, userInterested, handleClick, loading } = props;

  const { t } = useTranslation();
  const style = Style();

  return (
    <Card>
      <CardActionArea
        component={Link}
        to={`/events?interest=${interest._id}`}
        color="inherit"
        underline="none"
      >
        <CardHeader
          avatar={
            <Avatar
              src={interest.avatar}
              alt={t(`interestsList.${interest.name}`)}
            />
          }
          title={t(`interestsList.${interest.name}`)}
        />
      </CardActionArea>
      <CardActions className={style.interestCardActions}>
        <Button
          variant="text"
          color={userInterested ? 'secondary' : 'primary'}
          onClick={() => handleClick(interest, userInterested)}
          disabled={loading}
        >
          {userInterested ? t('interestsCard.remove') : t('interestsCard.add')}
        </Button>
      </CardActions>
    </Card>
  );
}

function HealthLogButton() {
  const { t } = useTranslation();
  const classes = useStyles();
  return (
    <div>
      <Link className={classes.root} to="/symptomsurvey">
        <Button className={classes.button} variant="contained">
          {t('logSection.text.takeSurvey.takeASurvey')}
        </Button>
      </Link>
      <Grid container direction="column" alignContent="center">
        <AppCalendar />
      </Grid>
      <LogHealthSlider />
    </div>
  );
}

NotLoggedInLayout = props => {
  const { component: Component, webId, ...rest } = props;
  const { t } = useTranslation();
  const ComponentWrapper = styled(Component)`
    padding-bottom: 60px;
    height: 100%;
    padding-top: 60px;
  `;
  return !webId ? (
    <Route
      {...rest}
      component={matchProps => (
        <Container>
          <NavBar
            {...matchProps}
            toolbar={[
              {
                component: () => <LanguageDropdown {...{ t, ...props }} />,
                id: 'language'
              }
            ]}
          />
          <ComponentWrapper {...matchProps} />
        </Container>
      )}
    />
  ) : (
    <Redirect to="/welcome" />
  );
}

ProfileCardSize = (props) => {
    const { t } = useTranslation();
    const { cardSizes, selectedCardSize, onCardSizeSelected } = props;

    return (
        <Panel title={t('Card Image Size')}>
            <Row>
                <Col xs='12'>
                    {cardSizes.map((cardSize) => (
                        <CardSizeOption
                            key={cardSize.name}
                            label={cardSize.label}
                            name={cardSize.name}
                            onSelect={onCardSizeSelected}
                            selected={selectedCardSize === cardSize.name}
                        />
                    ))}
                </Col>
            </Row>
        </Panel>
    );
}

SearchFabAndDialog = (props) => {
  const { dialogOpen, handleDialogToggle, children } = props;

  const { t } = useTranslation();
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down('md'));
  const style = Style();

  return (
    <Fragment>
      <Fab
        className={style.fab}
        variant={matches ? 'round' : 'extended'}
        color="primary"
        onClick={() => handleDialogToggle()}
      >
        <SearchIcon />
        {!matches && (
          <Typography variant="body1">
            {t('searchFabAndDialog.search')}
          </Typography>
        )}
      </Fab>
      <Dialog
        maxWidth={false}
        open={dialogOpen}
        onClose={() => handleDialogToggle()}
      >
        {children}
      </Dialog>
    </Fragment>
  );
}

PageNotFound = () => {
  const { t } = useTranslation();
  return (
    <PageNotFoundWrapper>
      <PageNotFoundContent>
        <img src="img/404.svg" alt="404" />
        <h3>{t('notFound.title')}</h3>
        <p>{t('notFound.content')}</p>
        <div style={{ whiteSpace: 'nowrap' }}>
          <Link to="/" className="ids-link">
            {t('notFound.redirectButton')}
          </Link>
        </div>
      </PageNotFoundContent>
    </PageNotFoundWrapper>
  );
}

export default function TranslationsMenu() {
  const classes = useStyles();
  const { i18n, t } = useTranslation();

  const handleClick = event => {
    i18n.changeLanguage(event.target.value);
  };

  useEffect(() => {
    i18n.changeLanguage(window.navigator.language.slice(0, 2));
  }, [i18n]);

  return (
    <div>
      <FormControl className={classes.formControl}>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          keepMounted
          value={i18n.language}
          onChange={handleClick}
        >
          {languages.map(language => (
            <MenuItem key={language.abbreviation} value={language.abbreviation}>
              {language.language}
            </MenuItem>
          ))}
        </Select>
        <FormHelperText>{t('selectLan')}</FormHelperText>
      </FormControl>
    </div>
  );
}

SvgImage = (props) => {
  const { name, ...rest } = props;

  const { t } = useTranslation();
  const theme = useTheme();

  const Image = images[name];

  return (
    <Image
      alt={t(`svgImage.${name}`)}
      title={t(`svgImage.${name}`)}
      fill={theme.palette.primary.main}
      {...rest}
    />
  );
}

ProfileContainer = () => {
    const dispatch = useDispatch();
    const { t } = useTranslation();
    const user = useSelector((state) => state.account.user);
    const apiState = useSelector((state) => {
        const retState = state.api['SAVE_PROFILE'];

        if (retState?.success) {
            retState.message = t(
                'Profile saved successfully.  Please note settings changed here may only apply at the start of your next game.'
            );

            setTimeout(() => {
                dispatch(clearApiStatus('SAVE_PROFILE'));
            }, 5000);
        }

        return retState;
    });

    if (!user) {
        return <Alert variant='danger'>{t('You need to be logged in to view your profile')}</Alert>;
    }

    return (
        <Col lg={{ span: 10, offset: 1 }}>
            <ApiStatus state={apiState} onClose={() => dispatch(clearApiStatus('SAVE_PROFILE'))} />
            <Profile
                onSubmit={(profile) => {
                    return dispatch(saveProfile(user.username, profile));
                }}
                isLoading={apiState?.loading}
            />
        </Col>
    );
}

UserCard = (props) => {
  const { user } = props;

  const { t } = useTranslation();
  const style = Style();

  return (
    <Card>
      <CardActionArea component={Link} to={`/users/${user._id}`}>
        <CardHeader
          avatar={
            <Avatar
              src={user.avatar}
              alt={t('userCard.avatar', { name: user.name })}
            >
              {user.name.charAt(0).toUpperCase()}
            </Avatar>
          }
          title={user.name}
        />
        {user.interests.length > 0 && (
          <CardContent className={style.userCardContent}>
            <AvatarGroup max={7}>
              {user.interests.map((interest) => (
                <Avatar
                  key={interest._id}
                  src={interest.avatar}
                  alt={t(`interestsList.${interest.name}`)}
                  title={t(`interestsList.${interest.name}`)}
                />
              ))}
            </AvatarGroup>
          </CardContent>
        )}
      </CardActionArea>
    </Card>
  );
}

SideRoutesMenu = ({ routes, collapsed, setCollapsed }) => {
  const { t } = useTranslation();

  return <SidePanelHolder {...{ collapsed, minWidth: '18em', maxWidth: '22em' }}>
    <SideMenuHeader>
      {t("feed.sideFeed.recentRoutes")}
      {!collapsed && <CollapseButton onClick={() => setCollapsed(true)}>⇢</CollapseButton>}
    </SideMenuHeader>

    <SideElementContainer>
      {routes.map(route => <RouteCard key={route.id} {... { route }} />)}
    </SideElementContainer>
  </SidePanelHolder>
}

LoginContainer = () => {
    const dispatch = useDispatch();
    const { t } = useTranslation();
    const apiState = useSelector((state) => {
        const retState = state.api[Auth.LoginAccount];

        if (retState && retState.status === 401) {
            retState.message = t('Invalid username/password');
        } else if (retState && retState.success) {
            retState.message = t('Login successful, redirecting you to the home page');

            setTimeout(() => {
                dispatch(clearApiStatus(Auth.LoginAccount));
                dispatch(authenticateSocket());
                dispatch(navigate('/'));
            }, 500);
        }

        return retState;
    });

    return (
        <Col lg={{ span: 8, offset: 2 }}>
            <Panel title={t('Login')}>
                <ApiStatus
                    state={apiState}
                    onClose={() => dispatch(clearApiStatus(Auth.LoginAccount))}
                />
                <Login onSubmit={(values) => dispatch(loginAccount(values))} />
            </Panel>
        </Col>
    );
}

export default function CompetitionImage({ type, count, viewMode }) {
  var { t } = useTranslation();
  var theme = useSelector(i => i.themes[i.theme]);
  var [open, setOpen] = React.useState(false);
  if(viewMode==="list") {
    return <View style={{ flexDirection: "row", alignItems: "center", paddingVertical: 2, width: 400, maxWidth: "100%", opacity: (count ?? 1) ? 1 : 0.2 }}>
      <Image style={{ height: 32, width: 32, marginHorizontal: 4 }} source={getIcon(type.icon?.includes?.('NA.png') ? 'https://server.cuppazee.app/missing.png' : type.icon)} />
      <Text style={{flex : 1, marginHorizontal: 4, fontWeight: "bold"}}>{count !== undefined ? `${count}x ` : ""}{type.name || t('inventory:unknown_name')}</Text>
      <Text style={{marginHorizontal: 4}}>{(count ?? 1) * (type.health ? type.health : -type.damage)} HP</Text>
    </View>
  }
  return <Menu
    visible={open}
    onDismiss={() => setOpen(false)}
    anchor={
      <TouchableRipple onPress={() => setOpen(true)}>
        <View key={type.icon} style={{ padding: 2, alignItems: "center", opacity: (count ?? 1) ? 1 : 0.2 }}>
          <Image style={{ height: 32, width: 32 }} source={getIcon(type.icon?.includes?.('NA.png') ? 'https://server.cuppazee.app/missing.png' : type.icon)} />
          <Text allowFontScaling={false} style={{ ...font(), color: theme.page_content.fg, fontSize: 16 }}>{(count ?? (type.health ? type.health : -type.damage)) || "-"}</Text>
        </View>
      </TouchableRipple>
    }
    contentStyle={{backgroundColor:theme.page_content.bg}}
  >
    <View style={{ paddingHorizontal: 4, alignItems: "center" }}>
      <Image style={{ height: 48, width: 48 }} source={getIcon(type.icon?.includes?.('NA.png') ? 'https://server.cuppazee.app/missing.png' : type.icon)} />
      <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }}>{count !== undefined ? `${count}x ` : ""}{type.name || t('inventory:unknown_name')}</Text>
      <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }}>{(count ?? 1) * (type.health ? type.health : -type.damage)} HP</Text>
    </View>
  </Menu>;
}