Skip to content

Commit

Permalink
feat: add wods, convert metric to imperial
Browse files Browse the repository at this point in the history
  • Loading branch information
@believer
believer committed Aug 20, 2019
1 parent b20f489 commit 4789f08
Show file tree
Hide file tree
Showing 11 changed files with 588 additions and 192 deletions.
257 changes: 146 additions & 111 deletions src/App.re
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
type state = {
category: option(Wod.Category.t),
filter: option(Wod.WodType.t),
category: option(Category.t),
filter: option(WodType.t),
system: Settings.system,
};

type action =
| SetCategory(option(Wod.Category.t))
| SetFilter(option(Wod.WodType.t));
| SetCategory(option(Category.t))
| SetFilter(option(WodType.t))
| SetSystem(Settings.system);

module Style = {
open Css;

let wrap =
merge([
"mt-20",
"my-20",
style([
display(`grid),
gridTemplateColumns([
Expand All @@ -25,15 +27,19 @@ module Style = {
]),
]);

let filters = merge(["mb-8", style([gridColumn(3, 4)])]);
let filters =
merge([
"mb-8 flex justify-between items-center",
style([gridColumn(3, 4)]),
]);

let cards =
style([
display(`grid),
gridColumn(3, 4),
gridGap(`px(32)),
media("(max-width: 480px)", [gridTemplateColumns([`fr(1.0)])]),
unsafe("grid-template-columns", "repeat(auto-fit, minmax(310px, 1fr))"),
unsafe("gridTemplateColumns", "repeat(auto-fill, minmax(310px, 1fr))"),
]);
};

Expand All @@ -45,116 +51,145 @@ let make = () => {
switch (action) {
| SetCategory(c) => {...state, category: c}
| SetFilter(f) => {...state, filter: f}
| SetSystem(w) => {...state, system: w}
},
{category: None, filter: None},
{category: None, filter: None, system: Metric},
);

