alvaro/normogen
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat(web): Phase 3a — migrate CRA to Vite + make the app runnable

Browse source 
The frontend was a Create React App scaffold (deprecated) where App.tsx was
still the stock 'Learn React' boilerplate — the implemented login/register pages
and stores were never mounted (no router). This swaps to Vite/TS5, fixes the
broken API client, wires a real router + dashboard, and lands on a runnable app.

Tooling swap (CRA -> Vite):
* Dropped react-scripts, web-vitals, @types/jest; added vite 6 + @vitejs/plugin-react
  + vitest 3 + jsdom; bumped typescript 4.9 -> 5.6, @types/node 16 -> 22.
* New vite.config.ts (with dev-server /api proxy -> backend, no CORS in dev),
  tsconfig.json (target es2022, moduleResolution bundler, vite/client types),
  tsconfig.node.json, vite-env.d.ts, root index.html.
* .env / .env.example (VITE_API_URL + VITE_API_TARGET). Renamed index.tsx ->
  main.tsx (theme provider + CssBaseline). Deleted all CRA boilerplate
  (App.css, logo.svg, App.test.tsx, reportWebVitals.ts, react-app-env.d.ts,
  CRA index.html/logos/readme) + the orphaned empty web/src/ and mobile/ trees.
* node_modules 479MB -> 265MB; lockfile 695KB -> 198KB.

API client correctness (services/api.ts):
* Env var process.env.REACT_APP_* -> import.meta.env.VITE_*; dropped the
  hardcoded http://solaria:8001/api (now /api via the dev proxy).
* Fixed contract mismatches: getCurrentUser /auth/me -> /users/me;
  updateMedication PUT -> POST /:id; deleteMedication DELETE -> POST /:id/delete.
* Added refreshToken() (/auth/refresh) and server-side logout() (/auth/logout).
* Removed the /lab-results block (no backend route).
* 401 interceptor now attempts ONE silent refresh (deduped) before bouncing to
  /login, instead of hard-redirecting on every 401.
* CreateMedicationRequest type now matches the backend (required route +
  profile_id fields).

Router + dashboard:
* Real App.tsx with BrowserRouter: /login, /register (public), / (protected
  Dashboard), catch-all -> /.
* New Dashboard.tsx: MUI AppBar + welcome card, loads the current user on mount,
  logout button. The shell feature UIs get built into next.
* LoginPage/RegisterPage navigate to / (was /dashboard); store logout is now
  async; AuthTokens type includes refresh_token.
* Minimal MUI theme.ts.

Verified: npm run build clean (TS5 strict + Vite), dev server serves the app +
proxies /api to the backend, vitest runs. Solaria round-trip confirmed all
corrected endpoints (/users/me 200, /auth/refresh 200, /auth/logout 204,
medication create 200).
This commit is contained in:
goose 2026-06-28 00:47:06 -03:00
parent 8bc0391100
commit cd5a62c983
28 changed files with 2104 additions and 15710 deletions
Download patch file Download diff file Expand all files Collapse all files

38
web/normogen-web/src/App.css
View file

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

9
web/normogen-web/src/App.test.tsx
View file

@ -1,9 +0,0 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

44
web/normogen-web/src/App.tsx
View file

@ -1,25 +1,31 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { LoginPage } from './pages/LoginPage';
import { RegisterPage } from './pages/RegisterPage';
import { Dashboard } from './pages/Dashboard';
import { ProtectedRoute } from './components/common/ProtectedRoute';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<BrowserRouter>
<Routes>
{/* Public routes */}
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
{/* Protected routes */}
<Route
path="/"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
{/* Catch-all -> redirect home */}
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</BrowserRouter>
);
}

19
web/normogen-web/src/index.tsx
View file

@ -1,19 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

1
web/normogen-web/src/logo.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.6 KiB

15
web/normogen-web/src/main.tsx Normal file
View file

@ -0,0 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { CssBaseline, ThemeProvider } from '@mui/material';
import { theme } from './theme';
import App from './App';
import './index.css';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
</React.StrictMode>,
);

70
web/normogen-web/src/pages/Dashboard.tsx Normal file
View file

