fix: date rendering now shows only date for date fields
This commit is contained in:
49
IMPLEMENTATION.md
Normal file
49
IMPLEMENTATION.md
Normal file
@@ -0,0 +1,49 @@
|
||||
# Implementation Details
|
||||
|
||||
## React‑Auth
|
||||
- **File Structure**
|
||||
- `src/auth/AuthContext.tsx` – Provides `AuthContext` and `AuthProvider`.
|
||||
- `src/auth/useAuth.ts` – Custom hook returning context values and actions.
|
||||
- `src/auth/ProtectedRoute.tsx` – Wrapper component that checks `isAuthenticated` and redirects.
|
||||
- `src/auth/api.ts` – Thin wrapper around `axios` for login, logout, refresh.
|
||||
- **Logic**
|
||||
1. On `login`, POST credentials → store `accessToken` & user info in context and `localStorage`.
|
||||
2. An `axios` interceptor attaches the token to every request.
|
||||
3. `refreshToken` runs on 401 responses; it attempts a silent refresh and updates the context.
|
||||
4. `logout` clears context and storage, navigating back to `/login`.
|
||||
- **UI Components**
|
||||
- `LoginForm` – MUI `TextField`s, validation, and submit handling.
|
||||
- `AuthLoading` – Full‑screen spinner displayed while session restoration runs on app boot.
|
||||
|
||||
## React‑OpenAPI
|
||||
- **Core Files**
|
||||
- `src/react-openapi/types/config.ts` – Already defines `ResourceField` with `displayFormat`.
|
||||
- `src/react-openapi/utils/options.ts` – Helper `resolveTemplate` parses `{{field}}` placeholders using the item data.
|
||||
- `src/react-openapi/components/EnhancedTable.tsx` – Renders a MUI `DataGrid`. Uses `getFormattedDisplayValue` to compute readable labels for relation fields based on `displayFormat`.
|
||||
- `src/react-openapi/components/FilterBar.tsx` – Generates filter inputs; extracts option labels using the same `displayFormat` logic.
|
||||
- **Data Fetching**
|
||||
- `useResource(resourceName)` – TanStack `useQuery` hook that builds the endpoint URL from `config.endpoint` and fetches data via the shared Axios instance.
|
||||
- **Customization**
|
||||
- `components` prop passed to `EnhancedTable`/`FilterBar` allows overriding cell renderers, filter widgets, and action buttons.
|
||||
- **Error Handling**
|
||||
- Centralized error toast (`useToast`) displays API errors.
|
||||
- Table shows “No data” state when an empty array is returned.
|
||||
|
||||
## src (Application Core)
|
||||
- **src/main.tsx** – Sets up MUI theme, React Router, `AuthProvider`, and `QueryClientProvider`.
|
||||
- **src/App.tsx** – Defines routes:
|
||||
```tsx
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginForm />} />
|
||||
<Route element={<ProtectedRoute />}>
|
||||
<Route path="/admin/:resource" element={<ResourceList />} />
|
||||
<Route path="/admin/:resource/edit/:id" element={<ResourceForm />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
```
|
||||
- **src/pages/ResourceList.tsx** – Reads `resource` from URL, loads its `ResourceConfig`, calls `useResource`, and renders `EnhancedTable` + `FilterBar`.
|
||||
- **src/pages/ResourceForm.tsx** – Dynamically builds a form based on `ResourceField` definitions, using `displayFormat` for default values.
|
||||
- **State Management** – TanStack Query caches paginated results; `AuthProvider` ensures all API calls include a valid JWT.
|
||||
- **Theming** – `ThemeProvider` toggles light/dark mode via a context hook that persists the preference in `localStorage`.
|
||||
|
||||
These implementation notes detail the concrete file layout, data flow, and core logic that power the UI generated from OpenAPI specifications while maintaining authenticated access. They can be directly adapted for the **lovable** platform to provide a richer UI and better handling of auth and data rendering.
|
||||
Reference in New Issue
Block a user