fix: last min touches

connorbrathwaite · Jun 10, 2019 · 0f92393 · 0f92393
1 parent 3c4f06b
commit 0f92393
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,9 @@
 # ReasonReact
 
-[![CircleCI](https://circleci.com/gh/connorbrathwaite/reason-react-fetch-demo/tree/master.svg?style=svg&circle-token=82cefcc8703fdd319b1d8bfe01508140abc6fab6)](https://circleci.com/gh/connorbrathwaite/reason-react-fetch-demo/tree/master)
-
 To run:
 
-* `yarn install`
-* `yarn start`
+- `yarn install`
+- `yarn dev:start`
+- `yarn dev:server`
+
+[Learn more tonight](https://www.meetup.com/ReasonMTL/events/261548153/?recEventId=261548153&gj=wcs1_e&rv=wcs1_e&_xtd=gatlbWFpbF9jbGlja9oAJGMxYjk4MjY0LWY2ZWMtNGIwMi1hZjlhLTk2YjJmZTNkMGZjMg&_af=event&_af_eid=261548153&recNumber=1)
diff --git a/src/AlertContainer.re b/src/AlertContainer.re
@@ -0,0 +1,13 @@
+[@react.component]
+let make = (~children) => {
+  <>
+    <pre className="mb-2">
+      <code>
+        "[@react.component] [@bs.module]
+external make: (~isVisible: bool=?, ~_type: string=?, ~message: string) => React.element = \"./Alert\";"
+        ->Utils.str
+      </code>
+    </pre>
+    children
+  </>;
+};
diff --git a/src/Home.re → src/Cards.re b/src/Home.re → src/Cards.re
@@ -1,9 +1,3 @@
-module CartIcon = {
-  [@react.component]
-  let make = (~count=0) =>
-    <div className="sticky flex align-center justify-end m-4"> {count->string_of_int->Utils.str} </div>;
-};
-
 type product = {
   id: int,
   title: string,
@@ -24,12 +18,6 @@ type action =
   | CartSubtract(int)
   | CartCheckout;
 
-let rec getListLength = (myList: list('a)) =>
-  switch (myList) {
-  | [] => 0
-  | [_, ...tail] => 1 + getListLength(tail)
-  };
-
 [@react.component]
 let component = () => {
   let initialState = {
@@ -68,19 +56,19 @@ let component = () => {
       {state.products
        |> List.map(({id, title, src, price}) =>
             <Card.component
-              key={id->string_of_int}
               alt="Lorem"
-              price
-              title
               ctas=["First", "Second"]
+              handleOnClick={_ => onClick(id)}
+              isInCart={isInCart(id)}
+              key={id->string_of_int}
+              price
               src
+              title
               subText="Foo Bar"
-              isInCart={isInCart(id)}
-              handleOnClick={_ => onClick(id)}
             />
           )
        |> Array.of_list
        |> React.array}
     </div>
   </>;
-};
+};
diff --git a/src/CartIcon.re b/src/CartIcon.re
@@ -0,0 +1,3 @@
+[@react.component]
+let make = (~count=0) =>
+  <div className="sticky flex align-center justify-end m-4"> {count->string_of_int->Utils.str} </div>;
diff --git a/src/Header.re b/src/Header.re
@@ -1,14 +1,16 @@
 [@react.component]
 let component = () =>
   <header className="flex flex-grow flex-wrap items-center m-4">
-    <Link title="Home" href="/" className="hover:text-gray-500 text-xs uppercase mr-4"> "Home"->Utils.str </Link>
-    <Link title="Search" href="/intro" className="hover:text-gray-500 text-xs uppercase mr-4">
+    <Link title="Intro" href="/intro" className="hover:text-gray-500 text-xs uppercase mr-4">
       "Intro"->Utils.str
     </Link>
-    <Link title="Search" href="/search" className="hover:text-gray-500 text-xs uppercase mr-4">
+    <Link title="Cards" href="/cards" className="hover:text-gray-500 text-xs uppercase mr-4">
+      "Cards"->Utils.str
+    </Link>
+    <Link title="Async Hooks" href="/search" className="hover:text-gray-500 text-xs uppercase mr-4">
       "Async Hooks"->Utils.str
     </Link>
     <Link title="Vanilla React" href="/vanilla-react" className="hover:text-gray-500 text-xs uppercase mr-4">
       "Vanilla React Interop"->Utils.str
     </Link>
-  </header>;
+  </header>;
diff --git a/src/Intro.re b/src/Intro.re
@@ -13,20 +13,60 @@ let component = () =>
       </a>
     </h2>
     <hr />
-    <h3 className="mt-4 mb-2 font-hairline"> "Functions"->Utils.str </h3>
+    <h3 className="mt-4 mb-2 font-hairline"> "Functions and their signatures"->Utils.str </h3>
     <hr />
     <pre> <code> "let add = (x: int, y: int) => x + y;"->Utils.str </code> </pre>
     <hr />
-    <pre> <code> "let addComponents = ((x: int, y: int)) => x + y;"->Utils.str </code> </pre>
-    <hr />
+    <p className="my-2 font-hairline">
+      "Labeled arugments with defined types, \"optional\" values, note: partial application"->Utils.str
+    </p>
     <pre> <code> "let add = (~x: option(int)=?, ~y: option(int)=?, ()) => ...;"->Utils.str </code> </pre>
     <hr />
+    <p className="my-2 font-hairline"> "Labeled arugments with defined types and default values"->Utils.str </p>
     <pre> <code> "let add = (~x: int=0, ~y: int=0, ()) => x + y;"->Utils.str </code> </pre>
+    <hr />
+    <p className="my-2 font-hairline"> "Recurision"->Utils.str </p>
+    <pre>
+      <code>
+        "let rec summarize = (l: list(int)) => switch l {
+  | [] => 0
+  | [head, ...tail] => head + summarize(tail)
+};"
+        ->Utils.str
+      </code>
+    </pre>
+    <p className="my-2 font-hairline"> "Reverse-application or pipe operator"->Utils.str </p>
+    <pre> <code> "|>"->Utils.str </code> </pre>
+    <p className="my-2 font-hairline">
+      "The operator |> is called reverse-application operator or pipe operator. It lets you chain function calls: x |> f is the same as f(x). That may not look like much, but it is quite useful when combining function calls."
+      ->Utils.str
+    </p>
+    <pre>
+      <code>
+        "[4, 2, 1, 3, 5]
+|> List.map(x => x + 1)
+|> List.filter(x => x < 5)
+|> List.sort(compare);"->Utils.str
+      </code>
+    </pre>
+    <hr />
+    <a className="my-2 font-hairline" href="https://bucklescript.github.io/docs/en/pipe-first">
+      "BuckleScript has a special |. (or -> for Reason) pipe syntax for dealing with various situations. This operator has many uses."
+      ->Utils.str
+    </a>
+    <pre> <code> "a
+->foo(b)
+->bar;
+
+// is equal to
+
+bar(foo(a, b));"->Utils.str </code> </pre>
     <hr />
     <h3 className="my-2 font-hairline"> "Variants & Pattern Matching"->Utils.str </h3>
     <hr />
     <pre> <code> "type color = Red | Orange | Yellow | Green | Blue | Purple;"->Utils.str </code> </pre>
     <hr />
+    <p className="my-2 font-hairline"> "Lookup table, similar to JS"->Utils.str </p>
     <pre>
       <code>
         "let stringOfColor = (c: color) => switch c {
@@ -40,11 +80,17 @@ let component = () =>
         ->Utils.str
       </code>
     </pre>
+    <a className="my-2 font-hairline" href="http://reasonmlhub.com/exploring-reasonml/ch_records.html">
+      "Could also return records i.e {x: 12, y: -2};"->Utils.str
+    </a>
     <hr />
+    <p className="my-2 font-hairline"> "Prefer variants over booleans since:"->Utils.str </p>
     <pre>
       <code>
         "type includeDetails = ShowEverything | HideDetails;
+
 let stringOfContact = (~levelOfDetail: includeDetails, c: contact) => ...;
+
 let str = stringOfContact(~levelOfDetail=ShowEverything, myContact);"
         ->Utils.str
       </code>
@@ -58,23 +104,15 @@ let str = stringOfContact(~levelOfDetail=ShowEverything, myContact);"
       <li className="my-2 font-hairline"> "+ It is easy to add more modes later on."->Utils.str </li>
     </ul>
     <hr />
+    <p className="my-2 font-hairline"> "Composing types"->Utils.str </p>
     <pre>
       <code>
         "type point = Point(float, float);
+
 type shape =
   | Rectangle(point, point)
   | Circle(point, float);"
         ->Utils.str
       </code>
     </pre>
-    <hr />
-    <pre>
-      <code>
-        "let rec summarize = (l: list(int)) => switch l {
-  | [] => 0
-  | [head, ...tail] => head + summarize(tail)
-};"
-        ->Utils.str
-      </code>
-    </pre>
-  </div>;
+  </div>;
diff --git a/src/Router.re b/src/Router.re
@@ -1,28 +1,12 @@
-module AlertContainer = {
-  [@react.component]
-  let make = (~children) => {
-    <>
-      <pre className="mb-2">
-        <code>
-          "[@react.component] [@bs.module]
-external make: (~isVisible: bool=?, ~_type: string=?, ~message: string) => React.element = \"./Alert\";"
-          ->Utils.str
-        </code>
-      </pre>
-      children
-    </>;
-  };
-};
-
 [@react.component]
 let make = () => {
   let url = ReasonReactRouter.useUrl();
   <>
     <Header.component />
     <main className="container px-4">
       {switch (url.path) {
-       | [] => <Home.component />
        | ["intro"] => <Intro.component />
+       | ["cards"] => <Cards.component />
        | ["login"] => <Login.component />
        | ["search"] => <Search.component username={url.search} />
        | ["vanilla-react"] when url.search !== "" =>
@@ -34,4 +18,4 @@ let make = () => {
     </main>
     <footer className="flex flex-grow justify-center items-center p-2"> "Made with <3"->Utils.str </footer>
   </>;
-};
+};