lasse/groceries
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add version number and fix warnings

Browse Source
This commit is contained in:
lasse 2025-05-28 12:37:03 +02:00
parent 521a0d6937
commit 2afa7dbebf
11 changed files with 332 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
backend/main.py
View File

@ -5,14 +5,15 @@ from sqlalchemy import text
from typing import List
import models, schemas
from database import engine, get_db
from version import __version__, __app_name__, __description__
# Create database tables
models.Base.metadata.create_all(bind=engine)
app = FastAPI(
title="Product Tracker API",
description="API for tracking product prices and shopping events",
version="1.0.0"
title=__app_name__,
description=__description__,
version=__version__
)
# CORS middleware for React frontend
@ -92,7 +93,7 @@ def build_shopping_event_response(event: models.ShoppingEvent, db: Session) -> s
# Root endpoint
@app.get("/")
def read_root():
return {"message": "Product Tracker API", "version": "1.0.0"}
return {"message": __app_name__, "version": __version__, "name": "Groceries Tracker Backend"}
# Product endpoints
@app.post("/products/", response_model=schemas.Product)

8
backend/version.py Normal file
View File

@ -0,0 +1,8 @@
"""
Version configuration for Groceries Tracker Backend
Single source of truth for version information
"""
__version__ = "1.0.0"
__app_name__ = "Groceries Tracker API"
__description__ = "API for tracking grocery shopping events, products, and expenses"

4
frontend/package.json
View File

