Skip to content
This repository has been archived by the owner on May 7, 2021. It is now read-only.

Commit

Permalink
Handle Tracker reset (minor)
Browse files Browse the repository at this point in the history
  • Loading branch information
Jorge Cuadra committed Sep 2, 2018
1 parent 83fc581 commit c9d835f
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 109 deletions.
69 changes: 44 additions & 25 deletions src/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,31 +139,50 @@ class Layout extends Component {
};

handleTracker({ action, macro, value }) {
this.setState(
prevState => {
const macroCalories = convertMacroGramToCalories({ macro, value });

const calories =
action === 'add'
? prevState.tracker.calories + macroCalories
: prevState.tracker.calories - macroCalories;

const newValue =
action === 'add'
? prevState.tracker[macro] + value
: prevState.tracker[macro] - value;

const tracker = {
...prevState.tracker,
[macro]: newValue,
calories,
};
return { tracker };
},
() => {
localStorage.setItem('tracker', JSON.stringify(this.state.tracker));
},
);
const macroCalories = convertMacroGramToCalories({ macro, value });

switch (action) {
case 'reset': {
const tracker = { calories: 0, carbs: 0, fat: 0, protein: 0 };
this.setState({ tracker }, () =>
localStorage.setItem('tracker', JSON.stringify(tracker)),
);
break;
}

case 'add':
this.setState(
prevState => {
const tracker = {
...prevState.tracker,
[macro]: prevState.tracker[macro] + value,
calories: prevState.tracker.calories + macroCalories,
};
return { tracker };
},
() => {
localStorage.setItem('tracker', JSON.stringify(this.state.tracker));
},
);
break;

case 'subtract':
this.setState(
prevState => {
const tracker = {
...prevState.tracker,
[macro]: prevState.tracker[macro] - value,
calories: prevState.tracker.calories - macroCalories,
};
return { tracker };
},
() => {
localStorage.setItem('tracker', JSON.stringify(this.state.tracker));
},
);
default:
break;
}
}

handleMenuGenerate() {
Expand Down
173 changes: 89 additions & 84 deletions src/plan/Plan.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Link from 'next/link';
import numeral from 'numeral';
import { Button } from 'rmwc/Button';
import { Card } from 'rmwc/Card';
import { Grid, GridCell } from 'rmwc/Grid';
import { Fab } from 'rmwc/Fab';
import { ListDivider } from 'rmwc/List';
import { Typography } from 'rmwc/Typography';
Expand All @@ -26,97 +27,101 @@ function Plan({
}) {
const macros = isWorkoutDay ? macrosWorkout : macrosRest;
return (
<Card outlined>
<Typography use="subtitle1" tag="div" className="p-4">
Day Meal Plan{' '}
<Typography use="caption">
{menu.length > 0 && `(${menu.length} servings)`}
</Typography>
</Typography>

<ListDivider />

<div className="fab flex justify-end pr-4">
<Fab onClick={handleMenuGenerate} icon="autorenew" />
</div>
<Grid>
<GridCell span="6" mobile="12">
<Card outlined>
<div className="flex justify-between px-4 py-6 items-center">
<Typography use="headline5">
{numeral(tracker.calories).format('0,0')} /{' '}
{numeral(macros.calories).format('0,0')} cal
</Typography>
<Button onClick={() => handleTracker({ action: 'reset' })}>
Reset
</Button>
</div>
<ListDivider />

<Typography use="headline4" tag="div" className="m-4">
{numeral(tracker.calories).format('0,0')} /{' '}
{numeral(macros.calories).format('0,0')} cal
</Typography>
<div className="">
<MacrosRings
calories={{ total: tracker.calories, target: macros.calories }}
carbs={{ total: tracker.carbs, target: macros.carbs }}
fat={{ total: tracker.fat, target: macros.fat }}
protein={{ total: tracker.protein, target: macros.protein }}
/>
</div>
<MacrosRings
calories={{ total: tracker.calories, target: macros.calories }}
carbs={{ total: tracker.carbs, target: macros.carbs }}
fat={{ total: tracker.fat, target: macros.fat }}
protein={{ total: tracker.protein, target: macros.protein }}
/>

<div>
<Macro
increment={10}
name="carbs"
target={macros.carbs}
total={tracker.carbs}
onAction={handleTracker}
/>
<Macro
increment={5}
name="protein"
target={macros.protein}
total={tracker.protein}
onAction={handleTracker}
/>
<Macro
increment={5}
name="fat"
target={macros.fat}
total={tracker.fat}
onAction={handleTracker}
/>
</div>
<Macro
increment={10}
name="carbs"
target={macros.carbs}
total={tracker.carbs}
onAction={handleTracker}
/>
<Macro
increment={5}
name="protein"
target={macros.protein}
total={tracker.protein}
onAction={handleTracker}
/>
<Macro
increment={5}
name="fat"
target={macros.fat}
total={tracker.fat}
onAction={handleTracker}
/>
</Card>
</GridCell>
<GridCell span="6" mobile="12">
<Card outlined>
<div className="flex justify-between p-4 items-center">
<Typography use="headline5">
{menu.length > 0 && `${menu.length} servings`}
</Typography>
<Fab
onClick={handleMenuGenerate}
icon="autorenew"
label="combine"
/>
</div>

<ListDivider />
<ListDivider />

{recipes.size < RECIPES_MINIMUM && (
<Typography
use="headline5"
theme="text-secondary-on-background"
className="px-4 my-2"
>
Need {RECIPES_MINIMUM - recipes.size} more recipes to be able to
calculate. <Link href="/recipes">Add more recipes</Link>
</Typography>
)}
<List twoLine dense>
{!menu.length && (
<div className="text-center">
{recipes.size < RECIPES_MINIMUM && (
<Typography
use="headline6"
tag="div"
className="flex justify-center p-4"
use="headline5"
theme="text-secondary-on-background"
className="px-4 my-2"
>
Randomly generate a menu plan for the day
Need {RECIPES_MINIMUM - recipes.size} more recipes to be able to
calculate. <Link href="/recipes">Add more recipes</Link>
</Typography>
<Button onClick={handleMenuGenerate}>Generate</Button>
</div>
)}
{menu.map(({ _key, name, Calories, Protein, Carbs, Fat }, index) => (
<SimpleListItem
key={_key + index}
text={name}
secondaryText={`${Calories}cal | Protein ${Protein}g | Carbs ${Carbs}g | Fat ${Fat}g | 1 serving`}
/>
))}
</List>
<style jsx>{`
.fab {
margin-top: -2rem;
margin-bottom: -1.5rem;
}
`}</style>
</Card>
)}
<List twoLine dense>
{!menu.length && (
<div className="text-center">
<Typography
use="headline6"
tag="div"
className="flex justify-center p-4"
>
Randomly generate a menu plan for the day
</Typography>
<Button onClick={handleMenuGenerate}>Generate</Button>
</div>
)}
{menu.map(
({ _key, name, Calories, Protein, Carbs, Fat }, index) => (
<SimpleListItem
key={_key + index}
text={name}
secondaryText={`${Calories}cal | Protein ${Protein}g | Carbs ${Carbs}g | Fat ${Fat}g | 1 serving`}
/>
),
)}
</List>
</Card>
</GridCell>
</Grid>
);
}

Expand Down

0 comments on commit c9d835f

Please sign in to comment.