update Context and remove warnings

Author: alexlobera

src/components/App.jsx

@@ -52,7 +52,11 @@ class App extends React.Component {
         <div id="page-wrap">
           <Menu isOpen={isMenuOpen} toggleMenu={this.toggleMenu}>
             <p className="text-center">
-              <a target="_blank" href="https://reactgraphql.academy">
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://reactgraphql.academy"
+              >
                 <RGALogo />
               </a>
             </p>

src/components/Root.jsx

@@ -1,18 +1,17 @@
 import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import { createStore } from "redux";
 import Modal from "./patterns/Context/example/Modal";
-import { counter } from "./patterns/HigherOrderComponents/exercise_bonus/utils/redux-counter";
-import { Provider } from "./patterns/Context/xbonus/Provider";
+import { GraphQLProvider } from "./patterns/Context/exercise/GraphQLProvider";
+import { createClient } from "./patterns/Context/exercise/utils";
 
-// Don't do window.__store ever!! this is only to avoid using the Provider until the context exercise
-// where you'll implement the Provider
-window.__store = createStore(counter);
+const client = createClient({ url: "https://rickandmortyapi.com/graphql/" });
 
 const Root = ({ children }) => (
-  <Router>
-    <Modal>{children}</Modal>
-  </Router>
+  <GraphQLProvider client={client}>
+    <Router>
+      <Modal>{children}</Modal>
+    </Router>
+  </GraphQLProvider>
 );
 
 export default Root;

src/components/functional-programming/closure/exercise.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-vars */
+
 // Open the console on your browser and type [closure exercise] in the console filter.
 // You should see on the console the console.log() for this exercise.
 

src/components/functional-programming/composition/Page.jsx

@@ -3,36 +3,18 @@ import React from "react";
 import { transformText } from "./example";
 import FormExercise from "./exercise";
 
-const exampleText = "1 2 3 ReactJS Academy is a m a z i n g";
+const exampleText = "1 2 3 React GraphQL Academy is a m a z i n g";
 
 const Page = () => (
   <React.Fragment>
     <h2>Function composition</h2>
     <h3>Example</h3>
-    <p>
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://github.com/reactjsacademy/advanced-react-patterns/blob/master/src/components/functional-programming/composition/example/index.js"
-      >
-        source code exercise branch &#187;
-      </a>
-    </p>
     Tranform the following text: "{exampleText}" so it becomes
     <strong> REACTJSACADEMYISAMAZING</strong>
     <p>
       Result: <strong>{transformText(exampleText)}</strong>
     </p>
     <h3>Exercise</h3>
-    <p>
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://github.com/reactjsacademy/advanced-react-patterns/tree/master/src/components/functional-programming/composition/exercise"
-      >
-        source code exercise branch &#187;
-      </a>
-    </p>
     <p>
       Validate the following form composing the validators defined in
       `src/components/functional-programming/composition/exercise/valiators`. To
@@ -48,13 +30,17 @@ const Page = () => (
       <a
         target="_blank"
         rel="noopener noreferrer"
-        href="https://github.com/reactjsacademy/reactjsacademy/blob/master/src/components/payment/checkout/CheckoutForm.js#L230"
+        href="https://github.com/reactgraphqlacademy/reactgraphql.academy/blob/master/www/src/components/payment/checkout/CheckoutForm.js#L383"
       >
         source code
       </a>{" "}
       of the checkout of the{" "}
-      <a href="https://reactjs.academy/react-redux-graphql-bootcamp-lisbon/#pricing">
-        ReactJS Academy website
+      <a
+        href="https://reactgraphql.academy/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        React GraphQL Academy website
       </a>
     </p>
   </React.Fragment>

src/components/functional-programming/composition/example/index.js

@@ -1,19 +1,21 @@
-export const compose = (...functions) => initialValue =>
+/* eslint-disable no-unused-vars */
+
+export const compose = (...functions) => (initialValue) =>
   functions.reduceRight(
     (accumulatedValue, fn) => fn(accumulatedValue),
     initialValue
   );
 
-const toUpperCase = text => text.toUpperCase();
+const toUpperCase = (text) => text.toUpperCase();
 
-const removeSpaces = text => text.replace(/\s/g, "");
+const removeSpaces = (text) => text.replace(/\s/g, "");
 
-const removeNumbers = text => text.replace(/[0-9]/g, "");
+const removeNumbers = (text) => text.replace(/[0-9]/g, "");
 
 // export const transformText = compose(
 //   toUpperCase,
 //   removeNumbers,
 //   removeSpaces
 // );
 
-export const transformText = text => text;
+export const transformText = (text) => text;

src/components/functional-programming/composition/exercise/validators.js

@@ -1,11 +1,11 @@
-export const required = value => (value ? undefined : "Required");
+export const required = (value) => (value ? undefined : "Required");
 
-export const mustBeEmail = value => {
-  const reEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+export const mustBeEmail = (value) => {
+  const reEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; // eslint-disable-line
   return reEmail.test(value) ? undefined : "Email format is not correct";
 };
 
-export const atLeastFiveCharacters = value =>
+export const atLeastFiveCharacters = (value) =>
   value && value.length >= 5
     ? undefined
     : "You need to type at least 5 characters";

src/components/functional-programming/memoization/Page.jsx

@@ -22,11 +22,11 @@ const Page = () => (
     <p>
       1. Pair up and explain to each other how the memoize function works with
       the doEasyWork function.
-      <ul>
-        <li>Where is the closure? Between line X and Y</li>
-        <li>What variable/s are captured in the closure?</li>
-      </ul>
     </p>
+    <ul>
+      <li>Where is the closure? Between line X and Y</li>
+      <li>What variable/s are captured in the closure?</li>
+    </ul>
 
     <p>
       2. Explain to each other how the memoize function works with doHardWork.

src/components/functional-programming/memoization/exercise.js

@@ -15,25 +15,25 @@ You should see on the console the console.log() for this exercise.
    You can use the function doAnyWork to test your refactored memoize function
 */
 
-async function doEasyWork(amount) {
+export async function doEasyWork(amount) {
   console.log(`[memoization exercise] ${amount} easy units produced`);
 }
 
-async function doHardWork(amount) {
+export async function doHardWork(amount) {
   console.log("[memoization exercise] doing work");
-  await new Promise(resolve => setTimeout(resolve, amount));
+  await new Promise((resolve) => setTimeout(resolve, amount));
   console.log(`[memoization exercise] ${amount} units of hard work produced!`);
 
   return amount;
 }
 
-function doAnyWork(amount = 1, amount2 = 1, amount3 = 1) {
+export function doAnyWork(amount = 1, amount2 = 1, amount3 = 1) {
   return amount + amount2 + amount3;
 }
 
 function memoize(fn) {
   let cache = {};
-  return amount => {
+  return (amount) => {
     if (amount in cache) {
       console.log("[memoization exercise] output from cache");
       return cache[amount];

src/components/patterns/Context/Page.jsx

@@ -3,7 +3,7 @@ import Example from "./example";
 import Exercise from "./exercise";
 
 const Page = () => (
-  <div>
+  <React.Fragment>
     <h2>Context</h2>
     <blockquote>
       Accepts a context object (the value returned from React.createContext) and
@@ -12,54 +12,17 @@ const Page = () => (
       &lt;MyContext.Provider&gt; above the calling component in the tree.{" "}
       <a
         target="_blank"
+        rel="noopener noreferrer"
         href="https://reactjs.org/docs/hooks-reference.html#usecontext"
       >
         React docs
       </a>
     </blockquote>
     <h3>Example</h3>
     <Example />
-    <p>
-      File: <code>src/components/patterns/Context/example/Modal.jsx</code>
-    </p>
-    <h3>Exercise</h3>
-    <p>
-      We are going to create a <strong>Theme Switcher</strong> component using
-      Context. If you see{" "}
-      <code>src/components/patterns/Context/exercise/theme.js</code>, there are{" "}
-      <strong>2 themes defined</strong>. You should be able to toggle between
-      these 2 themes.
-    </p>
-    <p>This component should:</p>
-    <ul>
-      <li>
-        Track the current <code>theme</code> in the state
-      </li>
-      <li>Implement a fucntion to toggle the theme</li>
-      <li>
-        pass the current theme to the <code>ThemeProvider</code> from{" "}
-        <code>styled-components</code>
-      </li>
-    </ul>
-    <p>
-      In order to check if the theme is actually changing, you can refactor the{" "}
-      <code>Hero</code> component (
-      <code>src/components/patterns/Context/exercise/components/Hero.jsx</code>)
-    </p>
-    <p>
-      Also, in order to toggle the theme, you need to use the{" "}
-      <code>ThemeContext.Consumer</code> in order to get access to the function
-      that toggles the state in your ThemeProvider.
-    </p>
-    <Exercise />
     <hr />
-    <h3>Bonus Exercise</h3>
-    <p>
-      Implement the Redux Provider in
-      <code>src/components/patterns/Context/xbonus/Provider.js</code>. Once
-      implemented, use it in Root.js
-    </p>
-  </div>
+    <Exercise />
+  </React.Fragment>
 );
 
 export default Page;

src/components/patterns/Context/example/Modal.jsx

@@ -4,12 +4,12 @@ import { Modal as BootstrapModal } from "react-bootstrap";
 const ModalContext = React.createContext();
 
 const Modal = ({ children }) => {
-  const [modalChildren, displayModal] = React.useState(null);
-  const hideModal = () => displayModal(null);
+  const [modalChildren, showModal] = React.useState(null);
+  const hideModal = () => showModal(null);
   const isOpen = !!modalChildren;
 
   return (
-    <ModalContext.Provider value={{ isOpen, displayModal, hideModal }}>
+    <ModalContext.Provider value={{ isOpen, showModal, hideModal }}>
       <BootstrapModal backdrop={true} show={isOpen} onHide={hideModal}>
         {modalChildren}
       </BootstrapModal>