feat: Project CRUD via React Admin (No auth)

packages/admin/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "ra-data-json-server": "^5.15.0",
+    "ra-data-simple-rest": "^5.15.0",
     "react": "^19.2.8",
     "react-admin": "^5.15.1",
     "react-dom": "^19.2.8"

packages/admin/src/App.tsx

@@ -1,15 +1,28 @@
-import { Admin, Resource, ListGuesser } from 'react-admin';
-import jsonServerProvider from 'ra-data-json-server';
+import { Admin, Resource } from 'react-admin';
+import { ConfigProvider } from './contexts/Config.provider';
+import { useConfig } from './contexts/Config.context';
+import { createMongoIdDataProvider } from './dataProviders/MongoIdDataProvider';
+import { ListProjects } from './pages/projects/ListProjects.page';
+import { ShowProject } from './pages/projects/ShowProject.page';
+import { CreateProject } from './pages/projects/CreateProject.page';
 
-const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
+const App: React.FC = () => {
+  return (
+    <ConfigProvider>
+      <ConfigWrappedInner />
+    </ConfigProvider>
+  );
+};
 
-function App() {
+const ConfigWrappedInner: React.FC = () => {
+  // Setup React Admin data provider
+  const config = useConfig();
+  const dataProvider = createMongoIdDataProvider(config.backend.apiBase);
   return (
     <Admin dataProvider={dataProvider}>
-      <Resource name="posts" list={ListGuesser} />
-      <Resource name="comments" list={ListGuesser} />
+      <Resource name="projects" list={ListProjects} show={ShowProject} create={CreateProject} />
     </Admin>
   );
-}
+};
 
 export default App;

packages/admin/src/contexts/Config.context.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+export interface ConfigFields {
+  auth: {
+    authorityURL: string;
+    clientID: string;
+  };
+  backend: {
+    apiBase: string;
+  };
+}
+
+export const ConfigContext = createContext<ConfigFields>({} as ConfigFields);
+export const useConfig = () => useContext(ConfigContext);

packages/admin/src/contexts/Config.provider.tsx

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import { ConfigContext, type ConfigFields } from './Config.context';
+
+const devValues: ConfigFields = {
+  auth: {
+    authorityURL: import.meta.env.VITE_AUTHORITY_URL,
+    clientID: import.meta.env.VITE_AUTH_CLIENT_ID
+  },
+  backend: {
+    apiBase: import.meta.env.VITE_BACKEND_API_BASE_URL
+  }
+};
+
+export const ConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  return <ConfigContext.Provider value={devValues}>{children}</ConfigContext.Provider>;
+};

packages/admin/src/dataProviders/MongoIdDataProvider.ts

@@ -0,0 +1,70 @@
+import type {
+  CreateParams,
+  DataProvider,
+  DeleteParams,
+  GetListParams,
+  GetManyParams,
+  GetManyReferenceParams,
+  GetOneParams,
+  Identifier,
+  QueryFunctionContext,
+  RaRecord,
+  UpdateParams,
+} from 'react-admin';
+import simpleRestProvider from 'ra-data-simple-rest';
+
+type MongoRecord = RaRecord & { _id: Identifier };
+
+// Records coming back from the API use Mongo's "_id" as their primary key.
+// React Admin requires every record to have an "id" field, so this maps
+// "_id" -> "id" on every response coming out of the underlying REST provider.
+// See https://marmelab.com/react-admin/FAQ.html#can-i-have-custom-identifiersprimary-keys-for-my-resources
+const toRaRecord = (record: MongoRecord): RaRecord => ({
+  ...record,
+  id: record._id,
+});
+
+export const createMongoIdDataProvider = (apiBase: string): DataProvider => {
+  const baseProvider = simpleRestProvider(apiBase);
+
+  const provider = {
+    ...baseProvider,
+    getList: (resource: string, params: GetListParams & QueryFunctionContext) =>
+      baseProvider.getList<MongoRecord>(resource, params).then((response) => ({
+        ...response,
+        data: response.data.map(toRaRecord),
+      })),
+    getOne: (resource: string, params: GetOneParams & QueryFunctionContext) =>
+      baseProvider.getOne<MongoRecord>(resource, params).then((response) => ({
+        ...response,
+        data: toRaRecord(response.data),
+      })),
+    getMany: (resource: string, params: GetManyParams & QueryFunctionContext) =>
+      baseProvider.getMany<MongoRecord>(resource, params).then((response) => ({
+        ...response,
+        data: response.data.map(toRaRecord),
+      })),
+    getManyReference: (resource: string, params: GetManyReferenceParams & QueryFunctionContext) =>
+      baseProvider.getManyReference<MongoRecord>(resource, params).then((response) => ({
+        ...response,
+        data: response.data.map(toRaRecord),
+      })),
+    create: (resource: string, params: CreateParams) =>
+      baseProvider.create<MongoRecord>(resource, params).then((response) => ({
+        ...response,
+        data: toRaRecord(response.data),
+      })),
+    update: (resource: string, params: UpdateParams) =>
+      baseProvider.update<MongoRecord>(resource, params).then((response) => ({
+        ...response,
+        data: toRaRecord(response.data),
+      })),
+    delete: (resource: string, params: DeleteParams) =>
+      baseProvider.delete<MongoRecord>(resource, params).then((response) => ({
+        ...response,
+        data: toRaRecord(response.data),
+      })),
+  };
+
+  return provider as unknown as DataProvider;
+};

packages/admin/src/pages/projects/CreateProject.page.tsx

@@ -0,0 +1,12 @@
+import { Create, required, SimpleForm, TextInput } from 'react-admin';
+
+export const CreateProject: React.FC = () => {
+  return (
+    <Create>
+      <SimpleForm>
+        <TextInput source="name" validate={[required()]} />
+        <TextInput source="description" validate={[required()]} />
+      </SimpleForm>
+    </Create>
+  );
+};