@ -1,6 +1,6 @@
{
"name": "product-tracker-frontend",
"version": "0.1.0",
"name": "groceries-tracker-frontend",
"version": "1.0.1",
"private": true,
"dependencies": {
"@types/node": "^20.10.5",

55
frontend/src/App.tsx
View File

@ -7,8 +7,9 @@ import ShoppingEventList from './components/ShoppingEventList';
import BrandList from './components/BrandList';
import GroceryCategoryList from './components/GroceryCategoryList';
import ImportExportModal from './components/ImportExportModal';
import AboutModal from './components/AboutModal';
function Navigation({ onImportExportClick }: { onImportExportClick: () => void }) {
function Navigation({ onImportExportClick, onAboutClick }: { onImportExportClick: () => void; onAboutClick: () => void }) {
const location = useLocation();
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@ -74,8 +75,8 @@ function Navigation({ onImportExportClick }: { onImportExportClick: () => void }
</button>
</div>
{/* Import/Export Button */}
<div className="hidden sm:flex items-center">
{/* Desktop Action Buttons */}
<div className="hidden sm:flex items-center space-x-2">
<button
onClick={onImportExportClick}
className="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-100 hover:text-white hover:bg-blue-700 rounded-md transition-colors"
@ -85,6 +86,15 @@ function Navigation({ onImportExportClick }: { onImportExportClick: () => void }
</svg>
<span className="hidden sm:inline">Import / Export</span>
</button>
<button
onClick={onAboutClick}
className="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-100 hover:text-white hover:bg-blue-700 rounded-md transition-colors"
>
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span className="hidden sm:inline">About</span>
</button>
</div>
</div>
@ -95,6 +105,34 @@ function Navigation({ onImportExportClick }: { onImportExportClick: () => void }
{navLinks.map(({ path, label }) => (
<NavLink key={path} path={path} label={label} mobile />
))}
{/* Mobile Action Buttons */}
<div className="border-t border-gray-200 pt-3 mt-3 space-y-1">
<button
onClick={() => {
onImportExportClick();
setIsMobileMenuOpen(false);
}}
className="block w-full text-left px-3 py-2 text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-gray-50"
>
<svg className="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
</svg>
Import / Export
</button>
<button
onClick={() => {
onAboutClick();
setIsMobileMenuOpen(false);
}}
className="block w-full text-left px-3 py-2 text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-gray-50"
>
<svg className="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
About
</button>
</div>
</div>
</div>
)}
@ -105,6 +143,7 @@ function Navigation({ onImportExportClick }: { onImportExportClick: () => void }
function App() {
const [showImportExportModal, setShowImportExportModal] = useState(false);
const [showAboutModal, setShowAboutModal] = useState(false);
const handleDataChanged = () => {
// This will be called when data is imported, but since we're at the app level,
@ -115,7 +154,10 @@ function App() {
return (
<Router>
<div className="min-h-screen bg-gray-50">
<Navigation onImportExportClick={() => setShowImportExportModal(true)} />
<Navigation
onImportExportClick={() => setShowImportExportModal(true)}
onAboutClick={() => setShowAboutModal(true)}
/>
<main className="py-6 md:py-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<Routes>
@ -134,6 +176,11 @@ function App() {
onClose={() => setShowImportExportModal(false)}
onDataChanged={handleDataChanged}
/>
<AboutModal
isOpen={showAboutModal}
onClose={() => setShowAboutModal(false)}
/>
</div>
</Router>
);

154
frontend/src/components/AboutModal.tsx Normal file
View File

@ -0,0 +1,154 @@
import React, { useState, useEffect } from 'react';
import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
import { VERSION } from '../config/version';
// Use the same API base URL as other API calls
const API_BASE_URL = process.env.NODE_ENV === 'production'
? '/api' // Use nginx proxy in production
: 'http://localhost:8000'; // Direct backend connection in development
interface AboutModalProps {
isOpen: boolean;
onClose: () => void;
}
const AboutModal: React.FC<AboutModalProps> = ({ isOpen, onClose }) => {
// Use body scroll lock when modal is open
useBodyScrollLock(isOpen);
const [backendVersion, setBackendVersion] = useState<string>('Loading...');
useEffect(() => {
if (isOpen) {
fetchBackendVersion();
}
}, [isOpen]);
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
onClose();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, onClose]);
const fetchBackendVersion = async () => {
try {
const response = await fetch(`${API_BASE_URL}/`);
const data = await response.json();
setBackendVersion(data.version || 'Unknown');
} catch (error) {
console.error('Error fetching backend version:', error);
setBackendVersion('Error loading');
}
};
if (!isOpen) return null;
return (
<div
className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
onClick={(e) => {
// Close modal if clicking on backdrop
if (e.target === e.currentTarget) {
onClose();
}
}}
>
<div
className="relative top-20 mx-auto p-6 border w-full max-w-md shadow-lg rounded-md bg-white"
onClick={(e) => e.stopPropagation()}
>
<div className="mt-3">
<div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-semibold text-gray-900">
About {VERSION.name}
</h3>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 p-1"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="space-y-4">
{/* App Info */}
<div className="text-center mb-6">
<div className="w-16 h-16 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
</div>
<p className="text-gray-600 text-sm">
A comprehensive grocery shopping tracker to manage your shopping events, products, and expenses.
</p>
</div>
{/* Version Information */}
<div className="bg-gray-50 rounded-lg p-4">
<h4 className="font-medium text-gray-900 mb-3">Version Information</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-600">Frontend:</span>
<span className="font-mono text-gray-900">v{VERSION.frontend}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Backend:</span>
<span className="font-mono text-gray-900">v{backendVersion}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Build Date:</span>
<span className="font-mono text-gray-900">{VERSION.buildDate}</span>
</div>
</div>
</div>
{/* Features */}
<div className="bg-blue-50 rounded-lg p-4">
<h4 className="font-medium text-blue-900 mb-3">Key Features</h4>
<ul className="text-sm text-blue-800 space-y-1">
<li>• Track shopping events and expenses</li>
<li>• Manage products, brands, and categories</li>
<li>• Mobile-responsive design</li>
<li>• Import/Export data functionality</li>
<li>• Real-time calculations and analytics</li>
</ul>
</div>
{/* Technical Info */}
<div className="bg-green-50 rounded-lg p-4">
<h4 className="font-medium text-green-900 mb-3">Technology Stack</h4>
<div className="text-sm text-green-800 space-y-1">
<div><strong>Frontend:</strong> React, TypeScript, Tailwind CSS</div>
<div><strong>Backend:</strong> FastAPI, Python, SQLite</div>
<div><strong>Mobile:</strong> Responsive web design</div>
</div>
</div>
</div>
{/* Close Button */}
<div className="flex justify-end pt-6 mt-6 border-t border-gray-200">
<button
onClick={onClose}
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md"
>
Close
</button>
</div>
</div>
</div>
</div>
);
};
export default AboutModal;

50
frontend/src/components/AddBrandModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { brandApi } from '../services/api';
import { Brand } from '../types';
import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
@ -40,27 +40,7 @@ const AddBrandModal: React.FC<AddBrandModalProps> = ({ isOpen, onClose, onBrandA
setError('');
}, [editBrand, isOpen]);
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
onClose();
} else if (event.key === 'Enter' && !event.shiftKey && !loading) {
event.preventDefault();
if (formData.name.trim()) {
handleSubmit(event as any);
}
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, formData, loading, onClose]);
const handleSubmit = async (e: React.FormEvent) => {
const handleSubmit = useCallback(async (e: React.FormEvent) => {
e.preventDefault();
if (!formData.name.trim()) {
setError('Please enter a brand name');
@ -94,7 +74,31 @@ const AddBrandModal: React.FC<AddBrandModalProps> = ({ isOpen, onClose, onBrandA
} finally {
setLoading(false);
}
};
}, [isEditMode, editBrand, formData.name, onBrandAdded, onClose]);
// Keyboard event handling
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (!isOpen) return;
if (event.key === 'Escape') {
onClose();
} else if (event.key === 'Enter' && !loading) {
event.preventDefault();
if (formData.name.trim()) {
handleSubmit(event as any);
}
}
};
if (isOpen) {
document.addEventListener('keydown', handleKeyDown);
}
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, formData.name, loading, onClose, handleSubmit]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;

42
frontend/src/components/AddGroceryCategoryModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { GroceryCategory, GroceryCategoryCreate } from '../types';
import { groceryCategoryApi } from '../services/api';
import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
@ -28,25 +28,7 @@ const AddGroceryCategoryModal: React.FC<AddGroceryCategoryModalProps> = ({ categ
}
}, [category]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
onClose();
} else if (event.key === 'Enter' && !event.shiftKey && !loading) {
event.preventDefault();
if (formData.name.trim()) {
handleSubmit(event as any);
}
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [formData, loading, onClose]);
const handleSubmit = async (e: React.FormEvent) => {
const handleSubmit = useCallback(async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setMessage('');
@ -70,7 +52,25 @@ const AddGroceryCategoryModal: React.FC<AddGroceryCategoryModalProps> = ({ categ
} finally {
setLoading(false);
}
};
}, [isEditMode, category, formData, onClose]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
onClose();
} else if (event.key === 'Enter' && !event.shiftKey && !loading) {
event.preventDefault();
if (formData.name.trim()) {
handleSubmit(event as any);
}
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [formData, loading, onClose, handleSubmit]);
return (
<div

53
frontend/src/components/AddShopModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { shopApi, brandApi, brandInShopApi } from '../services/api';
import { Shop, Brand, BrandInShop } from '../types';
import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
@ -86,31 +86,7 @@ const AddShopModal: React.FC<AddShopModalProps> = ({ isOpen, onClose, onShopAdde
setError('');
}, [editShop, isOpen]);
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
onClose();
} else if (event.key === 'Enter' && !event.shiftKey && !loading) {
// Only trigger submit if not in a textarea and form is valid
const target = event.target as HTMLElement;
if (target.tagName !== 'TEXTAREA') {
event.preventDefault();
if (formData.name.trim() && formData.city.trim()) {
handleSubmit(event as any);
}
}
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, formData, loading, onClose]);
const handleSubmit = async (e: React.FormEvent) => {
const handleSubmit = useCallback(async (e: React.FormEvent) => {
e.preventDefault();
if (!formData.name.trim() || !formData.city.trim()) {
setError('Please fill in all required fields');
@ -131,7 +107,7 @@ const AddShopModal: React.FC<AddShopModalProps> = ({ isOpen, onClose, onShopAdde
let shopId: number;
if (isEditMode && editShop) {
const updatedShop = await shopApi.update(editShop.id, shopData);
await shopApi.update(editShop.id, shopData);
shopId = editShop.id;
} else {
const newShop = await shopApi.create(shopData);
@ -180,7 +156,28 @@ const AddShopModal: React.FC<AddShopModalProps> = ({ isOpen, onClose, onShopAdde
} finally {
setLoading(false);
}
};
}, [isEditMode, editShop, formData, onShopAdded, onClose]);
// Keyboard event handling
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (!isOpen) return;
if (event.key === 'Escape') {
onClose();
} else if (event.key === 'Enter' && !event.shiftKey && !loading) {
event.preventDefault();
if (formData.name.trim() && formData.city.trim()) {
handleSubmit(event as any);
}
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, formData, loading, onClose, handleSubmit]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;

1
frontend/src/components/GroceryCategoryList.tsx
View File

@ -1,5 +1,4 @@
import React, { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { GroceryCategory } from '../types';
import { groceryCategoryApi } from '../services/api';
import AddGroceryCategoryModal from './AddGroceryCategoryModal';

66
frontend/src/components/ShopList.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Shop, BrandInShop } from '../types';
import { shopApi, brandInShopApi } from '../services/api';
@ -21,6 +21,36 @@ const ShopList: React.FC = () => {
const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 });
const [shopBrands, setShopBrands] = useState<Record<number, BrandInShop[]>>({});
const loadShopBrands = useCallback(async (shopId: number) => {
try {
const response = await brandInShopApi.getByShop(shopId);
setShopBrands(prev => ({
...prev,
[shopId]: response.data
}));
} catch (err) {
console.error('Error loading shop brands:', err);
}
}, []);
const fetchShops = useCallback(async () => {
try {
setLoading(true);
const response = await shopApi.getAll();
setShops(response.data);
// Load brands for all shops
for (const shop of response.data) {
loadShopBrands(shop.id);
}
} catch (err) {
setError('Failed to fetch shops');
console.error('Error fetching shops:', err);
} finally {
setLoading(false);
}
}, [loadShopBrands]);
useEffect(() => {
fetchShops();
@ -30,7 +60,7 @@ const ShopList: React.FC = () => {
// Remove the parameter from URL
setSearchParams({});
}
}, [searchParams, setSearchParams]);
}, [searchParams, setSearchParams, fetchShops]);
// Handle clicking outside popup to close it
useEffect(() => {
@ -51,36 +81,6 @@ const ShopList: React.FC = () => {
};
}, [showBrandsPopup]);
const fetchShops = async () => {
try {
setLoading(true);
const response = await shopApi.getAll();
setShops(response.data);
// Load brands for all shops
for (const shop of response.data) {
loadShopBrands(shop.id);
}
} catch (err) {
setError('Failed to fetch shops');
console.error('Error fetching shops:', err);
} finally {
setLoading(false);
}
};
const loadShopBrands = async (shopId: number) => {
try {
const response = await brandInShopApi.getByShop(shopId);
setShopBrands(prev => ({
...prev,
[shopId]: response.data
}));
} catch (err) {
console.error('Error loading shop brands:', err);
}
};
const handleShopAdded = () => {
fetchShops(); // Refresh the shops list
};
@ -123,7 +123,6 @@ const ShopList: React.FC = () => {
const brands = shopBrands[shop.id] || [];
if (brands.length === 0) return;
const rect = mouseEvent.currentTarget.getBoundingClientRect();
const popupWidth = 300;
const popupHeight = 200;
@ -156,7 +155,6 @@ const ShopList: React.FC = () => {
if (brands.length === 0) return;
mouseEvent.stopPropagation();
const rect = mouseEvent.currentTarget.getBoundingClientRect();
const popupWidth = 300;
const popupHeight = 200;

7
frontend/src/config/version.ts Normal file
View File

@ -0,0 +1,7 @@
import packageJson from '../../package.json';
export const VERSION = {
frontend: packageJson.version,
buildDate: new Date().toISOString().split('T')[0], // YYYY-MM-DD format
name: "Groceries Tracker"
};