Skip to content

Delete function for recipe details page #185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SashenJayathilaka wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Delete function for recipe details page #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2d8e1e6
delete functions
SashenJayathilaka Sep 26, 2025
f93b7d5
Merge pull request #13 from SashenJayathilaka/delete-function
SashenJayathilaka Sep 26, 2025
107a095
Update
SashenJayathilaka Sep 26, 2025
63405eb
Merge pull request #14 from SashenJayathilaka/delete-function
SashenJayathilaka Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 15 additions & 30 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,20 +47,19 @@ import SymptomAssessment from "./routes/SymptomAssessment/SymptomAssessment";
import Leaderboard from "./routes/LeaderBoard/leaderBoard";
import ObesityPredictor from "./routes/survey/ObesityPredictor";
import Predictionresult from "./routes/survey/predictionresult";
import UiTimer from "./routes/UiTimer/UiTimer"
import Settings from "./routes/Settings/Settings"
import UiTimer from "./routes/UiTimer/UiTimer";
import Settings from "./routes/Settings/Settings";
import HealthFAQ from "./routes/HealthFAQ/HealthFAQ";
import FitnessRoadmap from './routes/survey/FitnessRoadmap';
import FitnessRoadmap from "./routes/survey/FitnessRoadmap";
import Community from "./routes/Community/Community";
import PostDetail from "./routes/Community/PostDetail";
import ScanBarcode from "./routes/ScanBarcode/ScanBarcode";
import AuthCallback from "./pages/AuthCallback";
import DailyPlanEdit from './routes/DailyPlan/DailyPlanEdit';
import DailyPlanEdit from "./routes/DailyPlan/DailyPlanEdit";

