DRAFT: Upgrade react admin to 3.x

package.json

@@ -3,22 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "~1.5.1",
-    "@material-ui/icons": "~1.1.1",
+    "@material-ui/core": "~4.12.1",
+    "@material-ui/icons": "~4.11.2",
+    "ra-data-fakerest": "^3.9.0",
     "ra-data-simple-rest": "^2.9.6",
-    "ra-input-markdown": "^1.1.5",
-    "ra-input-rich-text": "^2.9.3",
+    "ra-i18n-polyglot": "^3.17.2",
+    "ra-input-markdown": "^1.2.0",
+    "ra-input-rich-text": "^3.9.0",
+    "ra-language-english": "^3.9.0",
+    "ra-language-french": "^3.9.0",
     "react": "^16.9.0",
-    "react-admin": "^2.9.6",
+    "react-admin": "^3.9.0",
     "react-admin-color-input": "^1.0.8",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.1"
   },
   "devDependencies": {
-    "gh-pages": "^2.1.1",
+    "gh-pages": "^3.2.3",
     "import-sort-style-module": "^6.0.0",
-    "prettier": "^1.19.1",
-    "prettier-plugin-import-sort": "^0.0.3"
+    "prettier": "^2.3.2",
+    "prettier-plugin-import-sort": "^0.0.7"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.jsx

@@ -3,13 +3,16 @@ import React, { Component } from "react";
 import { Admin, Resource, fetchUtils } from "react-admin";
 
 import AuthProvider from "./AuthProvider";
+
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+
 import { CategoryCreate, CategoryEdit, CategoryIcon, CategoryList } from "./Categories";
 import { CategoryImageEdit, CategoryImageIcon, CategoryImageList } from "./CategoriesImages";
 import API_URL from "./Constants";
 import Dashboard from "./dashboard/Dashboard";
 import addUploadFeature from "./dataProvider/decorator";
 import { FlavorCreate, FlavorEdit, FlavorIcon, FlavorList, FlavorShow } from "./Flavors";
-import englishMessages from "./i18n/en";
+// import englishMessages from "./i18n/en";
 import { KindCreate, KindEdit, KindIcon, KindList, KindShow } from "./Kinds";
 import { KindImageEdit, KindImageIcon, KindImageList } from "./KindsImages";
 import { KindsToFlavorsCreate, KindsToFlavorsEdit } from "./KindsToFlavors";
@@ -27,27 +30,55 @@ import { TableCreate, TableEdit, TableIcon, TableList } from "./Tables";
 import { TagCreate, TagEdit, TagIcon, TagList, TagShow } from "./Tags";
 import { adminTheme } from "./Theme";
 import { UserCreate, UserEdit, UserIcon, UserList } from "./Users";
+import englishMessages from './i18n/en';
 
-const i18nProvider = locale => {
-    if (locale === "nl") {
-        return import("./i18n/nl").then(messages => messages.default);
-    }
+// const i18nProvider = polyglotI18nProvider(locale => {
+//     if (locale === "nl") {
+//         return import("./i18n/nl").then(messages => messages.default);
+//     }
+
+//     // Always fallback on english
+//     return englishMessages;
+// });
+
+const translations = {
+    en: import("./i18n/en").then(messages => messages.default),
+    nl: import("./i18n/nl").then(messages => messages.default)
+}
 
+// const i18nProvider = polyglotI18nProvider(locale => translations[locale]);
+const i18nProvider = polyglotI18nProvider(locale => {
+    if (locale === 'nl') {
+        return translations[locale];
+    }
     // Always fallback on english
     return englishMessages;
-};
+}, 'en');
+
+// const i18nProvider = {import("./i18n/nl").then(messages => messages.default)
+//     translate: key => lodashGet(messages, key),
+//     changeLocale: newLocale => {
+//         messages = (newLocale === 'fr') ? frenchMessages : englishMessages;
+//         locale = newLocale;
+//         return Promise.resolve();
+//     },
+//     getLocale: () => locale
+// }
+
+console.log("API_URL => ", API_URL);
 
 const httpClient = (url, options = {}) => {
+    console.log("WHAT IS GOING ON +> ", url);
     if (!options.headers) {
         options.headers = new Headers({ Accept: "application/json" });
     }
     // Cookie auth
     options.credentials = "include";
 
     // Token auth:
-    // const token = localStorage.getItem('token');
-    // options.headers.set('Authentication-Token', token);
-    return fetchUtils.fetchJson(url, options);
+    const token = localStorage.getItem('token');
+    options.headers.set('Authentication-Token', token);
+    return fetchUtils.fetchJson(url, options).catch((error) => error);
 };
 const dataProvider = simpleRestProvider(`${API_URL}/v1`, httpClient);
 
@@ -123,7 +154,7 @@ class App extends Component {
                     list={KindImageList}
                     edit={KindImageEdit}
                     icon={KindImageIcon}
-                />
+                />  
                 <Resource
                     name="products"
                     list={ProductList}

src/AuthProvider.js

@@ -1,42 +1,79 @@
-import { AUTH_ERROR, AUTH_LOGIN, AUTH_LOGOUT } from "react-admin";
+// import { AUTH_ERROR, AUTH_LOGIN, AUTH_LOGOUT } from "react-admin";
 
 import API_URL from "./Constants";
 
-export default (type, params) => {
-    if (type === AUTH_LOGIN) {
-        const { username, password } = params;
+const AuthProvider = {
+    login: ({ username, password }) => {
         const request = new Request(`${API_URL}/login`, {
             method: "POST",
             body: JSON.stringify({ email: username, password }),
             credentials: "include",
             headers: new Headers({ "Content-Type": "application/json" })
         });
-        return fetch(request).then(response => {
-            if (response.status < 200 || response.status >= 300) {
-                throw new Error(response.statusText);
+        return fetch(request).then((res) => {
+            if (res.status < 200 || res.status >= 300) {
+                localStorage.removeItem("authenticated");
+                throw new Error(res.statusText);
+                // return Promise.reject();
             }
-            localStorage.setItem("authenticated", true);
             // Next lines are handy for token based login
-            // return response.json()
-        });
-        // .then(({ response }) => {
-        //     debugger;
-        //     localStorage.setItem('token', response.user.authentication_token);
-        // });
-    }
-
-    if (type === AUTH_LOGOUT) {
-        localStorage.removeItem("authenticated");
-        return Promise.resolve();
-    }
-    if (type === AUTH_ERROR) {
-        const status = params.status;
-        if (status === 401 || status === 403) {
-            localStorage.removeItem("authenticated");
+            return res.json();
+        }).then(auth => {
+            localStorage.setItem("authenticated", true);
+            localStorage.setItem('token', auth.user.authentication_token);
+        }).catch(() => {
             return Promise.reject();
-        }
+        });
+    },
+    logout: () => {
+        localStorage.removeItem('authenticated');
+        console.log('are we called => ');
         return Promise.resolve();
-    }
+    },
+    checkError: ({ status }) => {
+        return status === 401 || status === 403
+            ? Promise.reject()
+            : Promise.resolve();
+    },
+    checkAuth: () => {
+        return localStorage.getItem('authenticated')
+            ? Promise.reject()
+            : Promise.resolve();
+    },
+    getPermissions: () => {
+        const role = localStorage.getItem('role');
+        return Promise.resolve(role);
+    },
+    // (type, params) => {
+    // if (type === AUTH_LOGIN) {
+    //     const { username, password } = params;
+
+    //     return fetch(request).then(response => {
+    //         if (response.status < 200 || response.status >= 300) {
+    //             throw new Error(response.statusText);
+    //         }
+    //         localStorage.setItem("authenticated", true);
+    //         // Next lines are handy for token based login
+    //         // return response.json()
+    //     });
+    //     // .then(({ response }) => {
+    //     //     debugger;
+    //     //     localStorage.setItem('token', response.user.authentication_token);
+    //     // });
+    // }
 
-    return Promise.resolve();
+    // if (type === AUTH_LOGOUT) {
+    // }
+    // if (type === AUTH_ERROR) {
+    //     const status = params.status;
+    //     if (status === 401 || status === 403) {
+    //         localStorage.removeItem("authenticated");
+    //         return Promise.reject();
+    //     }
+    //     return Promise.resolve();
+    // }
+
+    // return Promise.resolve();
 };
+
+export default AuthProvider;

src/Categories.jsx

@@ -6,7 +6,6 @@ import {
     BooleanInput,
     Create,
     Datagrid,
-    DisabledInput,
     Edit,
     EditButton,
     Filter,
@@ -59,7 +58,7 @@ const CategoryFilter = props => (
 );
 
 export const CategoryList = props => (
-    <List {...props} filters={<CategoryFilter />} perPage="100">
+    <List {...props} filters={<CategoryFilter />} perPage={100}>
         <Datagrid>
             <NumberField source="order_number" />
             <TextField source="name" />
@@ -82,7 +81,7 @@ const CategoryTitle = ({ record }) => {
 export const CategoryEdit = props => (
     <Edit title={<CategoryTitle />} {...props}>
         <SimpleForm>
-            <DisabledInput source="id" />
+            <TextInput disabled source="id"/>
             <TextField source="shop_name" />
             <ReferenceInput source="main_category_id" reference="main-categories" perPage={100} validate={required()}>
                 <SelectInput optionText="name" />

src/CategoriesImages.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/alt-text */
 import { BrokenImage } from "@material-ui/icons";
 import React from "react";
 import {
@@ -28,7 +29,7 @@ const CategoryImageFilter = props => (
 );
 
 export const CategoryImageList = props => (
-    <List {...props} perPage="100" filters={<CategoryImageFilter />}>
+    <List {...props} perPage={100} filters={<CategoryImageFilter />}>
         <Datagrid rowClick="edit">
             <TextField source="name" />
             <ReferenceField source="shop_id" reference="shops" label="Shop" allowEmpty={true}>
@@ -83,9 +84,9 @@ const ProductImageField = ({ record, source }) => {
 };
 ProductImageField.defaultProps = { addLabel: true };
 
-const CategoryImageTitle = ({ record }) => {
-    return <span>Image {record ? `"${record.name}"` : ""}</span>;
-};
+// const CategoryImageTitle = ({ record }) => {
+//     return <span>Image {record ? `"${record.name}"` : ""}</span>;
+// };
 
 export const CategoryImageEdit = props => (
     <Edit {...props} undoable={false} redirect="edit">

src/Constants.js

@@ -1,4 +1,4 @@
-const API_URL = process.env.NODE_ENV === "development" ? "http://localhost:5000" : "https://api.prijslijst.info";
+const API_URL = process.env.NODE_ENV === "development" ? "http://192.168.0.105:5000" : "https://api.prijslijst.info";
 
 export const imageUrl = "https://d3sticxdmgvhkp.cloudfront.net/";
 

src/Flavors.jsx

@@ -5,7 +5,6 @@ import {
     Create,
     Datagrid,
     DeleteButton,
-    DisabledInput,
     Edit,
     EditButton,
     Filter,
@@ -35,8 +34,8 @@ const FlavorPagination = props => <Pagination rowsPerPageOptions={[10, 20]} {...
 
 const FlavorListSidePanel = () => (
     <div style={{ width: 200, margin: "1em" }}>
-        <Typography variant="title">Using icons?</Typography>
-        <Typography variant="body1">Flavors will need a matching image. Not all flavors have an image yet.</Typography>
+        <Typography component="h2" variant="subtitle1">Using icons?</Typography>
+        <Typography component="h4" variant="body1">Flavors will need a matching image. Not all flavors have an image yet.</Typography>
     </div>
 );
 
@@ -66,7 +65,7 @@ export const FlavorShow = props => (
 );
 
 export const FlavorList = props => (
-    <List aside={<FlavorListSidePanel />} {...props} perPage="100" filters={<FlavorFilter />}>
+    <List aside={<FlavorListSidePanel />} {...props} perPage={100} filters={<FlavorFilter />}>
         <Datagrid>
             <TextField source="name" />
             <TextField source="icon" />
@@ -85,7 +84,7 @@ const FlavorTitle = ({ record }) => {
 export const FlavorEdit = props => (
     <Edit title={<FlavorTitle />} {...props}>
         <SimpleForm>
-            <DisabledInput source="id" />
+            <TextInput disabled source="id" />
             <TextInput source="name" autoFocus validate={required()} />
             <TextInput source="icon" />
             <ColorInput source="color" />

src/Kinds.jsx

@@ -1,7 +1,4 @@
 import CardActions from "@material-ui/core/CardActions";
-import MaterialList from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import Typography from "@material-ui/core/Typography";
 import { Add, SmokingRooms } from "@material-ui/icons";
 import MarkdownInput from "ra-input-markdown";
 import React from "react";
@@ -15,7 +12,6 @@ import {
     Datagrid,
     DateField,
     DeleteButton,
-    DisabledInput,
     Edit,
     EditButton,
     Filter,
@@ -227,7 +223,7 @@ export const KindShow = props => (
 export const KindEdit = props => (
     <Edit title={<KindTitle />} {...props} redirect="show">
         <SimpleForm redirect="show">
-            <DisabledInput source="id" />
+            <TextInput disabled source="id" />
             <TextInput source="name" autoFocus fullWidth validate={required()} />
             <TextInput source="short_description_nl" fullWidth />
             <MarkdownInput source="description_nl" />

src/KindsImages.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/alt-text */
 import { BrokenImage } from "@material-ui/icons";
 import React from "react";
 import {
@@ -22,7 +23,7 @@ const KindImageFilter = props => (
 );
 
 export const KindImageList = props => (
-    <List {...props} perPage="100" filters={<KindImageFilter />}>
+    <List {...props} perPage={100} filters={<KindImageFilter />}>
         <Datagrid rowClick="edit">
             <TextField source="name" />
             <ProductImageListField source="image_1" />
@@ -78,9 +79,9 @@ const ProductImageField = ({ record, source }) => {
 };
 ProductImageField.defaultProps = { addLabel: true };
 
-const KindImageTitle = ({ record }) => {
-    return <span>Image {record ? `"${record.name}"` : ""}</span>;
-};
+// const KindImageTitle = ({ record }) => {
+//     return <span>Image {record ? `"${record.name}"` : ""}</span>;
+// };
 
 export const KindImageEdit = props => (
     <Edit {...props} undoable={false} redirect="edit">