recoil#useRecoilValue TypeScript Examples

export default function AuthImages({response, auth}: { response: string[], auth: AuthCP }) {
    const setAuth = useSetRecoilState(Authenticated);
    const process = useRecoilValue(AuthContextProcessAtom);
    const dispatch = useSetRecoilState(AuthContextHandler);

    const {signAsGuest} = useUser();
    const reset = useReset();

    const handleClick = () => {
        reset();
        setAuth(auth.authentication);
    }

    const handleGuest = async () => {
        dispatch({fade: true});
        dispatch({error: await signAsGuest()});
    }

    return (
        <>
            <Background response={response} auth={true}/>
            {process !== 'pick' ?
                <div id={styles["signIn-button"]} className={styles['signIn-button']} onClick={handleClick}>
                    select a provider
                </div> : null }

            <Information response={auth}/>
            <div id={styles.guest} className={styles['signIn-button']} onClick={handleGuest}>continue as guest</div>
        </>
    );
}

NetworkWidget = () => {
  const forceData: Types.DataObject = useRecoilValue(getPowerChartData) as Types.DataObject
  return (
    <>
      {forceData ? (
        <>
          <div className="wrapperDiv">
            <Simple3DForceGraph data={forceData} />
          </div>
        </>
      ) : (
        <>Loading</>
      )}
    </>
  )
}

Content: React.FC = () => {
    const filteredCars = useRecoilValue(CarState.filteredCars)

    return (
        <>
            <Grid container spacing={1}>
                {filteredCars.map((obj, index) => (
                    <Grid item xs={12} sm={4}>
                        <VehCard key={index} {...obj} />
                    </Grid>
                ))}
            </Grid>
        </>
    )
}

AppAlert = () => {
  const [alert, setAlert] = useState<ModManagerAlert>();
  const { alertSourceUrl } = useRecoilValue(settingsState);
  const styles = useStyles();

  useEffect(() => {
    const updateAlert = async () =>
      setAlert(await getModManagerAlert(alertSourceUrl));
    updateAlert();
  }, [alertSourceUrl]);

  if (!alert || !alert.enabled) {
    return null;
  }

  return (
    <Box className={styles.appAlert}>
      <Typography variant="body2">{alert.message}</Typography>
    </Box>
  );
}

export default function AccountClearingListEntry({ group, account, accountID }) {
    const balances = useRecoilValue(accountBalances(group.id));

    return (
        <ListItemLink to={`/groups/${group.id}/accounts/${account.id}`}>
            <ListItemAvatar sx={{ minWidth: { xs: "40px", md: "56px" } }}>
                <Tooltip title="Clearing Account">
                    <ClearingAccountIcon color="primary" />
                </Tooltip>
            </ListItemAvatar>
            <ListItemText
                primary={
                    <Typography variant="body1" component="span">
                        {account.name}
                    </Typography>
                }
                secondary={account.description}
            />
            <ListItemText>
                <Typography align="right" variant="body2">
                    <Typography
                        component="span"
                        sx={{
                            color: (theme) => balanceColor(balances[account.id].clearingResolution[accountID], theme),
                        }}
                    >
                        {balances[account.id].clearingResolution[accountID].toFixed(2)} {group.currency_symbol}
                    </Typography>
                    <br />
                    <Typography component="span" sx={{ typography: "body2", color: "text.secondary" }}>
                        last changed: {DateTime.fromISO(account.last_changed).toLocaleString(DateTime.DATETIME_FULL)}
                    </Typography>
                </Typography>
            </ListItemText>
        </ListItemLink>
    );
}

BoardTile: React.FC<BoardTileProps> = ({ tile }) => {
  const theme = useRecoilValue(ThemeState)
  const colorClass = getColorId(tile.value)
  const newClass = tile.value !== 0 && tile.new ? 'new' : ''
  const combinedClass = tile.combined ? 'combined' : ''

  return (
    <>
      <div
        key={`${tile.id}`}
        id={`${colorClass ? `${colorClass}-${theme}` : 'board-tile'}`}
        className={`board-tile board-tile-${theme} ${newClass} ${combinedClass} ${tile.attr} `}
      >
        <div className={`board-value `}>
          {tile.value !== 0 ? tile.value : ''}
        </div>
      </div>
    </>
  )
}

function FPS() {
  const [, setLastT] = useState(0)
  const [fps, setFps] = useState(0)
  const data = useRecoilValue(dataState)
  useEffect(() => {
    setLastT((lastT) => {
      setFps((fps) => {
        const newFps = 1000 / (performance.now() - lastT)
        return fps * 0.9 + newFps * 0.1
      })
      return performance.now()
    })
  }, [data])
  return <Tag>FPS: {Math.round(fps)}</Tag>
}

