Fix code formatting issues from markdown conversion

Author: gragland

.prettierrc

@@ -1,4 +1 @@
-{
-  "trailingComma": "none",
-  "arrowParens": "avoid"
-}
+{}

src/pages/useAnimation.md

@@ -9,158 +9,116 @@ sandbox: https://codesandbox.io/s/qxnmn1n45q
 This hook allows you to smoothly animate any value using an easing function (linear, elastic, etc). In the example we call the useAnimation hook three times to animated three balls on to the screen at different intervals. Additionally we show how easy it is to compose hooks. Our useAnimation hook doesn't actual make use of useState or useEffect itself, but instead serves as a wrapper around the useAnimationTimer hook. Having the timer logic abstracted out into its own hook gives us better code readability and the ability to use timer logic in other contexts. Be sure to check out the [CodeSandbox Demo](https://codesandbox.io/s/qxnmn1n45q) for this one.
 
 ```jsx
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
 // Usage
-function App()
-  {
+function App() {
   // Call hook multiple times to get animated values with different start delays
+  const animation1 = useAnimation("elastic", 600, 0);
+  const animation2 = useAnimation("elastic", 600, 150);
+  const animation3 = useAnimation("elastic", 600, 300);
 
-  const animation1 = useAnimation('elastic', 600, 0);
-  const animation2 = useAnimation('elastic',
-  600, 150);
-  const animation3 = useAnimation('elastic', 600, 300);
-
-  return
-  (
-    <div style={{ display: 'flex', justifyContent: 'center' }}>
+  return (
+    <div style={{ display: "flex", justifyContent: "center" }}>
       <Ball
-
         innerStyle={{
-          marginTop: animation1 * 200 - 100
+          marginTop: animation1 * 200 - 100,
         }}
-
       />
 
       <Ball
         innerStyle={{
-          marginTop: animation2
-  * 200 - 100
+          marginTop: animation2 * 200 - 100,
         }}
       />
 
       <Ball
         innerStyle={{
-
-          marginTop: animation3 * 200 - 100
+          marginTop: animation3 * 200 - 100,
         }}
       />
     </div>
-
   );
 }
 
 const Ball = ({ innerStyle }) => (
   <div
     style={{
-
       width: 100,
       height: 100,
-      marginRight: '40px',
-      borderRadius:
-  '50px',
-      backgroundColor: '#4dd5fa',
-      ...innerStyle
+      marginRight: "40px",
+      borderRadius: "50px",
+      backgroundColor: "#4dd5fa",
+      ...innerStyle,
     }}
-
   />
 );
 
 // Hook
-function useAnimation(
-  easingName = 'linear',
-
-  duration = 500,
-  delay = 0
-) {
-  // The useAnimationTimer hook calls
-  useState every animation frame ...
-  // ... giving us elapsed time and causing
-  a rerender as frequently ...
+function useAnimation(easingName = "linear", duration = 500, delay = 0) {
+  // The useAnimationTimer hook calls useState every animation frame ...
+  // ... giving us elapsed time and causing a rerender as frequently ...
   // ... as possible for a smooth animation.
-
   const elapsed = useAnimationTimer(duration, delay);
-  // Amount of specified
-  duration elapsed on a scale from 0 - 1
+  // Amount of specified duration elapsed on a scale from 0 - 1
   const n = Math.min(1, elapsed / duration);
-
   // Return altered value based on our specified easing function
   return easing[easingName](n);
 }
 
-//
-  Some easing functions copied from:
+// Some easing functions copied from:
 // https://github.com/streamich/ts-easing/blob/master/src/index.ts
-//
-  Hardcode here or pull in a dependency
+// Hardcode here or pull in a dependency
 const easing = {
-  linear: n => n,
-
-  elastic: n =>
-    n * (33 * n * n * n * n - 106 * n * n * n + 126 * n * n -
-  67 * n + 15),
-  inExpo: n => Math.pow(2, 10 * (n - 1))
+  linear: (n) => n,
+  elastic: (n) =>
+    n * (33 * n * n * n * n - 106 * n * n * n + 126 * n * n - 67 * n + 15),
+  inExpo: (n) => Math.pow(2, 10 * (n - 1)),
 };
 
-function
-  useAnimationTimer(duration = 1000, delay = 0) {
-  const [elapsed, setTime] =
-  useState(0);
+function useAnimationTimer(duration = 1000, delay = 0) {
+  const [elapsed, setTime] = useState(0);
 
   useEffect(
     () => {
-      let animationFrame, timerStop,
-  start;
+      let animationFrame, timerStop, start;
 
       // Function to be executed on each animation frame
-      function
-  onFrame() {
+      function onFrame() {
         setTime(Date.now() - start);
         loop();
       }
 
-
       // Call onFrame() on next animation frame
       function loop() {
-        animationFrame
-  = requestAnimationFrame(onFrame);
+        animationFrame = requestAnimationFrame(onFrame);
       }
 
       function onStart() {
-
         // Set a timeout to stop things when duration time elapses
-        timerStop
-  = setTimeout(() => {
+        timerStop = setTimeout(() => {
           cancelAnimationFrame(animationFrame);
-          setTime(Date.now()
-  - start);
+          setTime(Date.now() - start);
         }, duration);
 
         // Start the loop
-        start
-  = Date.now();
+        start = Date.now();
         loop();
       }
 
-      // Start after specified
-  delay (defaults to 0)
+      // Start after specified delay (defaults to 0)
       const timerDelay = setTimeout(onStart, delay);
 
-
       // Clean things up
       return () => {
         clearTimeout(timerStop);
-
         clearTimeout(timerDelay);
         cancelAnimationFrame(animationFrame);
-
       };
     },
-    [duration, delay] // Only re-run effect if duration or
-  delay changes
+    [duration, delay] // Only re-run effect if duration or delay changes
   );
 
   return elapsed;
 }
-
 ```

