updates withListData

components.js

@@ -1,72 +0,0 @@
-export { default as App } from './src/client/components/App';
-
-// Controls
-export { default as Button } from './src/client/components/controls/Button';
-
-// Data
-export { default as withListData } from './src/client/components/data/list';
-export { default as withEditData } from './src/client/components/data/edit';
-
-// Field Types
-export { default as fieldType } from './src/client/components/field-types/fieldType';
-export { default as Group } from './src/client/components/field-types/Group';
-export { default as Repeater } from './src/client/components/field-types/Repeater';
-export { default as Input } from './src/client/components/field-types/Input';
-export { default as Media } from './src/client/components/field-types/Media';
-export { default as Email } from './src/client/components/field-types/Email';
-export { default as Password } from './src/client/components/field-types/Password';
-export { default as Textarea } from './src/client/components/field-types/Textarea';
-export { default as HiddenInput } from './src/client/components/field-types/HiddenInput';
-
-// Forms
-export { default as Form, FormContext } from './src/client/components/forms/Form';
-export { default as FormSubmit } from './src/client/components/forms/Submit';
-
-// Graphics
-export { default as PayloadIcon } from './src/client/components/graphics/PayloadIcon';
-export { default as PayloadLogo } from './src/client/components/graphics/PayloadLogo';
-export { default as Arrow } from './src/client/components/graphics/Arrow';
-export { default as Close } from './src/client/components/graphics/Close';
-
-// Layout
-export { default as DefaultTemplate } from './src/client/components/layout/DefaultTemplate';
-export { default as Sticky } from './src/client/components/layout/Sticky';
-export { default as Sidebar } from './src/client/components/layout/Sidebar';
-export { default as ContentBlock } from './src/client/components/layout/ContentBlock';
-export { default as Table } from './src/client/components/layout/Table';
-export { default as Section } from './src/client/components/layout/Section';
-
-// Modals
-export { default as asModal } from './src/client/components/modals/asModal';
-
-// Modules
-export { default as Status } from './src/client/components/modules/Status';
-export { default as StickyHeader } from './src/client/components/modules/StickyHeader';
-export { default as HeadingButton } from './src/client/components/modules/HeadingButton';
-export { default as Filter } from './src/client/components/modules/Filter';
-export { default as APIUrl } from './src/client/components/modules/APIUrl';
-export { default as StepNav } from './src/client/components/modules/StepNav';
-export { default as Tooltip } from './src/client/components/modules/Tooltip';
-export { default as SearchableTable } from './src/client/components/modules/SearchableTable';
-export { default as Localizer } from './src/client/components/modules/Localizer';
-export { default as UploadMedia } from './src/client/components/modules/UploadMedia';
-
-
-// Routes
-export { default as CollectionRoutes } from './src/client/components/routes/Collections';
-
-// Utilities
-export { default as MeasureWindow } from './src/client/components/utilities/MeasureWindow';
-export { default as MeasureScroll } from './src/client/components/utilities/MeasureScroll';
-export { default as SetStepNav } from './src/client/components/utilities/SetStepNav';
-export { default as LoadGlobals } from './src/client/components/utilities/LoadGlobals';
-export { default as SetLocale } from './src/client/components/utilities/SetLocale';
-export { default as SetSearchParams } from './src/client/components/utilities/SetSearchParams';
-
-// Views
-export { default as Dashboard } from './src/client/components/views/Dashboard';
-export { default as Login } from './src/client/components/views/Login';
-export { default as CreateUser } from './src/client/components/views/CreateUser';
-export { default as MediaLibrary } from './src/client/components/views/MediaLibrary';
-export { default as ListView } from './src/client/components/views/collections/List';
-export { default as EditView } from './src/client/components/views/collections/Edit';

demo/init.js

@@ -1,5 +1,5 @@
 const express = require('express');
-const Payload = require('../');
+const Payload = require('../src');
 const config = require('./payload.config');
 
 const router = express.Router({}); // eslint-disable-line new-cap

index.js

@@ -1 +0,0 @@
-module.exports = require('./src');

src/client/components/data/list.js