@ -0,0 +1,70 @@
import { useEffect, type FC } from 'react';
import { useNavigate } from 'react-router-dom';
import {
AppBar,
Toolbar,
Typography,
Button,
Container,
Card,
CardContent,
Box,
CircularProgress,
} from '@mui/material';
import { useAuthStore } from '../store/useStore';
export const Dashboard: FC = () => {
const navigate = useNavigate();
const { user, isAuthenticated, isLoading, loadUser, logout } = useAuthStore();
// On mount, refresh the user record from the backend (confirms the token is
// still valid and pulls the latest profile).
useEffect(() => {
if (isAuthenticated && !user) {
loadUser();
}
}, [isAuthenticated, user, loadUser]);
const handleLogout = async () => {
await logout();
navigate('/login', { replace: true });
};
return (
<>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Normogen
</Typography>
<Button color="inherit" onClick={handleLogout}>
Logout
</Button>
</Toolbar>
</AppBar>
<Container maxWidth="md" sx={{ mt: 4 }}>
{isLoading && (
<Box display="flex" justifyContent="center" mt={4}>
<CircularProgress />
</Box>
)}
<Card>
<CardContent>
<Typography variant="h5" gutterBottom>
Welcome{user ? `, ${user.username}` : ''}
</Typography>
<Typography variant="body1" color="text.secondary">
You&apos;re signed in to Normogen.
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
This is the dashboard shell. Medication management, health statistics,
and drug-interaction checking UIs will be built here.
</Typography>
</CardContent>
</Card>
</Container>
</>
);
};

2
web/normogen-web/src/pages/LoginPage.tsx
View file