src/pages/useAsync.md

@@ -23,19 +23,19 @@ It's generally a good practice to indicate to users the status of any async requ
 Rather than litter your components with a bunch of `useState` calls to keep track of the state of an async function, you can use our custom hook which takes an async function as an input and returns the `value`, `error`, and `status` values we need to properly update our UI. Possible values for `status` prop are: "idle", "pending", "success", "error". As you'll see in the code below, our hook allows both immediate execution and delayed execution using the returned `execute` function.
 
 ```jsx
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from "react";
 
 // Usage
 function App() {
   const { execute, status, value, error } = useAsync(myFunction, false);
 
   return (
     <div>
-      {status === 'idle' && <div>Start your journey by clicking a button</div>}
-      {status === 'success' && <div>{value}</div>}
-      {status === 'error' && <div>{error}</div>}
-      <button onClick={execute} disabled={status === 'pending'}>
-        {status !== 'pending' ? 'Click me' : 'Loading...'}
+      {status === "idle" && <div>Start your journey by clicking a button</div>}
+      {status === "success" && <div>{value}</div>}
+      {status === "error" && <div>{error}</div>}
+      <button onClick={execute} disabled={status === "pending"}>
+        {status !== "pending" ? "Click me" : "Loading..."}
       </button>
     </div>
   );
@@ -48,15 +48,15 @@ const myFunction = () => {
     setTimeout(() => {
       const rnd = Math.random() * 10;
       rnd <= 5
-        ? resolve('Submitted successfully uD83DuDE4C')
-        : reject('Oh no there was an error uD83DuDE1E');
+        ? resolve("Submitted successfully 🙌")
+        : reject("Oh no there was an error 😞");
     }, 2000);
   });
 };
 
 // Hook
 const useAsync = (asyncFunction, immediate = true) => {
-  const [status, setStatus] = useState('idle');
+  const [status, setStatus] = useState("idle");
   const [value, setValue] = useState(null);
   const [error, setError] = useState(null);
 
@@ -65,18 +65,18 @@ const useAsync = (asyncFunction, immediate = true) => {
   // useCallback ensures the below useEffect is not called
   // on every render, but only if asyncFunction changes.
   const execute = useCallback(() => {
-    setStatus('pending');
+    setStatus("pending");
     setValue(null);
     setError(null);
 
     return asyncFunction()
-      .then(response => {
+      .then((response) => {
         setValue(response);
-        setStatus('success');
+        setStatus("success");
       })
-      .catch(error => {
+      .catch((error) => {
         setError(error);
-        setStatus('error');
+        setStatus("error");
       });
   }, [asyncFunction]);
 
@@ -94,19 +94,19 @@ const useAsync = (asyncFunction, immediate = true) => {
 ```
 
 ```typescript
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from "react";
 
 // Usage
 function App() {
   const { execute, status, value, error } = useAsync<string>(myFunction, false);
 
   return (
     <div>
-      {status === 'idle' && <div>Start your journey by clicking a button</div>}
-      {status === 'success' && <div>{value}</div>}
-      {status === 'error' && <div>{error}</div>}
-      <button onClick={execute} disabled={status === 'pending'}>
-        {status !== 'pending' ? 'Click me' : 'Loading...'}
+      {status === "idle" && <div>Start your journey by clicking a button</div>}
+      {status === "success" && <div>{value}</div>}
+      {status === "error" && <div>{error}</div>}
+      <button onClick={execute} disabled={status === "pending"}>
+        {status !== "pending" ? "Click me" : "Loading..."}
       </button>
     </div>
   );
@@ -119,8 +119,8 @@ const myFunction = (): Promise<string> => {
     setTimeout(() => {
       const rnd = Math.random() * 10;
       rnd <= 5
-        ? resolve('Submitted successfully 🙌')
-        : reject('Oh no there was an error 😞');
+        ? resolve("Submitted successfully 🙌")
+        : reject("Oh no there was an error 😞");
     }, 2000);
   });
 };
@@ -131,8 +131,8 @@ const useAsync = <T, E = string>(
   immediate = true
 ) => {
   const [status, setStatus] = useState<
-    'idle' | 'pending' | 'success' | 'error'
-  >('idle');
+    "idle" | "pending" | "success" | "error"
+  >("idle");
   const [value, setValue] = useState<T | null>(null);
   const [error, setError] = useState<E | null>(null);
 
@@ -141,18 +141,18 @@ const useAsync = <T, E = string>(
   // useCallback ensures the below useEffect is not called
   // on every render, but only if asyncFunction changes.
   const execute = useCallback(() => {
-    setStatus('pending');
+    setStatus("pending");
     setValue(null);
     setError(null);
 
     return asyncFunction()
       .then((response: any) => {
         setValue(response);
-        setStatus('success');
+        setStatus("success");
       })
       .catch((error: any) => {
         setError(error);
-        setStatus('error');
+        setStatus("error");
       });
   }, [asyncFunction]);
 

src/pages/useAuth.md

@@ -64,7 +64,7 @@ firebase.initializeApp({
   apiKey: "",
   authDomain: "",
   projectId: "",
-  appID: ""
+  appID: "",
 });
 
 const authContext = createContext();
@@ -92,7 +92,7 @@ function useProvideAuth() {
     return firebase
       .auth()
       .signInWithEmailAndPassword(email, password)
-      .then(response => {
+      .then((response) => {
         setUser(response.user);
         return response.user;
       });
@@ -102,7 +102,7 @@ function useProvideAuth() {
     return firebase
       .auth()
       .createUserWithEmailAndPassword(email, password)
-      .then(response => {
+      .then((response) => {
         setUser(response.user);
         return response.user;
       });
@@ -117,7 +117,7 @@ function useProvideAuth() {
       });
   };
 
-  const sendPasswordResetEmail = email => {
+  const sendPasswordResetEmail = (email) => {
     return firebase
       .auth()
       .sendPasswordResetEmail(email)
@@ -140,7 +140,7 @@ function useProvideAuth() {
   // ... component that utilizes this hook to re-render with the ...
   // ... latest auth object.
   useEffect(() => {
-    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
+    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
       if (user) {
         setUser(user);
       } else {
@@ -159,7 +159,7 @@ function useProvideAuth() {
     signup,
     signout,
     sendPasswordResetEmail,
-    confirmPasswordReset
+    confirmPasswordReset,
   };
 }
 ```