Last active
June 9, 2022 01:52
-
-
Save bobbysciacchitano/55b6adda4989ad48d793969fc2a6feed to your computer and use it in GitHub Desktop.
React boilerplates
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function useTitle(title?: string | string[]) { | |
| useEffect(() => { | |
| if (title) { | |
| document.title = `${ | |
| Array.isArray(title) ? title.join(" | ") : title | |
| } | Fitness`; | |
| } | |
| return () => { | |
| document.title = "Fitness"; | |
| }; | |
| }, [title]); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useEffect, useState } from "react"; | |
| import { useError } from "../../hooks"; | |
| import { fetchPrograms } from "../../store"; | |
| import { ErrorState, ProgramList } from "../../types"; | |
| export function usePrograms(): [ProgramList, boolean, ErrorState] { | |
| const [programs, setPrograms] = useState<ProgramList>([]); | |
| const [isReady, setIsReady] = useState(false); | |
| const [error, handleException] = useError(); | |
| useEffect(() => { | |
| async function setup() { | |
| try { | |
| const programs = await fetchPrograms(); | |
| setPrograms(programs); | |
| setIsReady(true); | |
| } catch (exception) { | |
| handleException(exception); | |
| } | |
| } | |
| setup(); | |
| }, [handleException]); | |
| return [programs, isReady, error]; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useCallback, useState } from "react"; | |
| import { ErrorState } from "../types"; | |
| type HandleException = (exception: unknown) => void; | |
| type ClearError = () => void; | |
| export function useError(): [ErrorState, HandleException, ClearError] { | |
| const [error, setError] = useState<ErrorState>(); | |
| const handleException = useCallback<HandleException>((exception) => { | |
| console.error(exception); | |
| if (typeof exception === "string") { | |
| setError({ message: exception }); | |
| return; | |
| } | |
| if (exception instanceof Error) { | |
| setError({ message: exception.message }); | |
| return; | |
| } | |
| setError({ message: "Could not handle your request at this time." }); | |
| throw exception; | |
| }, []); | |
| const clearError = useCallback<ClearError>(() => { | |
| setError(undefined); | |
| }, []); | |
| return [error, handleException, clearError]; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import { Loading, NewProgramButton } from "../../components"; | |
| import { useScreen } from "../../hooks"; | |
| import { ProgramRecords } from "./components"; | |
| import { usePrograms } from "./hooks"; | |
| function ProgramsScreen() { | |
| useScreen("Programs", { isRoot: true }); | |
| const [programs, isReady, error] = usePrograms(); | |
| if (!isReady) { | |
| return <Loading error={error} />; | |
| } | |
| return ( | |
| <> | |
| <ProgramRecords programs={programs} /> | |
| <NewProgramButton /> | |
| </> | |
| ); | |
| } | |
| export default ProgramsScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useCallback, useState } from "react"; | |
| import { OnFormChange, OnSetState } from "../types"; | |
| export function useForm<T>(initialState?: T): [T, OnFormChange, OnSetState<T>] { | |
| const [form, setForm] = useState<T | {}>(initialState || {}); | |
| const onChange = useOnChange(setForm); | |
| return [form as T, onChange, setForm]; | |
| } | |
| export function useOnChange<T>(setForm: OnSetState<T>): OnFormChange { | |
| const onChange = useCallback<OnFormChange>( | |
| ({ target }) => { | |
| const { name, value, type, checked } = target as HTMLInputElement; | |
| setForm((current) => ({ | |
| ...current, | |
| [name]: type === "checkbox" ? checked : value, | |
| })); | |
| }, | |
| [setForm] | |
| ); | |
| return onChange; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment