Merge branch 'master' of github.com:trouble/payload into repeater-design

src/client/components/forms/field-types/Flexible/index.js

@@ -64,11 +64,12 @@ const Flexible = (props) => {
     required,
   });
 
+  const dataToInitialize = initialData || defaultValue;
   const parentRowsModified = useRowModified();
   const { toggle: toggleModal, closeAll: closeAllModals } = useModal();
   const [rowIndexBeingAdded, setRowIndexBeingAdded] = useState(null);
   const [lastModified, setLastModified] = useState(null);
-  const [rowCount, setRowCount] = useState(0);
+  const [rowCount, setRowCount] = useState(dataToInitialize?.length || 0);
   const [collapsibleStates, dispatchCollapsibleStates] = useReducer(collapsibleReducer, []);
   const formContext = useContext(FormContext);
   const modalSlug = `flexible-${path}`;
@@ -77,7 +78,6 @@ const Flexible = (props) => {
 
   const { dispatchFields, countRows, getFields } = formContext;
   const fieldState = getFields();
-  const dataToInitialize = initialData || defaultValue;
 
   const addRow = (rowIndex, blockType) => {
     const blockToAdd = blocks.find(block => block.slug === blockType);
@@ -134,12 +134,10 @@ const Flexible = (props) => {
     moveRow(sourceIndex, destinationIndex);
   };
 
-  const updateRowCountOnParentRowModified = () => {
+  useEffect(() => {
     const countedRows = countRows(path);
     setRowCount(countedRows);
-  };
-
-  useEffect(updateRowCountOnParentRowModified, [parentRowsModified]);
+  }, [countRows, path, parentRowsModified]);
 
   useEffect(() => {
     setRowCount(dataToInitialize.length);

src/client/components/forms/field-types/Repeater/index.js

@@ -36,10 +36,11 @@ const Repeater = (props) => {
     minRows,
   } = props;
 
+  const dataToInitialize = initialData || defaultValue;
   const parentRowsModified = useRowModified();
   const [collapsibleStates, dispatchCollapsibleStates] = useReducer(collapsibleReducer, []);
   const formContext = useContext(FormContext);
-  const [rowCount, setRowCount] = useState(0);
+  const [rowCount, setRowCount] = useState(dataToInitialize?.length || 0);
   const [lastModified, setLastModified] = useState(null);
   const { getFields, dispatchFields, countRows } = formContext;
   const { customComponentsPath } = useRenderedFields();
@@ -67,7 +68,6 @@ const Repeater = (props) => {
   });
 
   const fieldState = getFields();
-  const dataToInitialize = initialData || defaultValue;
 
   const addRow = (rowIndex) => {
     dispatchFields({
@@ -111,11 +111,6 @@ const Repeater = (props) => {
     setLastModified(Date.now());
   };
 
-  const updateRowCountOnParentRowModified = () => {
-    const countedRows = countRows(path);
-    setRowCount(countedRows);
-  };
-
   const onDragEnd = (result) => {
     if (!result.destination) return;
     const sourceIndex = result.source.index;
@@ -133,7 +128,10 @@ const Repeater = (props) => {
     });
   }, [dataToInitialize]);
 
-  useEffect(updateRowCountOnParentRowModified, [parentRowsModified]);
+  useEffect(() => {
+    const countedRows = countRows(path);
+    setRowCount(countedRows);
+  }, [countRows, path, parentRowsModified]);
 
   useEffect(() => {
     setLastModified(null);

src/client/components/views/collections/Edit/Default.js

@@ -23,7 +23,6 @@ const baseClass = 'collection-edit';
 
 const DefaultEditView = (props) => {
   const { params: { id } = {} } = useRouteMatch();
-  const { state: locationState } = useLocation();
 
   const {
     collection, isEditing, data, onSave,
@@ -39,7 +38,6 @@ const DefaultEditView = (props) => {
   } = collection;
 
   const apiURL = `${serverURL}${api}/${slug}/${id}`;
-  const dataToRender = locationState?.data || data;
   let action = `${serverURL}${api}/${slug}${isEditing ? `/${id}` : ''}`;
 
   if (auth && !isEditing) {
@@ -72,7 +70,7 @@ const DefaultEditView = (props) => {
               filter={field => (!field.position || (field.position && field.position !== 'sidebar'))}
               fieldTypes={fieldTypes}
               fieldSchema={fields}
-              initialData={dataToRender}
+              initialData={data}
               customComponentsPath={`${slug}.fields.`}
             />
           </div>
@@ -118,7 +116,7 @@ const DefaultEditView = (props) => {
               position="sidebar"
               fieldTypes={fieldTypes}
               fieldSchema={fields}
-              initialData={dataToRender}
+              initialData={data}
               customComponentsPath={`${slug}.fields.`}
             />
           </div>

src/client/components/views/collections/Edit/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useRouteMatch, useHistory } from 'react-router-dom';
+import { useRouteMatch, useHistory, useLocation } from 'react-router-dom';
 import config from 'payload/config';
 import { useStepNav } from '../../../elements/StepNav';
 import usePayloadAPI from '../../../../hooks/usePayloadAPI';
@@ -13,6 +13,7 @@ const { serverURL, routes: { admin, api } } = config;
 
 const EditView = (props) => {
   const { params: { id } = {} } = useRouteMatch();
+  const { state: locationState } = useLocation();
   const history = useHistory();
   const { setStepNav } = useStepNav();
   const [fields, setFields] = useState([]);
@@ -28,7 +29,7 @@ const EditView = (props) => {
   } = collection;
 
   const onSave = !isEditing ? (json) => {
-    history.push(`${admin}/collections/${collection.slug}/${json.doc.id}`, {
+    history.push(`${admin}/collections/${collection.slug}/${json?.doc?.id}`, {
       status: {
         message: json.message,
         type: 'success',
@@ -41,6 +42,8 @@ const EditView = (props) => {
     { initialParams: { 'fallback-locale': 'null' } },
   );
 
+  const dataToRender = locationState?.data || data;
+
   useEffect(() => {
     const nav = [{
       url: `${admin}/collections/${slug}`,
@@ -49,7 +52,7 @@ const EditView = (props) => {
 
     if (isEditing) {
       nav.push({
-        label: data ? data[useAsTitle || 'id'] : '',
+        label: dataToRender ? dataToRender[useAsTitle || 'id'] : '',
       });
     } else {
       nav.push({
@@ -58,7 +61,7 @@ const EditView = (props) => {
     }
 
     setStepNav(nav);
-  }, [setStepNav, isEditing, pluralLabel, data, slug, useAsTitle]);
+  }, [setStepNav, isEditing, pluralLabel, dataToRender, slug, useAsTitle]);
 
   useEffect(() => {
     setFields(formatFields(collection, isEditing));
@@ -69,7 +72,7 @@ const EditView = (props) => {
       DefaultComponent={DefaultEdit}
       path={`${slug}.views.Edit`}
       componentProps={{
-        data,
+        data: dataToRender,
         collection: { ...collection, fields },
         isEditing,
         onSave,

src/client/components/views/collections/List/index.js

@@ -15,6 +15,7 @@ const ListView = (props) => {
       },
     },
   } = props;
+
   const { setStepNav } = useStepNav();
 
   const [fields, setFields] = useState(collection.fields);
@@ -32,15 +33,13 @@ const ListView = (props) => {
   }, [setStepNav, plural]);
 
   return (
-    <>
-      <RenderCustomComponent
-        DefaultComponent={DefaultList}
-        path={`${slug}.views.List`}
-        componentProps={{
-          collection: { ...collection, fields },
-        }}
-      />
-    </>
+    <RenderCustomComponent
+      DefaultComponent={DefaultList}
+      path={`${slug}.views.List`}
+      componentProps={{
+        collection: { ...collection, fields },
+      }}
+    />
   );
 };
 

src/index.js

@@ -3,6 +3,7 @@ require('isomorphic-fetch');
 
 const path = require('path');
 const express = require('express');
+const history = require('connect-history-api-fallback');
 const graphQLPlayground = require('graphql-playground-middleware-express').default;
 const getConfig = require('./utilities/getConfig');
 const authenticate = require('./express/middleware/authenticate');
@@ -55,6 +56,8 @@ class Payload {
 
     // Initialize Admin panel
     if (!this.config.admin.disable && process.env.NODE_ENV !== 'test') {
+      this.express.use(this.config.routes.admin, history());
+
       if (process.env.NODE_ENV === 'production') {
         this.express.use(this.config.routes.admin, express.static(path.resolve(process.cwd(), 'build')));
       } else {

src/webpack/getWebpackDevConfig.js

@@ -14,12 +14,9 @@ module.exports = (config) => {
     },
     output: {
       path: '/',
-      publicPath: '/static',
+      publicPath: config.routes.admin,
       filename: '[name].js',
     },
-    devServer: {
-      historyApiFallback: true,
-    },
     devtool: 'source-map',
     mode: 'development',
     resolveLoader: { modules: [path.join(__dirname, '../../node_modules')] },

src/webpack/getWebpackProdConfig.js

@@ -1,4 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const Dotenv = require('dotenv-webpack');
 // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const path = require('path');
 const getStyleLoaders = require('./getStyleLoaders');
@@ -10,6 +11,7 @@ module.exports = (config) => {
     },
     output: {
       path: path.resolve(process.cwd(), 'build'),
+      publicPath: `${config.routes.admin}/`,
       filename: '[name].[chunkhash].js',
     },
     mode: 'production',
@@ -41,6 +43,7 @@ module.exports = (config) => {
                 require.resolve('@babel/preset-react'),
               ],
               plugins: [
+                require.resolve('@babel/plugin-proposal-optional-chaining'),
                 require.resolve('@babel/plugin-proposal-class-properties'),
                 [
                   require.resolve('@babel/plugin-transform-runtime'),
@@ -102,6 +105,9 @@ module.exports = (config) => {
         filename: './index.html',
         minify: true,
       }),
+      new Dotenv({
+        silent: true,
+      }),
     ],
     resolve: {
       modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],

src/webpack/init.js

@@ -16,15 +16,6 @@ function initWebpack() {
 
   router.use(webpackHotMiddleware(compiler));
 
-  router.get(`${this.config.routes.admin}*`, (req, res, next) => {
-    compiler.outputFileSystem.readFile('/index.html', (err, result) => {
-      if (err) {
-        return next(err);
-      }
-      return res.set('content-type', 'text/html').send(result);
-    });
-  });
-
   return router;
 }