@@ -1,53 +1,42 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import api from 'payload/api';
-
-const mapState = state => ({
-  locale: state.common.locale,
-});
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import config from 'payload-config';
+import { requests } from '../../api';
+import useMountEffect from '../../hooks/useMountEffect';
+import { useLocale } from '../utilities/Locale';
 
 const withListData = (PassedComponent) => {
-  class ListData extends Component {
-    constructor(props) {
-      super(props);
+  const ListData = (props) => {
+    const { collection } = props;
+    const locale = useLocale();
+    const [data, setData] = useState({});
 
-      this.state = {
-        data: [],
-      };
-    }
-
-    fetchData = () => {
-      const params = {
-        locale: this.props.locale,
-      };
-
-      api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}`, params).then(
-        res => this.setState({ data: res }),
+    const fetchData = () => {
+      const params = { locale };
+      requests.get(`${config.serverUrl}/${collection.slug}`, params).then(
+        res => setData(res),
         err => console.warn(err),
       );
-    }
+    };
 
-    componentDidMount() {
-      this.fetchData();
-    }
+    useMountEffect(fetchData);
+    useEffect(fetchData, [locale]);
 
-    componentDidUpdate(prevProps) {
-      if (prevProps.locale !== this.props.locale) {
-        this.fetchData();
-      }
-    }
+    return (
+      <PassedComponent
+        {...props}
+        data={data}
+      />
+    );
+  };
 
-    render() {
-      return (
-        <PassedComponent
-          {...this.props}
-          data={this.state.data}
-        />
-      );
-    }
-  }
+  ListData.propTypes = {
+    collection: PropTypes.shape({
+      slug: PropTypes.string,
+    }).isRequired,
+  };
 
-  return connect(mapState)(ListData);
+  return ListData;
 };
 
 export default withListData;

src/client/components/modules/Filter/index.js

@@ -1,14 +1,16 @@
-import React, { Component } from 'react';
-import { Form, Input } from 'payload/components';
+import React from 'react';
+import Form from '../../forms/Form';
+import Input from '../../forms/field-types/Input';
 
-class Filter extends Component {
-  render() {
-    return (
-      <Form className="filter">
-        <Input placeholder="Search" name="keywords" />
-      </Form>
-    );
-  }
-}
+const Filter = () => {
+  return (
+    <Form className="filter">
+      <Input
+        placeholder="Search"
+        name="keywords"
+      />
+    </Form>
+  );
+};
 
 export default Filter;

src/client/components/modules/HeadingButton/index.js

@@ -1,15 +1,34 @@
 import React from 'react';
-import { Button } from 'payload/components';
+import PropTypes from 'prop-types';
+import Button from '../../controls/Button';
 
 import './index.scss';
 
-const HeadingButton = props => {
+const HeadingButton = (props) => {
+  const {
+    heading, buttonType, buttonURL, buttonLabel,
+  } = props;
+
   return (
     <header className="heading-button">
-      <h1>{props.heading}</h1>
-      <Button size="small" type="secondary" el={props.buttonType} url={props.buttonUrl}>{props.buttonLabel}</Button>
+      <h1>{heading}</h1>
+      <Button
+        size="small"
+        type="secondary"
+        el={buttonType}
+        url={buttonURL}
+      >
+        {buttonLabel}
+      </Button>
     </header>
   );
 };
 
+HeadingButton.propTypes = {
+  heading: PropTypes.string.isRequired,
+  buttonType: PropTypes.string.isRequired,
+  buttonURL: PropTypes.string.isRequired,
+  buttonLabel: PropTypes.string.isRequired,
+};
+
 export default HeadingButton;

src/client/components/modules/SearchableTable/index.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import { Filter, Table } from 'payload/components'
+import Filter from '../Filter';
+import Table from '../../layout/Table';
 
 class SearchableTable extends Component {
-
   constructor(props) {
     super(props);
 
@@ -11,29 +11,29 @@ class SearchableTable extends Component {
       rows: this.structureRows(this.props.data),
       columns: [{
         key: 'title',
-        label: 'Title'
+        label: 'Title',
       }, {
         key: '_id',
-        label: 'ID'
+        label: 'ID',
       }, {
         key: 'createdAt',
         label: 'Created At',
-        handler: time => new Date(time).toDateString()
-      }]
-    }
+        handler: time => new Date(time).toDateString(),
+      }],
+    };
   }
 
   structureRows = () => {
     if (this.props.data) {
-      return this.props.data.map(row => {
+      return this.props.data.map((row) => {
         const formattedRow = { ...row };
 
         const url = `/collections/${this.props.collection.slug}/${row._id}`;
 
         // Link the first column
-        formattedRow[this.state.columns[0].key] = <Link to={url}>{row[this.state.columns[0].key]}</Link>
+        formattedRow[this.state.columns[0].key] = <Link to={url}>{row[this.state.columns[0].key]}</Link>;
         return formattedRow;
-      })
+      });
     }
 
     return [];
@@ -42,19 +42,21 @@ class SearchableTable extends Component {
   componentDidUpdate(prevProps) {
     if (prevProps.data !== this.props.data) {
       this.setState({
-        rows: this.structureRows(this.props.data)
-      })
+        rows: this.structureRows(this.props.data),
+      });
     }
   }
 
   render() {
-
     return (
       <React.Fragment>
         <Filter />
-        <Table rows={this.state.rows} columns={this.state.columns} />
+        <Table
+          rows={this.state.rows}
+          columns={this.state.columns}
+        />
       </React.Fragment>
-    )
+    );
   }
 }
 

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import withListData from '../../../data/list';
 import DefaultTemplate from '../../../layout/DefaultTemplate';
+import HeadingButton from '../../../modules/HeadingButton';
+import SearchableTable from '../../../modules/SearchableTable';
 
 import './index.scss';
 
 const ListView = (props) => {
-  const { collection } = props;
+  const { collection, data } = props;
 
   return (
     <DefaultTemplate
@@ -16,7 +19,16 @@ const ListView = (props) => {
         },
       ]}
     >
-      <h1>{collection.labels.plural}</h1>
+      <HeadingButton
+        heading={collection.labels.plural}
+        buttonLabel="Add New"
+        buttonURL={`/collections/${collection.slug}/create`}
+        buttonType="link"
+      />
+      <SearchableTable
+        data={data.docs}
+        collection={collection}
+      />
     </DefaultTemplate>
   );
 };
@@ -26,7 +38,11 @@ ListView.propTypes = {
     labels: PropTypes.shape({
       plural: PropTypes.string,
     }),
+    slug: PropTypes.string,
+  }).isRequired,
+  data: PropTypes.shape({
+    docs: PropTypes.array,
   }).isRequired,
 };
 
-export default ListView;
+export default withListData(ListView);