Merge pull request #8103 from marmelab/useGetRecordId

Feat: Add useGetRecordId in ra-core

Author: fzaninotto

packages/ra-core/src/dataProvider/useGetRecordId.spec.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { useGetRecordId } from './useGetRecordId';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { RecordContextProvider } from '..';
+
+describe('useGetRecordId', () => {
+    const UseGetRecordId = (props: any) => {
+        const recordId = useGetRecordId(props.id);
+        return <div>{recordId}</div>;
+    };
+
+    it('should return the record id it received in options', () => {
+        render(<UseGetRecordId id="abc" />);
+        expect(screen.queryByText('abc')).not.toBeNull();
+    });
+
+    it('should return the record id it received in options even if it is falsy', () => {
+        render(<UseGetRecordId id={0} />);
+        expect(screen.queryByText('0')).not.toBeNull();
+    });
+
+    it('should return the record id it received through the record context', () => {
+        render(
+            <RecordContextProvider value={{ id: 'abc' }}>
+                <UseGetRecordId />
+            </RecordContextProvider>
+        );
+        expect(screen.queryByText('abc')).not.toBeNull();
+    });
+
+    it('should return the record id it received through the record context even if it is falsy', () => {
+        render(
+            <RecordContextProvider value={{ id: 0 }}>
+                <UseGetRecordId />
+            </RecordContextProvider>
+        );
+        expect(screen.queryByText('0')).not.toBeNull();
+    });
+
+    it('should return the record id parsed from the location', () => {
+        render(
+            <MemoryRouter initialEntries={['/posts/abc']}>
+                <Routes>
+                    <Route path="/posts/:id" element={<UseGetRecordId />} />
+                </Routes>
+            </MemoryRouter>
+        );
+        expect(screen.queryByText('abc')).not.toBeNull();
+    });
+
+    it('should return the record id parsed from the location even if it is falsy', () => {
+        render(
+            <MemoryRouter initialEntries={['/posts/0']}>
+                <Routes>
+                    <Route path="/posts/:id" element={<UseGetRecordId />} />
+                </Routes>
+            </MemoryRouter>
+        );
+        expect(screen.queryByText('0')).not.toBeNull();
+    });
+});

packages/ra-core/src/dataProvider/useGetRecordId.ts

@@ -0,0 +1,27 @@
+import { useParams } from 'react-router-dom';
+import { useRecordContext } from '../controller';
+import { Identifier } from '../types';
+
+/**
+ * Helper hook to get the current `recordId`.
+ *
+ * `recordId` is obtained from parameters if passed as a parameter, or from the `RecordContext` if there is one, or, lastly, from the react-router URL.
+ *
+ * @param {any} recordId optional if used inside a RecordContextProvider or if recordId can be guessed from the URL
+ *
+ * @returns The `recordId` determined in this manner.
+ *
+ * @example
+ * const recordId = useGetRecordId();
+ */
+export function useGetRecordId(recordId?: Identifier): Identifier {
+    const contextRecord = useRecordContext();
+    const { id: routeId } = useParams<'id'>();
+    const actualRecordId = recordId ?? contextRecord?.id ?? routeId;
+    if (actualRecordId == null)
+        throw new Error(
+            `useGetRecordId could not find the current record id. You need to use it inside a RecordContextProvider, or inside a supported route, or provide the record id to the hook yourself.`
+        );
+
+    return actualRecordId;
+}