recoil#useSetRecoilState TypeScript Examples

function Information({response}: { response: AuthCP }) {
    const setAuth = useSetRecoilState(Authenticated);

    useEffect(() => {
        setAuth(response.authentication);
    }, [response])

    return (
        <div style={{
            position: "fixed",
            bottom: "4vh",
            color: "white",
            width: "100%",
            textAlign: "center",
            fontFamily: "'Roboto', sans-serif",
        }}>
            <span>{response.cpRight}</span>
            <div style={{lineHeight: "10px"}}>
                <span style={{fontSize: "x-small"}}>{response.aReserved}</span>
                <br/>
                <span style={{fontSize: "x-small"}}>
                    Videos only stream till the 5 minute mark for guest
                </span>
            </div>
        </div>
    )
}

LocalModsSubscription: React.FunctionComponent = () => {
  const setLocalMods = useSetRecoilState(localModList);
  const {
    settings: { owmlPath, alphaPath, owamlPath },
  } = useSettings();

  useModsDirectoryWatcher(
    useCallback(() => {
      setLocalMods(getLocalMods(owmlPath, alphaPath, owamlPath));
    }, [owmlPath, alphaPath, owamlPath, setLocalMods])
  );

  return null;
}

export default function TransactionCreditorShare({ group, transaction, isEditing, ...props }) {
    const accounts = useRecoilValue(accountsSeenByUser(group.id));
    const shareAccountID =
        Object.keys(transaction.creditor_shares).length === 0 ? null : Object.keys(transaction.creditor_shares)[0];
    const setLocalTransactionDetails = useSetRecoilState(pendingTransactionDetailChanges(transaction.id));

    const getAccount = (accountID) => {
        return accounts.find((account) => account.id === accountID);
    };

    const onCreditorChange = (account) => {
        if (account === null) {
            return; // TODO: some error handling
        }
        if (shareAccountID !== account.id) {
            setLocalTransactionDetails((currState) => {
                return {
                    ...currState,
                    creditor_shares: {
                        [account.id]: 1.0,
                    },
                };
            });
        }
    };

    return (
        <AccountSelect
            group={group}
            value={shareAccountID === null ? null : getAccount(parseInt(shareAccountID))}
            onChange={onCreditorChange}
            noDisabledStyling={true}
            disabled={!isEditing}
            {...props}
        />
    );
}

function recoilStateWrapper(options?: RenderHookOptions) {
  const StateComponent: React.FC<MockRecoilState> = (
    props: MockRecoilState,
  ) => {
    const setState = useSetRecoilState(props.recoilState);
    useEffect(() => {
      setState(props.initialValue);
    }, []);

    return null;
  };

  const renderStateComponents = () => {
    return options?.states?.map(state => (
      <StateComponent key={state.recoilState.key} {...state} />
    ));
  };

  return (props: { children?: React.ReactNode }) => {
    const renderChildren = options?.wrapper ? (
      <options.wrapper {...props} />
    ) : (
      props.children
    );

    return (
      <RecoilRoot>
        {renderStateComponents()}
        {renderChildren}
      </RecoilRoot>
    );
  };
}

export function ButtonFilter() {
  const { t } = useTranslationSafe()

  const setIsResultsFilterPanelCollapsed = useSetRecoilState(isResultsFilterPanelCollapsedAtom)

  const toggleFilterPanel = useCallback(
    () => setIsResultsFilterPanelCollapsed((filterPanelCollapsed) => !filterPanelCollapsed),
    [setIsResultsFilterPanelCollapsed],
  )

  return (
    <PanelButton onClick={toggleFilterPanel} title={t('Filter: opens panel where you can apply table row filtering')}>
      <FaFilter size={15} />
    </PanelButton>
  )
}

TagCloud: React.FC<TagCloudProps> = ({ name, tags, isDark }) => {
  const setQuery = useSetRecoilState(searchQueryAtom);
  const handleTagClick = useCallback(
    (tag: string) => {
      setQuery(tag);
      document.getElementById("search-input")?.focus();
    },
    [setQuery]
  );

  return (
    <div className="tag-cloud">
      {tags.map((tag) => (
        <button
          key={`${name}-tag-${tag}`}
          className="tag-button"
          onClick={() => void handleTagClick(tag)}
        >
          <code className={`${isDark ? "dark" : ""}`}>{tag}</code>
          {tag === "*new*" && <span className="badge new">•</span>}
          {tag === "*updated*" && <span className="badge updated">•</span>}
        </button>
      ))}
    </div>
  );
}