<main className=Style.wrap>
<div className=Style.filters>
<div className="mb-2">
<Pill
className="mr-4"
onClick={_ => dispatch(SetFilter(None))}
selected={Belt.Option.isNone(state.filter)}>
{React.string("All")}
</Pill>
<Pill
className="mr-4"
onClick={_ => dispatch(SetFilter(Some(`ForTime)))}
selected={state.filter === Some(`ForTime)}>
{React.string("For time")}
</Pill>
<Pill
onClick={_ => dispatch(SetFilter(Some(`AMRAP)))}
selected={state.filter === Some(`AMRAP)}>
{React.string("AMRAP")}
</Pill>
<Settings.Provider value={Settings.system: state.system}>
<main className=Style.wrap>
<div className=Style.filters>
<div>
<div className="mb-2">
<Pill
className="mr-4"
onClick={_ => dispatch(SetFilter(None))}
selected={Belt.Option.isNone(state.filter)}>
{React.string("All")}
</Pill>
<Pill
className="mr-4"
onClick={_ => dispatch(SetFilter(Some(`ForTime)))}
selected={state.filter === Some(`ForTime)}>
{React.string("For time")}
</Pill>
<Pill
onClick={_ => dispatch(SetFilter(Some(`AMRAP)))}
selected={state.filter === Some(`AMRAP)}>
{React.string("AMRAP")}
</Pill>
</div>
<div>
<Pill
className="mr-4"
onClick={_ => dispatch(SetCategory(None))}
selected={Belt.Option.isNone(state.category)}>
{React.string("All")}
</Pill>
<Pill
className="mr-4"
onClick={_ => dispatch(SetCategory(Some(`Hero)))}
selected={state.category == Some(`Hero)}>
{React.string("Hero")}
</Pill>
<Pill
onClick={_ =>
dispatch(SetCategory(Some(`Wodapalooza(2019))))
}
selected={state.category == Some(`Wodapalooza(2019))}>
{React.string("Wodapalooza 2019")}
</Pill>
</div>
</div>
<div>
{switch (state.system) {
| Metric =>
<Button onClick={_ => dispatch(SetSystem(Imperial))}>
{React.string("lbs")}
</Button>
| Imperial =>
<Button onClick={_ => dispatch(SetSystem(Metric))}>
{React.string("kg")}
</Button>
}}
</div>
</div>
<div>
<Pill
className="mr-4"
onClick={_ => dispatch(SetCategory(None))}
selected={Belt.Option.isNone(state.category)}>
{React.string("All")}
</Pill>
<Pill
className="mr-4"
onClick={_ => dispatch(SetCategory(Some(`Hero)))}
selected={state.category === Some(`Hero)}>
{React.string("Hero")}
</Pill>
<Pill
onClick={_ => dispatch(SetCategory(Some(`Girl)))}
selected={state.category === Some(`Girl)}>
{React.string("The Girls")}
</Pill>
</div>
</div>
<div className=Style.cards>
{Wod.wods
->Belt.List.keep(wod =>
switch (state.filter) {
| Some(f) => f === wod.wodType
| None => true
}
)
->Belt.List.keep(wod => {
Js.log2(state.category, wod.category);
switch (state.category, wod.category) {
| (Some(c), Some(wc)) => c === wc
| (Some(_), None) => false
| (None, Some(_))
| (None, None) => true
};
})
->Belt.List.map(wod =>
<div className="bg-white rounded shadow-lg p-6" key={wod.id}>
<header className="flex items-center justify-between">
<div className="font-bold">
{switch (wod.name) {
| Some(name) => React.string(name)
| None => React.string(Wod.WodType.toString(wod.wodType))
}}
{switch (wod.timeCap) {
| Some(t) =>
" " ++ t->string_of_int ++ " min" |> React.string
<div className=Style.cards>
{Wod.wods
->Belt.List.keep(wod =>
switch (state.filter) {
| Some(f) => f === wod.wodType
| None => true
}
)
->Belt.List.keep(wod =>
switch (state.category, wod.category) {
| (Some(c), Some(wc)) => c == wc
| (Some(_), None) => false
| (None, Some(_))
| (None, None) => true
}
)
->Belt.List.map(wod =>
<div className="bg-white rounded shadow-lg p-6" key={wod.id}>
<header className="flex items-center justify-between">
<div className="font-bold">
{switch (wod.name) {
| Some(name) => React.string(name)
| None => React.string(WodType.toString(wod.wodType))
}}
{switch (wod.timeCap) {
| Some(t) =>
" " ++ t->string_of_int ++ " min" |> React.string
| None => React.null
}}
</div>
{switch (wod.category) {
| Some(c) =>
switch (c) {
| `Hero =>
<Pill background=`Red> {React.string("Hero")} </Pill>
| `Girl => <Pill> {React.string("Girl")} </Pill>
| `Wodapalooza(year) =>
<Pill>
{React.string("Wodapalooza " ++ year->string_of_int)}
</Pill>
}
| None => React.null
}}
</div>
{switch (wod.category) {
| Some(c) =>
switch (c) {
| `Hero =>
<Pill background=`Red> {React.string("Hero")} </Pill>
| `Girl => <Pill> {React.string("Girl")} </Pill>
}
</header>
{switch (wod.rounds) {
| Some(r) =>
<div> {r->string_of_int ++ " rounds" |> React.string} </div>
| None => React.null
}}
</header>
{switch (wod.rounds) {
| Some(r) =>
<div> {r->string_of_int ++ " rounds" |> React.string} </div>
| None => React.null
}}
<ul className="text-gray-700 mt-4">
{wod.parts
->Belt.List.mapWithIndex((i, part) =>
<li key={i->string_of_int}>
<Exercise.Unit reps={part.reps} />
<Exercise.Equipment equipment={part.equipment} />
{React.string(
" " ++ Wod.Exercise.toString(part.exercise) ++ " ",
)}
<Exercise.Weight weight={part.weight} />
</li>
)
->Belt.List.toArray
->React.array}
</ul>
</div>
)
->Belt.List.toArray
->React.array}
</div>
</main>;
<ul className="text-gray-700 mt-4">
{wod.parts
->Belt.List.mapWithIndex((i, part) =>
<li key={i->string_of_int}>
<Exercise.Unit reps={part.reps} />
<Exercise.Equipment equipment={part.equipment} />
{React.string(
" " ++ Wod.Exercise.toString(part.exercise) ++ " ",
)}
<Exercise.Weight weight={part.weight} />
</li>
)
->Belt.List.toArray
->React.array}
</ul>
{switch (wod.description) {
| Some(desc) =>
<div className="mt-4 text-xs text-gray-500">
{React.string(desc)}
</div>
| None => React.null
}}
</div>
)
->Belt.List.toArray
->React.array}
</div>
</main>
</Settings.Provider>;
};
1 change: 0 additions & 1 deletion src/Index.re
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
ReactDOMRe.renderToElementWithId(<App />, "root");

16 changes: 16 additions & 0 deletions src/Settings.re
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
type system =
| Metric
| Imperial;

type t = {system};

let context = React.createContext({system: Metric});

module Provider = {
let make = React.Context.provider(context);

let makeProps = (~value, ~children, ()) => {
"value": value,
"children": children,
};
};
8 changes: 8 additions & 0 deletions src/components/Button.re
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
[@react.component]
let make = (~onClick, ~children) => {
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
onClick>
children
</button>;
};
Loading

1 comment on commit 4789f08

@vercel
Copy link

@vercel vercel bot commented on 4789f08 Aug 20, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully aliased the URL https://wod-c99r8odav.now.sh to the following aliases:

Please sign in to comment.