Strapi v4 Data Provider and Example (refinedev#1297)

* duplicate strapi package and strapi example * add getList implementation * add getMany implemantation * draft strapi v4 example and dataProvider implementations * create example's list page * add metaData to queryKeys * update getList method and create createMany method * refactor list page * add create page * add edit page * fix example pages * add proxy for cors, add types * add unit tests * remove proxy * fix edit page Co-authored-by: Ömer Faruk APLAK <[email protected]> Co-authored-by: Ömer Faruk APLAK <[email protected]>
landofcoder · Dec 16, 2021 · 68184cd · 68184cd
1 parent 17b0c9e
commit 68184cd
Show file tree

Hide file tree

Showing 41 changed files with 3,640 additions and 5 deletions.
diff --git a/examples/dataProvider/strapi-v4/README.md b/examples/dataProvider/strapi-v4/README.md
@@ -0,0 +1,3 @@
+# Refine Strapi Auth/Data Provider Example App
+
+TODO: Strapi provider description.
diff --git a/examples/dataProvider/strapi-v4/package.json b/examples/dataProvider/strapi-v4/package.json
@@ -0,0 +1,43 @@
+{
+ "name": "refine-strapi-v4-example",
+ "version": "0.1.0",
+ "private": true,
+ "dependencies": {
+ "@pankod/refine": "^2.0.7",
+ "@pankod/refine-react-router": "^2.0.7",
+ "@pankod/refine-strapi-v4": "^2.0.7",
+ "@types/node": "^12.20.11",
+ "@types/react": "^17.0.4",
+ "@types/react-dom": "^17.0.4",
+ "axios": "^0.21.4",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "react-markdown": "^6.0.1",
+ "react-mde": "^11.1.0",
+ "react-scripts": "4.0.3",
+ "typescript": "^4.4.3",
+ "web-vitals": "^1.1.1"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "devDependencies": {
+ "@babel/core": "^7.13.14",
+ "http-proxy-middleware": "^1.3.1"
+ }
+}
diff --git a/examples/dataProvider/strapi-v4/public/favicon.ico b/examples/dataProvider/strapi-v4/public/favicon.ico
diff --git a/examples/dataProvider/strapi-v4/public/index.html b/examples/dataProvider/strapi-v4/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="theme-color" content="#000000" />
+ <meta
+ name="description"
+ content="Web site created using pankod/refine"
+ />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <!--
+ manifest.json provides metadata used when your web app is installed on a
+ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+ -->
+ <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <!--
+ Notice the use of %PUBLIC_URL% in the tags above.
+ It will be replaced with the URL of the `public` folder during the build.
+ Only files inside the `public` folder can be referenced from the HTML.
+
+ Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+ work correctly both with client-side routing and a non-root public URL.
+ Learn how to configure a non-root public URL by running `npm run build`.
+ -->
+ <title>refine strapi-v4 example app</title>
+ </head>
+ <body>
+ <noscript>You need to enable JavaScript to run this app.</noscript>
+ <div id="root"></div>
+ <!--
+ This HTML file is a template.
+ If you open it directly in the browser, you will see an empty page.
+
+ You can add webfonts, meta tags, or analytics to this file.
+ The build step will place the bundled scripts into the <body> tag.
+
+ To begin the development, run `npm start` or `yarn start`.
+ To create a production bundle, use `npm run build` or `yarn build`.
+ -->
+ </body>
+</html>
diff --git a/examples/dataProvider/strapi-v4/public/manifest.json b/examples/dataProvider/strapi-v4/public/manifest.json
@@ -0,0 +1,25 @@
+{
+ "short_name": "refine strapi-v4 example app",
+ "name": "refine strapi-v4 example app",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ },
+ {
+ "src": "logo192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "logo512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/examples/dataProvider/strapi-v4/src/App.tsx b/examples/dataProvider/strapi-v4/src/App.tsx
@@ -0,0 +1,96 @@
+import { Refine, AuthProvider } from "@pankod/refine";
+import { DataProvider, AuthHelper } from "@pankod/refine-strapi-v4";
+import routerProvider from "@pankod/refine-react-router";
+
+import axios from "axios";
+
+import "@pankod/refine/dist/styles.min.css";
+
+import { PostList, PostCreate, PostEdit } from "pages/posts";
+import { CategoryList, CategoryCreate, CategoryEdit } from "pages/categories";
+
+import { TOKEN_KEY, API_URL } from "./constants";
+
+const App: React.FC = () => {
+ const axiosInstance = axios.create();
+ const strapiAuthHelper = AuthHelper(API_URL + "/api");
+
+ const authProvider: AuthProvider = {
+ login: async ({ username, password }) => {
+ const { data, status } = await strapiAuthHelper.login(
+ username,
+ password,
+ );
+ if (status === 200) {
+ localStorage.setItem(TOKEN_KEY, data.jwt);
+
+ // set header axios instance
+ axiosInstance.defaults.headers = {
+ Authorization: `Bearer ${data.jwt}`,
+ };
+
+ return Promise.resolve;
+ }
+ return Promise.reject;
+ },
+ logout: () => {
+ localStorage.removeItem(TOKEN_KEY);
+ return Promise.resolve();
+ },
+ checkError: () => Promise.resolve(),
+ checkAuth: () => {
+ const token = localStorage.getItem(TOKEN_KEY);
+ if (token) {
+ axiosInstance.defaults.headers = {
+ Authorization: `Bearer ${token}`,
+ };
+ return Promise.resolve();
+ }
+
+ return Promise.reject();
+ },
+ getPermissions: () => Promise.resolve(),
+ getUserIdentity: async () => {
+ const token = localStorage.getItem(TOKEN_KEY);
+ if (!token) {
+ return Promise.reject();
+ }
+
+ const { data, status } = await strapiAuthHelper.me(token);
+ if (status === 200) {
+ const { id, username, email } = data;
+ return Promise.resolve({
+ id,
+ username,
+ email,
+ });
+ }
+
+ return Promise.reject();
+ },
+ };
+
+ return (
+ <Refine
+ authProvider={authProvider}
+ dataProvider={DataProvider(API_URL + "/api", axiosInstance)}
+ routerProvider={routerProvider}
+ resources={[
+ {
+ name: "posts",
+ list: PostList,
+ create: PostCreate,
+ edit: PostEdit,
+ },
+ {
+ name: "categories",
+ list: CategoryList,
+ create: CategoryCreate,
+ edit: CategoryEdit,
+ },
+ ]}
+ />
+ );
+};
+
+export default App;
diff --git a/examples/dataProvider/strapi-v4/src/constants.ts b/examples/dataProvider/strapi-v4/src/constants.ts
@@ -0,0 +1,2 @@
+export const API_URL = "https://api.strapi-v4.refine.dev";
+export const TOKEN_KEY = "strapi-jwt-token";
diff --git a/examples/dataProvider/strapi-v4/src/index.tsx b/examples/dataProvider/strapi-v4/src/index.tsx
@@ -0,0 +1,12 @@
+import React, { Suspense } from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(
+ <React.StrictMode>
+ <Suspense fallback="loading">
+ <App />
+ </Suspense>
+ </React.StrictMode>,
+ document.getElementById("root"),
+);
diff --git a/examples/dataProvider/strapi-v4/src/interfaces/index.d.ts b/examples/dataProvider/strapi-v4/src/interfaces/index.d.ts
@@ -0,0 +1,18 @@
+export interface ICategory {
+ id: string;
+ title: string;
+}
+
+export interface IPost {
+ id: string;
+ title: string;
+ category: {
+ data: {
+ id: string;
+ attributes: ICategory;
+ };
+ };
+ content: string;
+ locale: string;
+ createdAt: string;
+}
diff --git a/examples/dataProvider/strapi-v4/src/pages/categories/create.tsx b/examples/dataProvider/strapi-v4/src/pages/categories/create.tsx
@@ -0,0 +1,38 @@
+import {
+ Create,
+ Form,
+ Input,
+ IResourceComponentsProps,
+ Radio,
+ useForm,
+} from "@pankod/refine";
+
+import { ICategory } from "interfaces";
+
+export const CategoryCreate: React.FC<IResourceComponentsProps> = () => {
+ const { formProps, saveButtonProps } = useForm<ICategory>();
+
+ return (
+ <Create saveButtonProps={saveButtonProps}>
+ <Form {...formProps} layout="vertical">
+ <Form.Item label="Locale" name="locale">
+ <Radio.Group>
+ <Radio.Button value="en">English</Radio.Button>
+ <Radio.Button value="de">Deutsch</Radio.Button>
+ </Radio.Group>
+ </Form.Item>
+ <Form.Item
+ label="Title"
+ name="title"
+ rules={[
+ {
+ required: true,
+ },
+ ]}
+ >
+ <Input />
+ </Form.Item>
+ </Form>
+ </Create>
+ );
+};
diff --git a/examples/dataProvider/strapi-v4/src/pages/categories/edit.tsx b/examples/dataProvider/strapi-v4/src/pages/categories/edit.tsx
@@ -0,0 +1,31 @@
+import {
+ Edit,
+ Form,
+ Input,
+ IResourceComponentsProps,
+ useForm,
+} from "@pankod/refine";
+
+import { ICategory } from "interfaces";
+
+export const CategoryEdit: React.FC<IResourceComponentsProps> = () => {
+ const { formProps, saveButtonProps } = useForm<ICategory>();
+
+ return (
+ <Edit saveButtonProps={saveButtonProps}>
+ <Form {...formProps} layout="vertical">
+ <Form.Item
+ label="Title"
+ name="title"
+ rules={[
+ {
+ required: true,
+ },
+ ]}
+ >
+ <Input />
+ </Form.Item>
+ </Form>
+ </Edit>
+ );
+};
diff --git a/examples/dataProvider/strapi-v4/src/pages/categories/index.tsx b/examples/dataProvider/strapi-v4/src/pages/categories/index.tsx
@@ -0,0 +1,3 @@
+export * from "./list";
+export * from "./create";
+export * from "./edit";
diff --git a/examples/dataProvider/strapi-v4/src/pages/categories/list.tsx b/examples/dataProvider/strapi-v4/src/pages/categories/list.tsx
@@ -0,0 +1,67 @@
+import { useState } from "react";
+import {
+ List,
+ Table,
+ useTable,
+ IResourceComponentsProps,
+ Space,
+ EditButton,
+ DateField,
+ DeleteButton,
+ Form,
+ Radio,
+} from "@pankod/refine";
+
+import { ICategory } from "interfaces";
+
+export const CategoryList: React.FC<IResourceComponentsProps> = () => {
+ const [locale, setLocale] = useState("en");
+
+ const { tableProps } = useTable<ICategory>({
+ metaData: {
+ locale,
+ },
+ });
+
+ return (
+ <List>
+ <Form layout="inline" initialValues={{ locale }}>
+ <Form.Item label="Locale" name="locale">
+ <Radio.Group onChange={(e) => setLocale(e.target.value)}>
+ <Radio.Button value="en">English</Radio.Button>
+ <Radio.Button value="de">Deutsch</Radio.Button>
+ </Radio.Group>
+ </Form.Item>
+ </Form>
+ <br />
+ <Table {...tableProps} rowKey="id">
+ <Table.Column dataIndex="id" title="ID" />
+ <Table.Column dataIndex="title" title="Title" />
+ <Table.Column
+ dataIndex="createdAt"
+ title="Created At"
+ render={(value) => <DateField value={value} format="LLL" />}
+ sorter
+ />
+ <Table.Column<ICategory>
+ title="Actions"
+ dataIndex="actions"
+ render={(_, record) => (
+ <Space>
+ <EditButton
+ size="small"
+ hideText
+ recordItemId={record.id}
+ />
+ <DeleteButton
+ size="small"
+ hideText
+ recordItemId={record.id}
+ />
+ </Space>
+ )}
+ />
+ </Table>
+ </List>
+ );
+};