Recommend : FC = () => {
  const [ questionIndex, setQuestionIndex ] = useRecoilState(questionIndexState)
  const [ questionTags, setQuestionTags ] = useRecoilState(questionTagsState)
  const setSelecetedPhones =  useSetRecoilState(selectedPhonesState)

  return <Box py={10} textAlign='center'>
    <Heading mb={3}>폰 추천받기</Heading>
    {
      questionIndex < Questions.length ? <Box px={{ base: 10, md: 32 }}>
        <Flex height='60vh' alignItems='center' justifyContent='center'>
          <Box>
            <Heading fontSize='2xl'>{Questions[questionIndex].question}</Heading>
            <Progress mt={4} mb={6} value={questionIndex} max={Questions.length} size='md' rounded='2xl' />
            <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={5}>
              {
                Questions[questionIndex].options.map((option, index) => <Card key={index} onClick={() => {
                  setQuestionTags({ ...questionTags, [Questions[questionIndex].id]: option.value })
                  setQuestionIndex(questionIndex + 1)
                  if(questionIndex < Questions.length) setSelecetedPhones(getRecommended(questionTags).map(x => x.data.id) as [ string, string, string ])
                }}>
                  <Text>{option.subLabel}</Text>
                  <Heading fontSize='xl'>{option.label}</Heading>
                </Card>
                )
              }
            </Grid>
          </Box>
        </Flex> 
      </Box> : <Box>
        <Heading fontSize='2xl'>아래 휴대폰을 추천드립니다!</Heading>
        <Button mt={4} onClick={() => setQuestionIndex(0)}>다시 고르기</Button>
        <Compare asComponent />
      </Box>
    }     
  </Box>
}

function AuthKey() {
    const {updateUser} = useUser();
    const dispatch = useSetRecoilState(AuthContextHandler);
    const {auth, setAuth, authError, valid} = useAuth();

    const submit = () => {
        if (auth !== '' && !authError && valid) {
            dispatch({fade: true});
            setTimeout(async () => {
                dispatch({
                    error: await updateUser(auth)
                });
            }, 500)
        }
    }

    useEventListener('keyup', event => {
        if (event.code === 'Enter')
            submit();
    })

    useEffect(() => {
        dispatch({fade: false});
    }, [])

    return (
        <>
            <div className={styles["log-input-holder"]}>
                <input
                    className={styles["log-input"]}
                    style={valid ? {borderColor: "#3cab66d0"} : authError ? {borderColor: "rgba(245, 78, 78, .9)"} : {}}
                    type="text" maxLength={24}
                    placeholder="enter an auth key" onChange={(e) =>
                    setAuth(e.currentTarget.value)}/>
            </div>
            <div className={styles["submit-width"]}>
                <button
                    className={styles["log-submit"]}
                    type="button"
                    style={{width: "100%"}}
                    onClick={submit}
                >
                    Submit
                </button>
            </div>
        </>
    )
}

Counter = () => {
  const setCount = useSetRecoilState(countState)
  const getCount: number = useRecoilValue(countState)
  return <ContactPage setCount={setCount} getCount={getCount} />
}

export default function TransactionBilledAt({ group, transaction }) {
    const [error, setError] = useState(null);
    const setLocalTransactionDetails = useSetRecoilState(pendingTransactionDetailChanges(transaction.id));

    const save = (billedAt) => {
        if (billedAt == null || billedAt.invalid) {
            setError("Invalid date format");
            return;
        }
        setError(null);
        if (transaction.is_wip && billedAt !== transaction.billed_at) {
            setLocalTransactionDetails((currState) => {
                return {
                    ...currState,
                    billed_at: billedAt,
                };
            });
        }
    };
    if (!transaction.is_wip) {
        return (
            <DisabledTextField
                label="Billed At"
                variant="standard"
                fullWidth
                value={transaction.billed_at}
                disabled={true}
            />
        );
    }

    return (
        <DatePicker
            label="Billed At"
            inputFormat="yyyy-MM-dd"
            value={transaction.billed_at}
            onChange={save}
            renderInput={(params) => (
                <TextField variant="standard" fullWidth {...params} helperText={error} error={error !== null} />
            )}
        />
    );
}