function App() {
const { currentUser } = useContext(UserContext);



// Initialize font size settings for elderly users
useEffect(() => {
initializeFontSize();
Expand All @@ -87,7 +86,7 @@ function App() {
<Route path="/community" element={<Community />} />
<Route path="/community/post/:postId" element={<PostDetail />} />
<Route path="/survey" element={<ObesityPredictor />} />
<Route path="/survey/result" element= {<Predictionresult/>}/>
<Route path="/survey/result" element={<Predictionresult />} />
<Route path="/roadmap" element={<FitnessRoadmap />} />

{/* Private Routes */}
Expand All @@ -99,14 +98,7 @@ function App() {
</AuthenticateRoute>
}
/>
<Route
path="createRecipe"
element={
<AuthenticateRoute>
<CreateRecipe />
</AuthenticateRoute>
}
/>
<Route path="createRecipe" element={<CreateRecipe />} />
<Route
path="searchRecipes"
element={
Expand Down Expand Up @@ -188,14 +180,7 @@ function App() {
</AuthenticateRoute>
}
/>
<Route
path="recipe"
element={
<AuthenticateRoute>
<Recipe />
</AuthenticateRoute>
}
/>
<Route path="recipe" element={<Recipe />} />
<Route path="/recipe/:id" element={<RecipeDetail />} />
<Route
path="Meal"
Expand Down Expand Up @@ -258,12 +243,12 @@ function App() {
}
/>
<Route
path="settings"
element={
<AuthenticateRoute>
<Settings />
</AuthenticateRoute>
}
path="settings"
element={
<AuthenticateRoute>
<Settings />
</AuthenticateRoute>
}
/>
<Route
path="HealthFAQ"
Expand All @@ -279,4 +264,4 @@ function App() {
);
}

export default App;
export default App;
187 changes: 142 additions & 45 deletions src/components/SideMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,25 +24,41 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
return (
<div className={`side-menu ${isOpen ? "open" : ""}`}>
{/* Close Button */}
<button
className="close-button"
onClick={toggleMenu}
<button
className="close-button"
onClick={toggleMenu}
aria-label="Close menu"
>
&times; {/* This renders a nice cross */}
</button>
<div className="nav-links column">
{currentUser ? (
<>
<Link to="/home" onClick={toggleMenu}>Home</Link>
<Link to="/dashboard" onClick={toggleMenu}>Menu</Link>
<Link to="/Meal" onClick={toggleMenu}>Meal Planning</Link>
<Link to="/daily-plan-edit" onClick={toggleMenu}>Edit Daily Plan</Link>
<Link to="/healthnews" onClick={toggleMenu}>Health News</Link>
<Link to="/survey" onClick={toggleMenu}>Fitness Roadmap</Link>
<Link to="/community" onClick={toggleMenu}>Community</Link>
<Link to="/home" onClick={toggleMenu}>
Home
</Link>
<Link to="/dashboard" onClick={toggleMenu}>
Menu
</Link>
<Link to="/Meal" onClick={toggleMenu}>
Meal Planning
</Link>
<Link to="/daily-plan-edit" onClick={toggleMenu}>
Edit Daily Plan
</Link>
<Link to="/healthnews" onClick={toggleMenu}>
Health News
</Link>
<Link to="/survey" onClick={toggleMenu}>
Fitness Roadmap
</Link>
<Link to="/community" onClick={toggleMenu}>
Community
</Link>

<Link to="/HealthFAQ" onClick={toggleMenu}>HealthFAQ</Link>
<Link to="/HealthFAQ" onClick={toggleMenu}>
HealthFAQ
</Link>

{/* Recipes Dropdown */}
<div className="dropdown">
Expand All @@ -54,10 +70,21 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
</span>
{openDropdown === "recipes" && (
<div className="dropdown-content">
<Link to="/CreateRecipe" onClick={toggleMenu}>Create Recipe</Link>
<Link to="/SearchRecipes" onClick={toggleMenu}>Search Recipes</Link>
<Link to="/RecipeRating" onClick={toggleMenu}>Recipe Rating</Link>
<Link to="/UiTimer" onClick={toggleMenu}>UiTimer</Link>
<Link to="/CreateRecipe" onClick={toggleMenu}>
Create Recipe
</Link>
<Link to="/SearchRecipes" onClick={toggleMenu}>
Search Recipes
</Link>
<Link to="/recipe" onClick={toggleMenu}>
Recipe
</Link>
<Link to="/RecipeRating" onClick={toggleMenu}>
Recipe Rating
</Link>
<Link to="/UiTimer" onClick={toggleMenu}>
UiTimer
</Link>
</div>
)}
</div>
Expand All @@ -72,19 +99,42 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
</span>
{openDropdown === "user" && (
<div className="dropdown-content">
<Link to="/DietaryRequirements" onClick={toggleMenu}>Dietary Preference</Link>
<Link to="/userProfile" onClick={toggleMenu}>Profile</Link>
<Link to="/DietaryRequirements" onClick={toggleMenu}>
Dietary Preference
</Link>
<Link to="/userProfile" onClick={toggleMenu}>
Profile
</Link>
</div>
)}
</div>

<Link to="/ScanProducts" onClick={toggleMenu}>Scan Products</Link>
<Link to="/ScanBarcode" onClick={toggleMenu}>Scan Barcode</Link>
<Link to="/preferences" onClick={toggleMenu}>Allergies & Intolerances</Link>
<Link to="/symptomassessment" onClick={toggleMenu}>Symptom Assessment</Link>
<Link to="/healthtools" onClick={toggleMenu}>Health Tools</Link>
<Link to="/settings" onClick={toggleMenu}>Settings</Link>
<button onClick={() => { logOut(); toggleMenu(); }}>Log Out</button>
<Link to="/ScanProducts" onClick={toggleMenu}>
Scan Products
</Link>
<Link to="/ScanBarcode" onClick={toggleMenu}>
Scan Barcode
</Link>
<Link to="/preferences" onClick={toggleMenu}>
Allergies & Intolerances
</Link>
<Link to="/symptomassessment" onClick={toggleMenu}>
Symptom Assessment
</Link>
<Link to="/healthtools" onClick={toggleMenu}>
Health Tools
</Link>
<Link to="/settings" onClick={toggleMenu}>
Settings
</Link>
<button
onClick={() => {
logOut();
toggleMenu();
}}
>
Log Out
</button>
<TextToSpeech />
<VoiceNavigation />
</>
Expand All @@ -96,13 +146,27 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
<Link to="/signUp" onClick={toggleMenu}>Create Account</Link>
<TextToSpeech />
<VoiceNavigation /> */}
<Link to="/home" onClick={toggleMenu}>Home</Link>
<Link to="/dashboard" onClick={toggleMenu}>Menu</Link>
<Link to="/Meal" onClick={toggleMenu}>Meal Planning</Link>
<Link to="/daily-plan-edit" onClick={toggleMenu}>Edit Daily Plan</Link>
<Link to="/healthnews" onClick={toggleMenu}>Health News</Link>
<Link to="/survey" onClick={toggleMenu}>Fitness Roadmap</Link>
<Link to="/community" onClick={toggleMenu}>Community</Link>
<Link to="/home" onClick={toggleMenu}>
Home
</Link>
<Link to="/dashboard" onClick={toggleMenu}>
Menu
</Link>
<Link to="/Meal" onClick={toggleMenu}>
Meal Planning
</Link>
<Link to="/daily-plan-edit" onClick={toggleMenu}>
Edit Daily Plan
</Link>
<Link to="/healthnews" onClick={toggleMenu}>
Health News
</Link>
<Link to="/survey" onClick={toggleMenu}>
Fitness Roadmap
</Link>
<Link to="/community" onClick={toggleMenu}>
Community
</Link>

{/* Recipes Dropdown */}
<div className="dropdown">
Expand All @@ -114,11 +178,21 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
</span>
{openDropdown === "recipes" && (
<div className="dropdown-content">
<Link to="/CreateRecipe" onClick={toggleMenu}>Create Recipe</Link>
<Link to="/SearchRecipes" onClick={toggleMenu}>Search Recipes</Link>
<Link to="/RecipeRating" onClick={toggleMenu}>Recipe Rating</Link>
<Link to="/UiTimer" onClick={toggleMenu}>UiTimer</Link>
<Link to="/HealthFAQ" onClick={toggleMenu}>HealthFAQ</Link>
<Link to="/CreateRecipe" onClick={toggleMenu}>
Create Recipe
</Link>
<Link to="/SearchRecipes" onClick={toggleMenu}>
Search Recipes
</Link>
<Link to="/RecipeRating" onClick={toggleMenu}>
Recipe Rating
</Link>
<Link to="/UiTimer" onClick={toggleMenu}>
UiTimer
</Link>
<Link to="/HealthFAQ" onClick={toggleMenu}>
HealthFAQ
</Link>
</div>
)}
</div>
Expand All @@ -133,19 +207,42 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
</span>
{openDropdown === "user" && (
<div className="dropdown-content">
<Link to="/DietaryRequirements" onClick={toggleMenu}>Dietary Preference</Link>
<Link to="/userProfile" onClick={toggleMenu}>Profile</Link>
<Link to="/DietaryRequirements" onClick={toggleMenu}>
Dietary Preference
</Link>
<Link to="/userProfile" onClick={toggleMenu}>
Profile
</Link>
</div>
)}
</div>

<Link to="/ScanProducts" onClick={toggleMenu}>Scan Products</Link>
<Link to="/ScanBarcode" onClick={toggleMenu}>Scan Barcode</Link>
<Link to="/preferences" onClick={toggleMenu}>Allergies & Intolerances</Link>
<Link to="/symptomassessment" onClick={toggleMenu}>Symptom Assessment</Link>
<Link to="/healthtools" onClick={toggleMenu}>Health Tools</Link>
<Link to="/settings" onClick={toggleMenu}>Settings</Link>
<button onClick={() => { logOut(); toggleMenu(); }}>Log Out</button>
<Link to="/ScanProducts" onClick={toggleMenu}>
Scan Products
</Link>
<Link to="/ScanBarcode" onClick={toggleMenu}>
Scan Barcode
</Link>
<Link to="/preferences" onClick={toggleMenu}>
Allergies & Intolerances
</Link>
<Link to="/symptomassessment" onClick={toggleMenu}>
Symptom Assessment
</Link>
<Link to="/healthtools" onClick={toggleMenu}>
Health Tools
</Link>
<Link to="/settings" onClick={toggleMenu}>
Settings
</Link>
<button
onClick={() => {
logOut();
toggleMenu();
}}
>
Log Out
</button>
<TextToSpeech />
<VoiceNavigation />
</>
Expand Down
13 changes: 13 additions & 0 deletions src/routes/CreateRecipe/data/db/db.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,16 @@ export const getRecipes = async () => {
console.log("Fetched from IDB:", all); // Add this line
return all;
};

export const deleteRecipe = async (id) => {
try {
const db = await initDB();
const tx = db.transaction("recipes", "readwrite");
const store = tx.objectStore("recipes");
await store.delete(id);
await tx.done;
console.log(`Recipe with ID ${id} deleted successfully.`);
} catch (error) {
console.error("Error deleting recipe:", error);
}
};
Loading