react-admin setup

components/admin/articles/fields/title.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Link from 'components/common/Link';
+import Image from 'components/common/Image';
+import { ArticleTypeIcon } from 'utils/ui';
+
+import { ROUTES_NAMES } from 'routes';
+
+import styles from './title.module.scss';
+
+const ArticleTitle = ({ record: { slug, type, title, images: { horizontal } } = {} }) => {
+  return (
+    <Link route={ROUTES_NAMES.article} params={{ slug }} target="_blank">
+      <div className={styles.container}>
+        {horizontal && (
+          <div>
+            <Image
+              className={styles.cover}
+              alt="вокладка матэрыяла"
+              sourceSizes={[90]}
+              baseUrl={horizontal}
+            />
+          </div>
+        )}
+        <div className={styles.title}>
+          <span>
+            <ArticleTypeIcon type={type} className={styles.interactiveIcon} />
+            {title}
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+ArticleTitle.propTypes = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  label: PropTypes.string,
+  record: PropTypes.object,
+};
+
+export default ArticleTitle;

components/admin/articles/fields/title.module.scss

@@ -0,0 +1,23 @@
+@import 'styles/variables';
+
+.container {
+  display: flex;
+  flex-direction: row;
+  width: 200px;
+}
+
+.interactiveIcon {
+  color: $primary-grey;
+  margin-right: 5px;
+}
+
+.cover {
+  margin-right: 10px;
+  width: 90px;
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

components/admin/articles/list.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { List, Datagrid, TextField } from 'react-admin';
+
+import ArticleTitle from './fields/title';
+
+const ArticleList = props => (
+  <List {...props} perPage={25}>
+    <Datagrid>
+      <ArticleTitle label="Назва" />
+      <TextField source="subtitle" label="Апісанне" />
+    </Datagrid>
+  </List>
+);
+
+export default ArticleList;

components/admin/auth-provider.js

@@ -0,0 +1,55 @@
+import { makeRequest } from 'utils/request';
+
+import api from 'constants/api';
+
+const LS_KEY = 'user';
+const LOGOUT_ERROR_CODES = [401, 403];
+
+// TODO: check cookie or setup jwt token
+
+const getUser = async () => {
+  const user = JSON.parse(localStorage.getItem(LS_KEY));
+  const isValid = user?.token && user?.permissions?.adminAccess;
+  if (!isValid) {
+    throw new Error();
+  }
+  return user;
+};
+
+const logout = () => localStorage.removeItem(LS_KEY);
+
+const authProvider = {
+  // authentication
+  login: ({ username: email, password }) => {
+    return makeRequest(api.auth.login, 'POST', { email, password }).then(({ user }) => {
+      localStorage.setItem(LS_KEY, JSON.stringify(user));
+    });
+  },
+  checkError: ({ status }) => {
+    if (LOGOUT_ERROR_CODES.includes(status)) {
+      logout();
+      // eslint-disable-next-line prefer-promise-reject-errors
+      return Promise.reject({ message: false });
+    }
+    // other error code (404, 500, etc): no need to log out
+    return Promise.resolve();
+  },
+  checkAuth: getUser,
+  logout: () => {
+    logout();
+    return Promise.resolve();
+  },
+  //   FIXME: id
+  getIdentity: async () => {
+    try {
+      const { displayName: fullName, token: id } = await getUser();
+      return { id, fullName };
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  },
+  // authorization
+  getPermissions: () => getUser().then(u => u.permissions),
+};
+
+export default authProvider;

components/admin/data-provider.js

@@ -0,0 +1,24 @@
+import restProvider from 'ra-data-simple-rest';
+import identity from 'lodash/identity';
+
+import { getLocalizedArticles } from 'utils/getters';
+
+import { API_URL } from 'constants/api';
+
+const baseProvider = restProvider(API_URL);
+
+const formatterByResourse = {
+  articles: getLocalizedArticles,
+};
+
+const dataProvider = {
+  ...baseProvider,
+  getList: (resource, params) => {
+    return baseProvider.getList(resource, params).then(({ data, total }) => {
+      const format = formatterByResourse[resource] || identity;
+      return { data: format(data), total };
+    });
+  },
+};
+
+export default dataProvider;

components/admin/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Admin as ReactAdmin, Resource } from 'react-admin';
+
+import ArticleList from './articles/list';
+import authProvider from './auth-provider';
+import dataProvider from './data-provider';
+
+const Admin = () => {
+  return (
+    <ReactAdmin
+      //   dashboard={Dashboard}
+      //   layout={Layout}
+      authProvider={authProvider}
+      dataProvider={dataProvider}
+      //   i18nProvider={i18nProvider}
+    >
+      <Resource name="articles" list={ArticleList} />
+    </ReactAdmin>
+  );
+};
+
+export default Admin;

components/admin/loading.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const AdminLoading = () => <p>Loading...</p>;
+
+export default AdminLoading;

constants/api.js

@@ -1,8 +1,11 @@
 import qs from 'querystring';
 
-const API_URL = '/api';
+export const API_URL = '/api';
 
 export default {
+  auth: {
+    login: `/auth/login`,
+  },
   storage: {
     getMainPage: `${API_URL}/storage/main-page`,
     getSidebar: `${API_URL}/storage/sidebar`,