feat: advanced hooks solutions

Author: Mansur Isakov

src/06-advanced-hooks/45-tuple-return-type.problem.ts

@@ -11,7 +11,9 @@ import { Equal, Expect } from "../helpers/type-utils";
  * 1. Find a way to fix the errors below.
  */
 
-export const useId = (defaultId: string) => {
+export const useId = (
+  defaultId: string
+): [string, React.Dispatch<React.SetStateAction<string>>] => {
   const [id, setId] = useState(defaultId);
 
   return [id, setId];
@@ -21,5 +23,5 @@ const [id, setId] = useId("1");
 
 type tests = [
   Expect<Equal<typeof id, string>>,
-  Expect<Equal<typeof setId, React.Dispatch<React.SetStateAction<string>>>>,
+  Expect<Equal<typeof setId, React.Dispatch<React.SetStateAction<string>>>>
 ];

src/06-advanced-hooks/46-required-context.problem.tsx

@@ -14,8 +14,8 @@ import { Equal, Expect } from "../helpers/type-utils";
  *
  * 1. See if you can fix it!
  */
-const createRequiredContext = () => {
-  const context = React.createContext(null);
+const createRequiredContext = <T,>() => {
+  const context = React.createContext<T | null>(null);
 
   const useContext = () => {
     const contextValue = React.useContext(context);
@@ -27,7 +27,7 @@ const createRequiredContext = () => {
     return contextValue;
   };
 
-  return [useContext, context.Provider];
+  return [useContext, context.Provider] as const;
 };
 
 const [useUser, UserProvider] = createRequiredContext<{

src/06-advanced-hooks/47-unions-in-usestate.problem.tsx

@@ -12,8 +12,10 @@ import { appendVideoToDomAndPlay, fetchVideo } from "fake-external-lib";
  *
  * 1. See if you can fix the errors below by making the type of state more specific.
  */
+type State = "loading" | "loaded" | "error";
+
 export const useLoadAsyncVideo = (src: string) => {
-  const [state, setState] = useState("loading");
+  const [state, setState] = useState<State>("loading");
 
   useEffect(() => {
     setState("loading");

src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx

@@ -1,8 +1,17 @@
 import { appendVideoToDomAndPlay, fetchVideo } from "fake-external-lib";
 import { useEffect, useState } from "react";
 
+type Status =
+  | {
+      status: "error";
+      error: Error;
+    }
+  | {
+      status: "loading" | "loaded";
+    };
+
 export const useLoadAsyncVideo = (src: string) => {
-  const [state, setState] = useState({
+  const [state, setState] = useState<Status>({
     status: "loading",
   });
 

src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 
-export type Result<T> = [
-  "loading" | "success" | "error",
-  T | Error | undefined,
-];
+export type Result<T> =
+  | ["loading", undefined]
+  | ["success", T]
+  | ["error", Error];
 
 /**
  * Let's look at one more example of discriminated unions. This time, we're
@@ -35,7 +35,7 @@ export const useData = <T,>(url: string): Result<T> => {
 
 const Component = () => {
   const [status, value] = useData<{ title: string }>(
-    "https://jsonplaceholder.typicode.com/todos/1",
+    "https://jsonplaceholder.typicode.com/todos/1"
   );
 
   if (status === "loading") {

src/06-advanced-hooks/50-use-state-overloads.problem.ts

@@ -19,6 +19,8 @@ useState;
  * HINT - you'll need to use the function keyword THREE times.
  */
 
+function maybeReturnsString(defaultString: string): string;
+function maybeReturnsString(): undefined | string;
 function maybeReturnsString(defaultString?: string) {
   // If you pass a string, it always returns a string
   if (defaultString) {
@@ -34,5 +36,5 @@ const example2 = maybeReturnsString();
 
 type tests = [
   Expect<Equal<typeof example1, string>>,
-  Expect<Equal<typeof example2, string | undefined>>,
+  Expect<Equal<typeof example2, string | undefined>>
 ];

src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts

@@ -7,7 +7,14 @@ import { Equal, Expect } from "../helpers/type-utils";
  *
  * If you pass a default value, it should NOT include undefined.
  */
-export function useStateAsObject<T>(initial: T) {
+type UseStateReturnValue<T> = {
+  value: T;
+  set: React.Dispatch<React.SetStateAction<T>>;
+};
+
+export function useStateAsObject<T>(): UseStateReturnValue<T | undefined>;
+export function useStateAsObject<T>(initial: T): UseStateReturnValue<T>;
+export function useStateAsObject<T>(initial?: T) {
   const [value, set] = useState(initial);
 
   return {
@@ -28,7 +35,7 @@ type ExampleTests = [
       typeof notUndefined.set,
       React.Dispatch<React.SetStateAction<{ name: string }>>
     >
-  >,
+  >
 ];
 
 /**
@@ -43,5 +50,5 @@ type NumTests = [
       typeof hasUndefined.set,
       React.Dispatch<React.SetStateAction<number | undefined>>
     >
-  >,
+  >
 ];

src/06-advanced-hooks/52-currying-hooks.problem.ts

@@ -15,7 +15,10 @@ const useCustomState = <TValue>(initial: TValue) => {
      * any type. We want to make sure that the type of the
      * thing returned is inferred properly.
      */
-    useComputed: (factory: (value: any) => any, deps?: DependencyList) => {
+    useComputed: <TResult>(
+      factory: (value: TValue) => TResult,
+      deps?: DependencyList
+    ) => {
       return useMemo(() => {
         return factory(value);
       }, [value, ...(deps || [])]);
@@ -32,7 +35,7 @@ const Component = () => {
    * useComputed?
    */
   const reversedAsString = arrayOfNums.useComputed((nums) =>
-    Array.from(nums).reverse().map(String),
+    Array.from(nums).reverse().map(String)
   );
 
   type test = Expect<Equal<typeof reversedAsString, string[]>>;