export default function Plot() {
  const nodeRef = useRef<SVGSVGElement>(null)
  const triggerPosRef = useRef<TriggerPosRef>(null)
  const triggerVoltageRef = useRef<TriggerVoltageRef>(null)
  const measureRef = useRef<MeasureRef>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const [width, height] = useSize(containerRef)
  const setPlotHeight = useSetRecoilState(plotHeightSelector)
  const setPlotWidth = useSetRecoilState(plotWidthSelector)
  useEffect(() => {
    setPlotHeight(height)
    setPlotWidth(width)
  }, [height, setPlotHeight, setPlotWidth, width])
  return (
    <div className="plotContainer" ref={containerRef}>
      <svg
        className="plot"
        ref={nodeRef}
        onMouseMove={(e) => {
          triggerPosRef.current?.onMouseMove(e)
          triggerVoltageRef.current?.onMouseMove(e)
          measureRef.current?.onMouseMove(e)
          e.preventDefault()
        }}
        onMouseLeave={(e) => {
          triggerPosRef.current?.onMouseUp(e)
          triggerVoltageRef.current?.onMouseUp(e)
          measureRef.current?.onMouseUp(e)
          e.preventDefault()
        }}
        onMouseUp={(e) => {
          triggerPosRef.current?.onMouseUp(e)
          triggerVoltageRef.current?.onMouseUp(e)
          measureRef.current?.onMouseUp(e)
          e.preventDefault()
        }}
        onMouseDown={(e) => {
          measureRef.current?.onMouseDown(e)
          e.preventDefault()
        }}
      >
        <XAxis />
        <YAxis />
        <Curves />
        <XYCurve />
        <Measure ref={measureRef} />
        <TriggerVoltageHandle ref={triggerVoltageRef} />
        <TriggerPosHandle ref={triggerPosRef} />
      </svg>
    </div>
  )
}

export function GeneMapTable() {
  const { t } = useTranslationSafe()

  const isInNucleotideView = useRecoilValue(isInNucleotideViewAtom)
  const switchToNucleotideView = useSetRecoilState(switchToNucleotideViewAtom)
  const geneMapNameWidthPx = useRecoilValue(geneMapNameColumnWidthPxAtom)
  const columnWidthsPx = useRecoilValue(resultsTableColumnWidthsPxAtom)

  const returnButton = useMemo(() => {
    if (!isInNucleotideView) {
      return (
        <GeneMapBackButton
          color="transparent"
          onClick={switchToNucleotideView}
          title={t('Return to full Genome annotation and nucleotide sequence view')}
        >
          <BsArrowReturnLeft size={20} />
        </GeneMapBackButton>
      )
    }
    return null
  }, [isInNucleotideView, switchToNucleotideView, t])

  return (
    <GeneMapTableContent>
      <GeneMapTableRow>
        <TableCellName basis={geneMapNameWidthPx} grow={0} shrink={0}>
          <div className="mx-auto">
            <span className="ml-auto mr-2">{t('Genome annotation')}</span>
            <ButtonHelpSimple identifier="btn-help-gene-map" tooltipPlacement="auto">
              <HelpTipsGeneMap />
            </ButtonHelpSimple>
          </div>

          {returnButton}
        </TableCellName>
        <TableCell basis={columnWidthsPx.sequenceView} grow={1} shrink={0}>
          <GeneMap />
        </TableCell>
      </GeneMapTableRow>

      <GeneMapAxisTableRow>
        <TableCellName basis={geneMapNameWidthPx} grow={0} shrink={0} />
        <TableCell basis={columnWidthsPx.sequenceView} grow={1} shrink={0}>
          <GeneMapAxis />
        </TableCell>
      </GeneMapAxisTableRow>
    </GeneMapTableContent>
  )
}

SurveyResult: React.FC<Props> = ({ loadSurveyResult, saveSurveyResult }: Props) => {
  const resetSurveyResultState = useResetRecoilState(surveyResultState)
  const handleError = useErrorHandler((error: Error) => {
    setState(old => ({ ...old, surveyResult: null, isLoading: false, error: error.message }))
  })
  const [state, setState] = useRecoilState(surveyResultState)
  const setOnAnswer = useSetRecoilState(onSurveyAnswerState)
  const onAnswer = (answer: string): void => {
    if (!state.isLoading) {
      setState(old => ({ ...old, isLoading: true }))
      saveSurveyResult.save({ answer })
        .then(surveyResult => setState(old => ({ ...old, isLoading: false, surveyResult })))
        .catch(handleError)
    }
  }
  const reload = (): void => setState(old => ({ ...old, error: '', reload: !old.reload }))

  useEffect(() => {
    resetSurveyResultState()
    setOnAnswer({ onAnswer })
  }, [])

  useEffect(() => {
    loadSurveyResult.load()
      .then(surveyResult => setState(old => ({ ...old, surveyResult })))
      .catch(handleError)
  }, [state.reload])

  return (
    <div className={Styles.surveyResultWrap}>
      <Header />
      <div data-testid="survey-result" className={Styles.contentWrap}>
        {state.surveyResult && <SurveyResultData surveyResult={state.surveyResult} /> }
        {state.isLoading && <Loading />}
        {state.error && <Error error={state.error} reload={reload} />}
      </div>
      <Footer />
    </div>
  )
}

function Create() {
    const submitWidth = useRef<HTMLButtonElement>(null);
    const {signUp} = useUser();
    const dispatch = useSetRecoilState(AuthContextHandler);
    const fade = useRecoilValue(AuthFade);
    const [email, setEmail] = useRecoilState(AuthContextEmailAtom);
    const [pass, setPass] = useRecoilState(AuthContextPasswordAtom);
    const [cPass, setCPass] = useState(false);
    const [confirmPass, setConfirmPass] = useState('');
    const {emailError, passError} = useRecoilValue(AuthErrors);
    const {auth, setAuth, authError, valid} = useAuth();

    const submit = async () => {
        if (email !== '' && pass !== '' && auth !== '' && !emailError && !passError && !authError)
            dispatch({
                error: await signUp(email, pass, auth)
            });
    }

    useEffect(() => {
        setTimeout(() => {
            if (fade) {
                dispatch({fade: false});
                if (submitWidth.current)
                    submitWidth.current.style.width = "40%";
            }
        }, 500)
    }, [])

    useEffect(() => {
        if (confirmPass !== pass && confirmPass !== '') {
            dispatch({error: 'Passwords do not match'});
            setCPass(true);
        } else {
            dispatch({error: null});
            setCPass(false);
        }
    }, [confirmPass])

    useEventListener('keyup', async event => {
        if (event.code === 'Enter')
            await submit();
    })

    return (
        <>
            <div className={styles["create-flex"]}>
                <div className={styles["create-holders"]}>
                    <label htmlFor="authKey">auth key</label>
                    <br/>
                    <input maxLength={24} type="text"
                           style={valid ? {borderColor: "#3cab66d0"} : authError ? {borderColor: "rgba(245, 78, 78, .9)"} : {}}
                           placeholder="enter your auth key" onChange={(e) => setAuth(e.currentTarget.value)}/>
                    <div className={styles.authSpacers}/>
                    <label htmlFor="create-pass">password</label>
                    <br/>
                    <input style={passError || cPass ? {borderColor: "rgba(245, 78, 78, .9)"} : {}}
                           type="password" placeholder="enter your password"
                           onChange={(e) => setPass(e.currentTarget.value)}/>
                </div>
                <div className={styles["create-holders"]}>
                    <label htmlFor="create-email">email address</label>
                    <br/>
                    <input style={emailError ? {borderColor: "rgba(245, 78, 78, .9)"} : {}} type="text"
                           placeholder="enter your email address" value={email}
                           onChange={(e) => setEmail(e.currentTarget.value)}/>
                    <div className={styles.authSpacers}/>
                    <label htmlFor="confirm-pass">confirm password</label>
                    <br/>
                    <input style={cPass ? {borderColor: "rgba(245, 78, 78, .9)"} : {}}
                           type="password" placeholder="confirm your password"
                           onChange={(e) => setConfirmPass(e.currentTarget.value)}/>
                </div>
            </div>
            <div className={styles["log-label-div"]}>
                <div className={styles["submit-width"]}>
                    <button
                        ref={submitWidth}
                        className={styles["log-submit"]}
                        type="button"
                        onClick={submit}
                    >
                        Submit
                    </button>
                </div>
            </div>
        </>
    )
}