feat: advanced patterns

Author: Mansur Isakov

src/08-advanced-patterns/63-lazy-load-component.problem.tsx

@@ -1,8 +1,10 @@
-import { lazy, Suspense, useMemo } from "react";
+import { ComponentProps, lazy, Suspense, useMemo } from "react";
 
-type Props = {
-  loader: unknown;
-};
+type Props<T extends React.ComponentType<any>> = {
+  loader: () => Promise<{
+    default: T;
+  }>;
+} & ComponentProps<T>;
 
 /**
  * 1. This component is supposed to take a loader function that returns a
@@ -16,7 +18,10 @@ type Props = {
  * - You'll need to make this a generic component!
  * - React.ComponentProps will come in handy, as will React.ComponentType
  */
-function LazyLoad({ loader, ...props }: Props) {
+function LazyLoad<C extends React.ComponentType<any>>({
+  loader,
+  ...props
+}: Props<C>) {
   const LazyComponent = useMemo(() => lazy(loader), [loader]);
 
   return (

src/08-advanced-patterns/64-render-props.problem.tsx

@@ -17,7 +17,7 @@ interface ModalChildProps {
   closeModal: () => void;
 }
 
-const Modal = ({ children }: any) => {
+const Modal = ({ children }: { children: React.FC<ModalChildProps> }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -31,7 +31,7 @@ const Modal = ({ children }: any) => {
         <div>
           <h1>Modal</h1>
         </div>,
-        document.getElementById("modal-root")!,
+        document.getElementById("modal-root")!
       )}
     </>
   );

src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx

@@ -2,6 +2,8 @@ import { Equal, Expect } from "../helpers/type-utils";
 
 type InputProps = React.ComponentProps<"input">;
 
+type InputType = "text" | "number" | "password";
+
 /**
  * All these components take the same props!
  *
@@ -12,7 +14,7 @@ type InputProps = React.ComponentProps<"input">;
  *
  * Hint: Record and satisfies will come in handy.
  */
-const COMPONENTS = {
+const COMPONENTS: Record<InputType, React.FC<InputProps>> = {
   text: (props) => {
     return <input {...props} type="text" />;
   },
@@ -24,7 +26,7 @@ const COMPONENTS = {
   },
 };
 
-export const Input = (props: unknown) => {
+export const Input = (props: { type: InputType } & InputProps) => {
   const Component = COMPONENTS[props.type];
   return <Component {...props} />;
 };

src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx

@@ -6,9 +6,10 @@ import { Equal, Expect } from "../helpers/type-utils";
  * give fixedForwardRef a type signature that allows it to
  * work with the example below.
  */
-function fixedForwardRef(
-  render: (props: any, ref: any) => any,
-): (props: any) => any {
+
+function fixedForwardRef<T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode
+): (props: P & React.RefAttributes<T>) => React.ReactNode {
   return forwardRef(render) as any;
 }
 
@@ -19,7 +20,7 @@ type Props<T> = {
 
 export const Table = <T,>(
   props: Props<T>,
-  ref: ForwardedRef<HTMLTableElement>,
+  ref: ForwardedRef<HTMLTableElement>
 ) => {
   return <table ref={ref} />;
 };

src/08-advanced-patterns/67-hoc.problem.tsx

@@ -1,9 +1,9 @@
 import { Router, useRouter } from "fake-external-lib";
 
-export const withRouter = (Component: any) => {
-  const NewComponent = (props: any) => {
+export const withRouter = <T,>(Component: React.FC<T>) => {
+  const NewComponent = (props: Omit<T, "router">) => {
     const router = useRouter();
-    return <Component {...props} router={router} />;
+    return <Component {...(props as T)} router={router} />;
   };
 
   NewComponent.displayName = `withRouter(${Component.displayName})`;

src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx

@@ -1,13 +1,21 @@
 import { Router, useRouter } from "fake-external-lib";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const withRouter = <TProps,>(Component: React.ComponentType<TProps>) => {
+export const withRouter = <TProps,>(
+  Component: (props: TProps) => React.ReactNode
+): ((props: Omit<TProps, "router">) => React.ReactNode) => {
   const NewComponent = (props: Omit<TProps, "router">) => {
     const router = useRouter();
     return <Component {...(props as TProps)} router={router} />;
   };
 
-  NewComponent.displayName = `withRouter(${Component.displayName})`;
+  NewComponent.displayName = `withRouter(${
+    (
+      Component as {
+        displayName?: string;
+      }
+    ).displayName
+  })`;
 
   return NewComponent;
 };

src/08-advanced-patterns/69-as-prop.problem.tsx

@@ -24,8 +24,12 @@
 
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const Wrapper = (props: any) => {
-  const Comp = props.as;
+export const Wrapper = <TAs extends keyof JSX.IntrinsicElements>(
+  props: {
+    as: TAs;
+  } & React.ComponentProps<TAs>
+) => {
+  const Comp = props.as as string;
   return <Comp {...(props as any)}></Comp>;
 };
 

src/08-advanced-patterns/69-as-prop.solution.2.tsx

@@ -3,7 +3,7 @@ import { Equal, Expect } from "../helpers/type-utils";
 export const Wrapper = <TAs extends keyof JSX.IntrinsicElements>(
   props: {
     as: TAs;
-  } & React.ComponentProps<TAs>,
+  } & React.ComponentProps<TAs>
 ) => {
   const Comp = props.as as string;
 

src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ElementType } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 /**
@@ -17,10 +17,10 @@ import { Equal, Expect } from "../helpers/type-utils";
  *   - ComponentPropsWithRef
  *   - ComponentProps
  */
-export const Wrapper = <TAs extends keyof JSX.IntrinsicElements>(
+export const Wrapper = <TAs extends ElementType>(
   props: {
     as: TAs;
-  } & React.ComponentProps<TAs>,
+  } & React.ComponentProps<TAs>
 ) => {
   const Comp = props.as as string;
 

src/08-advanced-patterns/71-as-prop-with-default.problem.tsx

@@ -1,10 +1,10 @@
 import { ElementType } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const Link = <TAs extends ElementType>(
+export const Link = <TAs extends ElementType = "a">(
   props: {
-    as: TAs;
-  } & React.ComponentPropsWithoutRef<TAs>,
+    as?: TAs;
+  } & React.ComponentPropsWithoutRef<TAs>
 ) => {
   const { as: Comp = "a", ...rest } = props;
   return <Comp {...rest}></Comp>;
@@ -66,7 +66,7 @@ const Example2 = () => {
 
 const Custom = (
   props: { thisIsRequired: boolean },
-  ref: React.ForwardedRef<HTMLAnchorElement>,
+  ref: React.ForwardedRef<HTMLAnchorElement>
 ) => {
   return <a ref={ref} />;
 };