Skip to content

Commit

Permalink
styled the menu some and recipes
Browse files Browse the repository at this point in the history
  • Loading branch information
smith15973 committed Sep 7, 2024
1 parent bd19dae commit 6356dfb
Show file tree
Hide file tree
Showing 14 changed files with 413 additions and 65 deletions.
2 changes: 1 addition & 1 deletion Frontend/src/pages/menus/AddMealsToList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default function AddMealsToList({ mealids, onSubmit, disabled }) {

return (
<React.Fragment>
<Button disabled={disabled} variant="text" onClick={handleClickOpen}>
<Button disabled={!disabled} variant="text" onClick={handleClickOpen}>
Add to List
</Button>
<Dialog
Expand Down
4 changes: 4 additions & 0 deletions GroceryApp/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { Recipes } from './pages/recipes/Recipes';
import { Lists } from './pages/lists/Lists';
import { Menu } from './pages/menu/Menu';
import { ShowList } from './pages/lists/ShowList';
import { ShowRecipe } from './pages/recipes/ShowRecipe';
import { NewRecipe } from './pages/recipes/NewRecipe';



Expand Down Expand Up @@ -50,6 +52,8 @@ function App() {
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Menu" component={Menu} />
<Stack.Screen name="Recipes" component={Recipes} />
<Stack.Screen name="Recipe" component={ShowRecipe} />
<Stack.Screen name="New Recipe" component={NewRecipe} />
<Stack.Screen name="Lists" component={Lists} />
<Stack.Screen name="List" component={ShowList} />
</Stack.Navigator>
Expand Down
39 changes: 0 additions & 39 deletions GroceryApp/pages/lists/AddItemToList copy.jsx

This file was deleted.

11 changes: 6 additions & 5 deletions GroceryApp/pages/lists/AddItemToList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { IngredientSelect } from './IngredientSelect'
import { IngredientQuantityInput } from './IngredientQuantityInput'
import { ListItem } from '@rneui/themed'
import Icon from 'react-native-vector-icons/FontAwesome';
import { View } from 'react-native'



export function AddItemToList({ onItemAdded, listId, baseURL }) {
Expand All @@ -15,8 +15,9 @@ export function AddItemToList({ onItemAdded, listId, baseURL }) {
const [addIngredientForm, setAddIngredientForm] = useState({ item: '', quantity: '', unit: '' })

async function handleAddIngredient() {
console.log('adding ingredient', addIngredientForm)
const response = await axios.post(`${baseURL}/${listId}`, addIngredientForm)
if (baseURL) {
const response = await axios.post(`${baseURL}/${listId}`, addIngredientForm)
}
onItemAdded()
setAddIngredientForm({ item: '', quantity: '', unit: '' })
}
Expand All @@ -27,7 +28,7 @@ export function AddItemToList({ onItemAdded, listId, baseURL }) {
}

return (
<ListItem>
<ListItem bottomDivider>

<ListItem.Content style={{ width: '100%', flexDirection: 'row', alignItems: 'top', height: 64 }}>

Expand Down Expand Up @@ -61,6 +62,6 @@ export function AddItemToList({ onItemAdded, listId, baseURL }) {
type='material-community'
size={20}
onPress={handleAddIngredient} />
</ListItem >
</ListItem>
)
}
34 changes: 26 additions & 8 deletions GroceryApp/pages/lists/ListIngredient.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import axios from 'axios';
import { ListItem, Icon } from '@rneui/themed';
import { ListItem, Icon, Button } from '@rneui/themed';

export function ListIngredient({ ingredient, listId, onListUpdated, baseURL }) {
const handleToggle = (ingredientId) => async () => {
Expand All @@ -13,7 +13,30 @@ export function ListIngredient({ ingredient, listId, onListUpdated, baseURL }) {
};

return (
<ListItem bottomDivider>
<ListItem.Swipeable bottomDivider

// onPress={() => navigation.navigate('List', { id: list._id })}
onLongPress={() => console.log('long press')}
leftContent={(reset) => (
<Button
title="Info"
onPress={() => reset()}
icon={{ name: 'info', color: 'white' }}
buttonStyle={{ minHeight: '100%' }}
/>
)}
rightContent={(reset) => (
<Button
title="Delete"
onPress={() => handleDelete(ingredient._id)}
icon={{ name: 'delete', color: 'white' }}
buttonStyle={{ minHeight: '100%', backgroundColor: 'red' }}
/>
)}



>
{ingredient.complete !== undefined ? (
<ListItem.CheckBox
iconType="material-community"
Expand All @@ -31,11 +54,6 @@ export function ListIngredient({ ingredient, listId, onListUpdated, baseURL }) {
{ingredient.quantity ? `${ingredient.quantity} ${ingredient.unit}` : ''}
</ListItem.Subtitle>
</ListItem.Content>
<Icon
name="delete"
type="material-community"
onPress={() => handleDelete(ingredient._id)}
/>
</ListItem>
</ListItem.Swipeable>
);
}
6 changes: 3 additions & 3 deletions GroceryApp/pages/lists/ListOfItems.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FlatList, SafeAreaView, Text, View } from 'react-native';
import { FlatList, SafeAreaView, Text} from 'react-native';
import { ListIngredient } from './ListIngredient';
import { AddItemToList } from './AddItemToList';

Expand All @@ -9,8 +9,8 @@ export function ListOfItems({ list, listId, loadList, baseURL }) {
<FlatList
data={list.map(ingredient => ingredient)}
renderItem={({ item }) => <ListIngredient key={item._id} ingredient={item} listId={listId} onListUpdated={loadList} baseURL={baseURL} />}
ListHeaderComponent={<Text>TOP LIST COMPONENT</Text>} />
<AddItemToList onItemAdded={loadList} listId={listId} baseURL={baseURL} />
ListHeaderComponent={<AddItemToList onItemAdded={loadList} listId={listId} baseURL={baseURL} />} />


</SafeAreaView>

Expand Down
3 changes: 1 addition & 2 deletions GroceryApp/pages/lists/ShowList.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import axios from 'axios'
import { useEffect, useState } from 'react'
import { SafeAreaView, Text } from 'react-native'
import { SafeAreaView} from 'react-native'
import { ListOfItems } from './ListOfItems';
import { useNavigation } from '@react-navigation/native';

Expand Down Expand Up @@ -32,7 +32,6 @@ export function ShowList({ route }) {

return (
<SafeAreaView>
<Text>Name {list.name}</Text>
<ListOfItems list={ingredientList} listId={list._id} loadList={loadList} baseURL="http://localhost:3000/lists" />
</SafeAreaView>

Expand Down
93 changes: 93 additions & 0 deletions GroceryApp/pages/menu/AddToMenu.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { Text } from "@rneui/base";
import axios from "axios";
import { useState, useEffect } from "react";
import { Button, View } from "react-native";


export function AddToMenu({ onMenuUpdated }) {



const [recipes, setRecipes] = useState([])

async function loadRecipes() {
const response = await axios.get('http://localhost:3000/recipes');
setRecipes(response.data);
}

useEffect(() => {
loadRecipes()
}, [])

const [addToMenuForm, setAddToMenuForm] = useState({
date: '',
main: '',
type: '',
})

async function addToMenu() {
console.log(addToMenuForm)
// const response = await axios.post('http://localhost:3000/menus', addToMenuForm);
onMenuUpdated()
setAddToMenuForm({
date: '',
main: '',
type: '',
})
}

function handleChange(e) {
const { name, value } = e.target;
setAddToMenuForm({ ...addToMenuForm, [name]: value })
}


return (
<View>
<Text>Add to Menu</Text>

{/* <input
onChange={(e) => { handleChange(e) }}
type="date"
name="date"
value={addToMenuForm.date}
required
/>
<select
onChange={(e) => { handleChange(e) }}
name="main"
value={addToMenuForm.main}
required
>
<option value="">Select...</option>
{recipes.map(recipe => {
return (
<option
key={recipe._id}
value={recipe._id}
>
{recipe.name}
</option>
)
})}
</select>
<select
name="type"
onChange={(e) => { handleChange(e) }}
value={addToMenuForm.type}
required
>
<option value="">Select...</option>
<option value="Breakfast">Breakfast</option>
<option value="Lunch">Lunch</option>
<option value="Dinner">Dinner</option>
<option value="Snack">Snack</option>
<option value="Dessert">Dessert</option>
</select> */}

<Button title="Add to Menu" onPress={addToMenu} type="submit" />

</View>
)
}
11 changes: 5 additions & 6 deletions GroceryApp/pages/menu/Menu.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import axios from "axios";
import { useState, useEffect } from "react";
// import { AddToMenu } from "./AddToMenu";
// import { MenuDay } from "./MenuDay";
import { AddToMenu } from "./AddToMenu";
import { MenuDay } from "./MenuDay";
// import AddMealsToList from "./AddMealsToList";
// import { Button, Paper } from "@mui/material";
import { Text, View } from "react-native";
Expand Down Expand Up @@ -68,8 +68,7 @@ export function Menu() {
</Paper> */}


<Text>Menu</Text>
{/* <AddToMenu onMenuUpdated={loadMenus} /> */}
<AddToMenu onMenuUpdated={loadMenus} />

<View className="menu">
{menus.map(menu => {
Expand All @@ -82,8 +81,8 @@ export function Menu() {
return (

<View key={menu._id}>
{/* <MenuDay menuDay={menu} onMealSelect={handleMealSelect} onSelectDay={handleSelectDay} mealsSelected={mealsSelected} /> */}
<Text>{menu._id}</Text>
<MenuDay menuDay={menu} onMealSelect={handleMealSelect} onSelectDay={handleSelectDay} mealsSelected={mealsSelected} />
{/* <Text>{menu._id}</Text> */}

</View>

Expand Down
31 changes: 31 additions & 0 deletions GroceryApp/pages/menu/MenuDay.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { ScrollView, Text } from "react-native";
import { View } from "react-native";
import { MenuMeal } from "./MenuMeal";

export function MenuDay({ menuDay, onMealSelect, onSelectDay, mealsSelected }) {

const mealids = menuDay.meals.map(meal => meal._id);


const { date, meals } = menuDay;
// const formattedDate = (new Date(date)).toISOString().split('T')[0];
const formattedDate = (new Date(date)).toUTCString().split(' ').slice(0, 4).join(' ');

let daySelected = mealids.every(id => mealsSelected.includes(id));



return (

<View className="menu-day-row">
<View style={{ width: '20%', height: 200, backgroundColor: 'green', borderRadius: 10, padding: 5, flexDirection: "row" }} onClick={() => onSelectDay(mealids)} className={`menu-date-box ${daySelected ? 'selected' : ''}`}><Text>{formattedDate}</Text></View>

<ScrollView horizontal style={{ flexDirection: "row" }}>
{meals.map(meal => (
<MenuMeal key={meal._id} meal={meal} onSelect={onMealSelect} mealsSelected={mealsSelected} />
))}
</ScrollView>
</View>

)
}
13 changes: 13 additions & 0 deletions GroceryApp/pages/menu/MenuMeal.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Text, View } from 'react-native';

export function MenuMeal({ meal, onSelect, mealsSelected }) {

const mealSelected = mealsSelected.includes(meal._id);

return (
<View style={{backgroundColor:'red', borderRadius: 10, padding: 4, width: 150}} onClick={(e) => onSelect(e)} id={meal._id} key={meal._id} className={`menu-meal-box ${meal.type.toLowerCase()} ${mealSelected ? 'selected' : ''}`}>
<Text >{meal.main.name} - {meal.type}</Text>
</View>

)
}
Loading

0 comments on commit 6356dfb

Please sign in to comment.