From 7c2d81ab07a93e5e49b7b618e512e613f05fc468 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Y=C4=B1ld=C4=B1ray=20U=CC=88nlu=CC=88?=
 <yildirayyunlu@gmail.com>
Date: Sun, 7 Feb 2021 21:53:09 +0300
Subject: [PATCH] Add ReferenceField component.

---
 example/src/post.tsx                    | 10 ++++++++
 src/components/index.ts                 |  1 +
 src/components/referenceField/index.tsx | 32 +++++++++++++++++++++++++
 src/index.tsx                           |  1 +
 4 files changed, 44 insertions(+)
 create mode 100644 src/components/referenceField/index.tsx

diff --git a/example/src/post.tsx b/example/src/post.tsx
index 6fd2d51c56f6..a5e081501bbb 100644
--- a/example/src/post.tsx
+++ b/example/src/post.tsx
@@ -11,6 +11,7 @@ import {
     TextareaInput,
     SelectInput,
     ReferenceInput,
+    ReferenceField,
 } from "readmin";
 
 export const PostList = (props: any) => {
@@ -23,6 +24,15 @@ export const PostList = (props: any) => {
                     key="categoryId"
                     title="Category"
                     dataIndex="categoryId"
+                    render={(value) => {
+                        return (
+                            <ReferenceField
+                                value={value}
+                                resource="categories"
+                                optionText="title"
+                            />
+                        );
+                    }}
                 />
                 <Column key="status" title="Status" dataIndex="status" />
             </Table>
diff --git a/src/components/index.ts b/src/components/index.ts
index bf8ab3d1db2f..d9797f52ea86 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,6 +2,7 @@ export { Layout } from "./layout";
 export { List } from "./list";
 export { Table } from "./table";
 export { Column } from "./column";
+export { ReferenceField } from "./referenceField";
 export { Create } from "./create";
 export { Edit } from "./edit";
 export { Form, FormItem } from "./form";
diff --git a/src/components/referenceField/index.tsx b/src/components/referenceField/index.tsx
new file mode 100644
index 000000000000..78c5c133b0dd
--- /dev/null
+++ b/src/components/referenceField/index.tsx
@@ -0,0 +1,32 @@
+import React, { useContext } from "react";
+import { useQuery } from "react-query";
+
+import { DataContext } from "@contexts/data";
+import { GetOneResponse, IDataContext } from "@interfaces";
+
+export interface ReferenceFieldProps {
+    resource: string;
+    optionText?: string;
+    value: string | number;
+    record?: any;
+}
+
+export const ReferenceField: React.FC<ReferenceFieldProps> = ({
+    resource,
+    optionText = "title",
+    value,
+}) => {
+    const { getOne } = useContext<IDataContext>(DataContext);
+
+    const { data, isFetching } = useQuery<GetOneResponse>(
+        [`resource/one/${resource}/`, { id: value }],
+        () => getOne(resource, value),
+    );
+
+    if (isFetching) {
+        // TODO: Add loding ui.
+        return <span>loading</span>;
+    }
+
+    return <span>{data?.data[optionText]}</span>;
+};
diff --git a/src/index.tsx b/src/index.tsx
index 5d3cad3833fb..14ac756adb60 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,6 +5,7 @@ export { Admin, Resource } from "./containers";
 export {
     List,
     Column,
+    ReferenceField,
     Table,
     Form,
     FormItem,