Skip to content

Commit 0f92393

Browse files
author
Connor Brathwaite
committed
fix: last min touches
1 parent 3c4f06b commit 0f92393

File tree

7 files changed

+87
-58
lines changed

7 files changed

+87
-58
lines changed

‎README.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
# ReasonReact
22

3-
[![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)
4-
53
To run:
64

7-
* `yarn install`
8-
* `yarn start`
5+
- `yarn install`
6+
- `yarn dev:start`
7+
- `yarn dev:server`
8+
9+
[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)

‎src/AlertContainer.re

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
[@react.component]
2+
let make = (~children) => {
3+
<>
4+
<pre className="mb-2">
5+
<code>
6+
"[@react.component] [@bs.module]
7+
external make: (~isVisible: bool=?, ~_type: string=?, ~message: string) => React.element = \"./Alert\";"
8+
->Utils.str
9+
</code>
10+
</pre>
11+
children
12+
</>;
13+
};

‎src/Home.re renamed to ‎src/Cards.re

+6-18
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
module CartIcon = {
2-
[@react.component]
3-
let make = (~count=0) =>
4-
<div className="sticky flex align-center justify-end m-4"> {count->string_of_int->Utils.str} </div>;
5-
};
6-
71
type product = {
82
id: int,
93
title: string,
@@ -24,12 +18,6 @@ type action =
2418
| CartSubtract(int)
2519
| CartCheckout;
2620

27-
let rec getListLength = (myList: list('a)) =>
28-
switch (myList) {
29-
| [] => 0
30-
| [_, ...tail] => 1 + getListLength(tail)
31-
};
32-
3321
[@react.component]
3422
let component = () => {
3523
let initialState = {
@@ -68,19 +56,19 @@ let component = () => {
6856
{state.products
6957
|> List.map(({id, title, src, price}) =>
7058
<Card.component
71-
key={id->string_of_int}
7259
alt="Lorem"
73-
price
74-
title
7560
ctas=["First", "Second"]
61+
handleOnClick={_ => onClick(id)}
62+
isInCart={isInCart(id)}
63+
key={id->string_of_int}
64+
price
7665
src
66+
title
7767
subText="Foo Bar"
78-
isInCart={isInCart(id)}
79-
handleOnClick={_ => onClick(id)}
8068
/>
8169
)
8270
|> Array.of_list
8371
|> React.array}
8472
</div>
8573
</>;
86-
};
74+
};

‎src/CartIcon.re

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[@react.component]
2+
let make = (~count=0) =>
3+
<div className="sticky flex align-center justify-end m-4"> {count->string_of_int->Utils.str} </div>;

‎src/Header.re

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
[@react.component]
22
let component = () =>
33
<header className="flex flex-grow flex-wrap items-center m-4">
4-
<Link title="Home" href="/" className="hover:text-gray-500 text-xs uppercase mr-4"> "Home"->Utils.str </Link>
5-
<Link title="Search" href="/intro" className="hover:text-gray-500 text-xs uppercase mr-4">
4+
<Link title="Intro" href="/intro" className="hover:text-gray-500 text-xs uppercase mr-4">
65
"Intro"->Utils.str
76
</Link>
8-
<Link title="Search" href="/search" className="hover:text-gray-500 text-xs uppercase mr-4">
7+
<Link title="Cards" href="/cards" className="hover:text-gray-500 text-xs uppercase mr-4">
8+
"Cards"->Utils.str
9+
</Link>
10+
<Link title="Async Hooks" href="/search" className="hover:text-gray-500 text-xs uppercase mr-4">
911
"Async Hooks"->Utils.str
1012
</Link>
1113
<Link title="Vanilla React" href="/vanilla-react" className="hover:text-gray-500 text-xs uppercase mr-4">
1214
"Vanilla React Interop"->Utils.str
1315
</Link>
14-
</header>;
16+
</header>;

‎src/Intro.re

+52-14
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,60 @@ let component = () =>
1313
</a>
1414
</h2>
1515
<hr />
16-
<h3 className="mt-4 mb-2 font-hairline"> "Functions"->Utils.str </h3>
16+
<h3 className="mt-4 mb-2 font-hairline"> "Functions and their signatures"->Utils.str </h3>
1717
<hr />
1818
<pre> <code> "let add = (x: int, y: int) => x + y;"->Utils.str </code> </pre>
1919
<hr />
20-
<pre> <code> "let addComponents = ((x: int, y: int)) => x + y;"->Utils.str </code> </pre>
21-
<hr />
20+
<p className="my-2 font-hairline">
21+
"Labeled arugments with defined types, \"optional\" values, note: partial application"->Utils.str
22+
</p>
2223
<pre> <code> "let add = (~x: option(int)=?, ~y: option(int)=?, ()) => ...;"->Utils.str </code> </pre>
2324
<hr />
25+
<p className="my-2 font-hairline"> "Labeled arugments with defined types and default values"->Utils.str </p>
2426
<pre> <code> "let add = (~x: int=0, ~y: int=0, ()) => x + y;"->Utils.str </code> </pre>
27+
<hr />
28+
<p className="my-2 font-hairline"> "Recurision"->Utils.str </p>
29+
<pre>
30+
<code>
31+
"let rec summarize = (l: list(int)) => switch l {
32+
| [] => 0
33+
| [head, ...tail] => head + summarize(tail)
34+
};"
35+
->Utils.str
36+
</code>
37+
</pre>
38+
<p className="my-2 font-hairline"> "Reverse-application or pipe operator"->Utils.str </p>
39+
<pre> <code> "|>"->Utils.str </code> </pre>
40+
<p className="my-2 font-hairline">
41+
"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."
42+
->Utils.str
43+
</p>
44+
<pre>
45+
<code>
46+
"[4, 2, 1, 3, 5]
47+
|> List.map(x => x + 1)
48+
|> List.filter(x => x < 5)
49+
|> List.sort(compare);"->Utils.str
50+
</code>
51+
</pre>
52+
<hr />
53+
<a className="my-2 font-hairline" href="https://bucklescript.github.io/docs/en/pipe-first">
54+
"BuckleScript has a special |. (or -> for Reason) pipe syntax for dealing with various situations. This operator has many uses."
55+
->Utils.str
56+
</a>
57+
<pre> <code> "a
58+
->foo(b)
59+
->bar;
60+
61+
// is equal to
62+
63+
bar(foo(a, b));"->Utils.str </code> </pre>
2564
<hr />
2665
<h3 className="my-2 font-hairline"> "Variants & Pattern Matching"->Utils.str </h3>
2766
<hr />
2867
<pre> <code> "type color = Red | Orange | Yellow | Green | Blue | Purple;"->Utils.str </code> </pre>
2968
<hr />
69+
<p className="my-2 font-hairline"> "Lookup table, similar to JS"->Utils.str </p>
3070
<pre>
3171
<code>
3272
"let stringOfColor = (c: color) => switch c {
@@ -40,11 +80,17 @@ let component = () =>
4080
->Utils.str
4181
</code>
4282
</pre>
83+
<a className="my-2 font-hairline" href="http://reasonmlhub.com/exploring-reasonml/ch_records.html">
84+
"Could also return records i.e {x: 12, y: -2};"->Utils.str
85+
</a>
4386
<hr />
87+
<p className="my-2 font-hairline"> "Prefer variants over booleans since:"->Utils.str </p>
4488
<pre>
4589
<code>
4690
"type includeDetails = ShowEverything | HideDetails;
91+
4792
let stringOfContact = (~levelOfDetail: includeDetails, c: contact) => ...;
93+
4894
let str = stringOfContact(~levelOfDetail=ShowEverything, myContact);"
4995
->Utils.str
5096
</code>
@@ -58,23 +104,15 @@ let str = stringOfContact(~levelOfDetail=ShowEverything, myContact);"
58104
<li className="my-2 font-hairline"> "+ It is easy to add more modes later on."->Utils.str </li>
59105
</ul>
60106
<hr />
107+
<p className="my-2 font-hairline"> "Composing types"->Utils.str </p>
61108
<pre>
62109
<code>
63110
"type point = Point(float, float);
111+
64112
type shape =
65113
| Rectangle(point, point)
66114
| Circle(point, float);"
67115
->Utils.str
68116
</code>
69117
</pre>
70-
<hr />
71-
<pre>
72-
<code>
73-
"let rec summarize = (l: list(int)) => switch l {
74-
| [] => 0
75-
| [head, ...tail] => head + summarize(tail)
76-
};"
77-
->Utils.str
78-
</code>
79-
</pre>
80-
</div>;
118+
</div>;

‎src/Router.re

+2-18
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,12 @@
1-
module AlertContainer = {
2-
[@react.component]
3-
let make = (~children) => {
4-
<>
5-
<pre className="mb-2">
6-
<code>
7-
"[@react.component] [@bs.module]
8-
external make: (~isVisible: bool=?, ~_type: string=?, ~message: string) => React.element = \"./Alert\";"
9-
->Utils.str
10-
</code>
11-
</pre>
12-
children
13-
</>;
14-
};
15-
};
16-
171
[@react.component]
182
let make = () => {
193
let url = ReasonReactRouter.useUrl();
204
<>
215
<Header.component />
226
<main className="container px-4">
237
{switch (url.path) {
24-
| [] => <Home.component />
258
| ["intro"] => <Intro.component />
9+
| ["cards"] => <Cards.component />
2610
| ["login"] => <Login.component />
2711
| ["search"] => <Search.component username={url.search} />
2812
| ["vanilla-react"] when url.search !== "" =>
@@ -34,4 +18,4 @@ let make = () => {
3418
</main>
3519
<footer className="flex flex-grow justify-center items-center p-2"> "Made with <3"->Utils.str </footer>
3620
</>;
37-
};
21+
};

0 commit comments

Comments
 (0)