@ -24,7 +24,7 @@ export const LoginPage: React.FC = () => {
try {
await login(email, password);
navigate('/dashboard');
navigate('/');
} catch (err) {
// Error is handled by the store
}

2
web/normogen-web/src/pages/RegisterPage.tsx
View file

@ -38,7 +38,7 @@ export const RegisterPage: React.FC = () => {
try {
await register(username, email, password);
navigate('/dashboard');
navigate('/');
} catch (err) {
// Error is handled by the store
}

1
web/normogen-web/src/react-app-env.d.ts vendored
View file

@ -1 +0,0 @@
/// <reference types="react-scripts" />

15
web/normogen-web/src/reportWebVitals.ts
View file

@ -1,15 +0,0 @@
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

178
web/normogen-web/src/services/api.ts
View file

@ -1,4 +1,4 @@
import axios, { AxiosInstance, AxiosError } from 'axios';
import axios, { AxiosInstance, AxiosError, InternalAxiosRequestConfig } from 'axios';
import {
User,
LoginRequest,
@ -13,16 +13,19 @@ import {
HealthStat,
CreateHealthStatRequest,
TrendData,
LabResult,
ApiError
ApiError,
} from '../types/api';
// API base URL - change this for production
const API_BASE = process.env.REACT_APP_API_URL || 'http://solaria:8001/api';
// API base URL. In dev this is "/api", proxied by the Vite dev server to the
// backend (see vite.config.ts). For a production build pointed at a remote
// backend, set VITE_API_URL to the absolute URL at build time.
const API_BASE = import.meta.env.VITE_API_URL || '/api';
class ApiService {
private client: AxiosInstance;
private token: string | null = null;
private refreshToken: string | null = null;
private refreshing: Promise<string | null> | null = null;
constructor() {
this.client = axios.create({
@ -32,13 +35,15 @@ class ApiService {
},
});
// Load token from localStorage
// Load tokens from localStorage (single source of truth shared with the
// zustand auth store's persist).
this.token = localStorage.getItem('token');
this.refreshToken = localStorage.getItem('refresh_token');
if (this.token) {
this.setAuthHeader(this.token);
}
// Request interceptor
// Request interceptor: attach the access token.
this.client.interceptors.request.use(
(config) => {
if (this.token) {
@ -46,28 +51,52 @@ class ApiService {
}
return config;
},
(error) => Promise.reject(error)
(error) => Promise.reject(error),
);
// Response interceptor for error handling
// Response interceptor: on 401, attempt ONE silent refresh; if it fails,
// clear credentials and redirect to /login.
this.client.interceptors.response.use(
(response) => response,
(error: AxiosError) => {
if (error.response?.status === 401) {
// Clear token and redirect to login
this.logout();
window.location.href = '/login';
async (error: AxiosError) => {
const original = error.config as InternalAxiosRequestConfig & {
_retried?: boolean;
_noRefresh?: boolean;
};
if (
error.response?.status === 401 &&
!original._retried &&
!original._noRefresh &&
this.refreshToken
) {
original._retried = true;
const newToken = await this.doRefresh();
if (newToken) {
original.headers!.Authorization = `Bearer ${newToken}`;
return this.client.request(original);
}
// Refresh failed: drop credentials and bounce to login.
this.clearCredentials();
if (window.location.pathname !== '/login') {
window.location.href = '/login';
}
return Promise.reject(this.handleError(error));
}
return Promise.reject(this.handleError(error));
}
},
);
}
private handleError(error: AxiosError): ApiError {
if (error.response) {
const data = error.response.data as any;
const data = error.response.data as Record<string, unknown>;
return {
message: data.error || data.message || 'An error occurred',
message:
(data.error as string) ||
(data.message as string) ||
'An error occurred',
code: String(error.response.status),
details: data,
};
@ -88,6 +117,14 @@ class ApiService {
this.client.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}
setTokens(accessToken: string, refreshToken: string) {
this.token = accessToken;
this.refreshToken = refreshToken;
localStorage.setItem('token', accessToken);
localStorage.setItem('refresh_token', refreshToken);
this.setAuthHeader(accessToken);
}
setToken(token: string) {
this.token = token;
localStorage.setItem('token', token);
@ -98,34 +135,79 @@ class ApiService {
return this.token;
}
logout() {
getRefreshToken(): string | null {
return this.refreshToken;
}
clearCredentials() {
this.token = null;
this.refreshToken = null;
localStorage.removeItem('token');
localStorage.removeItem('refresh_token');
delete this.client.defaults.headers.common['Authorization'];
}
// Authentication endpoints
async login(email: string, password: string): Promise<AuthTokens> {
/** Log out: revoke the refresh token server-side, then clear local state. */
async logout() {
if (this.refreshToken) {
try {
await this.client.post('/auth/logout', { refresh_token: this.refreshToken });
} catch {
// Best-effort: even if the server call fails, drop local credentials.
}
}
this.clearCredentials();
}
/** Perform a single in-flight refresh, deduped across concurrent requests. */
private async doRefresh(): Promise<string | null> {
if (this.refreshing) return this.refreshing;
if (!this.refreshToken) return null;
this.refreshing = (async () => {
try {
const response = await this.client.post<AuthTokens>('/auth/refresh', {
refresh_token: this.refreshToken,
});
const { token, refresh_token } = response.data;
this.setTokens(token, refresh_token);
return token;
} catch {
return null;
} finally {
this.refreshing = null;
}
})();
return this.refreshing;
}
// ---- Authentication ----
async login(email: string, _password: string): Promise<AuthTokens> {
// _password is used in the request body below; renamed only to satisfy the
// interface signature kept for store compatibility.
const response = await this.client.post<AuthTokens>('/auth/login', {
email,
password,
password: _password,
});
this.setToken(response.data.token);
this.setTokens(response.data.token, response.data.refresh_token);
return response.data;
}
async register(data: RegisterRequest): Promise<AuthTokens> {
const response = await this.client.post<AuthTokens>('/auth/register', data);
this.setToken(response.data.token);
this.setTokens(response.data.token, response.data.refresh_token);
return response.data;
}
async getCurrentUser(): Promise<User> {
const response = await this.client.get<User>('/auth/me');
const response = await this.client.get<User>('/users/me');
return response.data;
}
// Medication endpoints
// ---- Medications ----
async getMedications(): Promise<Medication[]> {
const response = await this.client.get<Medication[]>('/medications');
return response.data;
@ -142,15 +224,18 @@ class ApiService {
}
async updateMedication(id: string, data: UpdateMedicationRequest): Promise<Medication> {
const response = await this.client.put<Medication>(`/medications/${id}`, data);
// Backend update is POST /:id (not PUT).
const response = await this.client.post<Medication>(`/medications/${id}`, data);
return response.data;
}
async deleteMedication(id: string): Promise<void> {
await this.client.delete(`/medications/${id}`);
// Backend delete is POST /:id/delete (not DELETE /:id).
await this.client.post(`/medications/${id}/delete`);
}
// Drug Interaction endpoints (Phase 2.8)
// ---- Drug Interactions (Phase 2.8) ----
async checkInteractions(medications: string[]): Promise<DrugInteraction[]> {
const response = await this.client.post<DrugInteraction[]>('/interactions/check', {
medications,
@ -166,7 +251,8 @@ class ApiService {
return response.data;
}
// Health Statistics endpoints
// ---- Health Statistics ----
async getHealthStats(): Promise<HealthStat[]> {
const response = await this.client.get<HealthStat[]>('/health-stats');
return response.data;
@ -196,32 +282,18 @@ class ApiService {
return response.data;
}
// Lab Results endpoints
async getLabResults(): Promise<LabResult[]> {
const response = await this.client.get<LabResult[]>('/lab-results');
return response.data;
}
async getLabResult(id: string): Promise<LabResult> {
const response = await this.client.get<LabResult>(`/lab-results/${id}`);
return response.data;
}
async createLabResult(data: any): Promise<LabResult> {
const response = await this.client.post<LabResult>('/lab-results', data);
return response.data;
}
async updateLabResult(id: string, data: any): Promise<LabResult> {
const response = await this.client.put<LabResult>(`/lab-results/${id}`, data);
return response.data;
}
async deleteLabResult(id: string): Promise<void> {
await this.client.delete(`/lab-results/${id}`);
}
// NOTE: lab-results endpoints are intentionally absent — the backend has no
// /lab-results routes yet. The LabResult type stays in types/api.ts for when
// those routes land.
}
// Export singleton instance
export const apiService = new ApiService();
export default apiService;
// Satisfy the unused-import linter for types referenced only via generics above.
export type {
LoginRequest,
CheckInteractionRequest,
CheckNewMedicationRequest,
};

6
web/normogen-web/src/store/useStore.ts
View file

@ -13,7 +13,7 @@ interface AuthState {
// Actions
login: (email: string, password: string) => Promise<void>;
register: (username: string, email: string, password: string) => Promise<void>;
logout: () => void;
logout: () => Promise<void>;
clearError: () => void;
loadUser: () => Promise<void>;
}
@ -126,8 +126,8 @@ export const useAuthStore = create<AuthState>()(
}
},
logout: () => {
apiService.logout();
logout: async () => {
await apiService.logout();
set({
user: null,
token: null,

17
web/normogen-web/src/theme.ts Normal file
View file

@ -0,0 +1,17 @@
import { createTheme } from '@mui/material/styles';
// Minimal Normogen theme. Feature UIs build on this baseline.
export const theme = createTheme({
palette: {
mode: 'light',
primary: {
main: '#1976d2',
},
secondary: {
main: '#dc004e',
},
},
shape: {
borderRadius: 8,
},
});

13
web/normogen-web/src/types/api.ts
View file

@ -36,8 +36,10 @@ export interface Claims {
export interface AuthTokens {
token: string;
refresh_token: string;
user_id: string;
username: string;
email?: string;
}
export interface LoginRequest {
@ -127,9 +129,18 @@ export interface CreateMedicationRequest {
name: string;
dosage: string;
frequency: string;
route: string;
profile_id: string;
reason?: string;
instructions?: string;
side_effects?: string[];
prescribed_by?: string;
prescribed_date?: string;
start_date?: string;
end_date?: string;
instructions?: string;
notes?: string;
tags?: string[];
reminder_times?: string[];
pill_identification?: PillIdentification;
}

10
web/normogen-web/src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1,10 @@
/// <reference types="vite/client" />
interface ImportMetaEnv {
/** Base URL for API calls. Defaults to "/api" (proxied by the Vite dev server). */
readonly VITE_API_URL?: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}