KeyContent: React.FC = () => {
  const currentKey = useRecoilValue(currentKeyState)
  const [keyContent, setKeyContent] = useState<IKeyContent | null>(null)
  const { t } = useTranslation('keyContent')

  useEffect(() => {
    if (currentKey) {
      loadKeyContent(currentKey).then(content => {
        if (content) {
          setKeyContent(content)
        }
      })
    }
  }, [currentKey])

  return (
    <Container>
      {!currentKey ? (
        <EmptyContent message={t('empty')} />
      ) : (
        <div>{keyContent?.content}</div>
      )}
    </Container>
  )
}

export function AminoacidMutationBadge({ mutation }: AminoacidMutationBadgeProps) {
  const theme = useTheme()

  const geneMap = useRecoilValue(geneMapAtom)

  const { gene: geneName, refAA, codon } = mutation
  const queryAA = get(mutation, 'queryAA', AMINOACID_GAP) as Aminoacid

  const gene = geneMap.find((gene) => gene.geneName === geneName)
  const geneBg = gene?.color ?? '#999'
  const refBg = getAminoacidColor(refAA)
  const refFg = getTextColor(theme, refBg)
  const queryBg = getAminoacidColor(queryAA)
  const queryFg = getTextColor(theme, queryBg)
  const codonOneBased = codon + 1

  return (
    <MutationBadgeBox>
      <MutationWrapper>
        <GeneText $background={geneBg}>
          {geneName}
          <span>{':'}</span>
        </GeneText>
        <ColoredText $background={refBg} $color={refFg}>
          {refAA}
        </ColoredText>
        <PositionText>{codonOneBased}</PositionText>
        <ColoredText $background={queryBg} $color={queryFg}>
          {queryAA}
        </ColoredText>
      </MutationWrapper>
    </MutationBadgeBox>
  )
}

export default function ControlsHolder() {
    const state = useRecoilValue(framesPlayerStateSelector);
    const {playPause, seekVideo} = usePlayback();

    const currentHandler = (bool: boolean) => {
        if (bool)
            seekVideo(+10, 'add');
        else
            seekVideo(-10, 'add');
    }

    const handlePlayPause = async () => {
        await playPause();
    }

    return (
        <>
            <Toppers />
            <Progress />
            <div className={styles.c}>
                <LeftControls />
                <div className={styles.center} onClick={e => e.stopPropagation()}>
                    <button onClick={() => currentHandler(false)} className={styles.f}>
                        <svg viewBox="0 0 24 24">
                            <path
                                d="M12.5,3C17.15,3 21.08,6.03 22.47,10.22L20.1,11C19.05,7.81 16.04,5.5 12.5,5.5C10.54,5.5 8.77,6.22 7.38,7.38L10,10H3V3L5.6,5.6C7.45,4 9.85,3 12.5,3M10,12V22H8V14H6V12H10M18,14V20C18,21.11 17.11,22 16,22H14A2,2 0 0,1 12,20V14A2,2 0 0,1 14,12H16C17.11,12 18,12.9 18,14M14,14V20H16V14H14Z"/>
                        </svg>
                    </button>
                    <button className={styles.vpb} onClick={handlePlayPause}>
                        <svg
                            style={state !== 'PAUSED' ? {display: "none"} : {display: "block"}}
                            viewBox="0 0 24 24">
                            <circle cx="12" cy="12" r="10"/>
                            <polygon points="10 8 16 12 10 16 10 8"/>
                        </svg>
                        <svg
                            style={state !== 'PAUSED' ? {display: "block"} : {display: "none"}}
                            viewBox="0 0 24 24">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="10" y1="15" x2="10" y2="9"/>
                            <line x1="14" y1="15" x2="14" y2="9"/>
                        </svg>
                    </button>
                    <button onClick={() => currentHandler(true)} className={styles.f}>
                        <svg viewBox="0 0 24 24">
                            <path
                                d="M10,12V22H8V14H6V12H10M18,14V20C18,21.11 17.11,22 16,22H14A2,2 0 0,1 12,20V14A2,2 0 0,1 14,12H16C17.11,12 18,12.9 18,14M14,14V20H16V14H14M11.5,3C14.15,3 16.55,4 18.4,5.6L21,3V10H14L16.62,7.38C15.23,6.22 13.46,5.5 11.5,5.5C7.96,5.5 4.95,7.81 3.9,11L1.53,10.22C2.92,6.03 6.85,3 11.5,3Z"/>
                        </svg>
                    </button>
                </div>
                <RightControls />
            </div>
            <UpNextMini/>
            <Subtitles/>
            <ShareFrame/>
            <DownloadHandler/>
        </>
    )
}