From 41f4981fb82e59e79cd5ba68231ba5ecd63e16b7 Mon Sep 17 00:00:00 2001 From: James Date: Thu, 6 Dec 2018 16:51:40 -0800 Subject: [PATCH] modifies Page.find to rely on slug instead, wires up API call to retrieve single record --- demo/Page/Page.controller.js | 2 +- demo/Page/Page.routes.js | 2 +- demo/Page/components/Edit/index.js | 3 +-- src/components/data/archive.js | 6 ++---- src/components/data/edit.js | 15 ++++++++++++++- src/components/layout/Table/index.scss | 2 +- src/components/modules/APIUrl/index.js | 4 ++-- src/components/modules/SearchableTable/index.js | 2 +- src/components/views/collections/Edit/index.js | 8 ++++++-- src/scss/vars.scss | 8 ++++++-- 10 files changed, 35 insertions(+), 17 deletions(-) diff --git a/demo/Page/Page.controller.js b/demo/Page/Page.controller.js index da44738f4a..59dd2adb6a 100644 --- a/demo/Page/Page.controller.js +++ b/demo/Page/Page.controller.js @@ -14,7 +14,7 @@ const pageController = { }, find(req, res) { - Page.findById(req.params.id, (err, doc) => { + Page.findOne({ 'slug': req.params.slug }, (err, doc) => { if (err) { return res.status(httpStatus.INTERNAL_SERVER_ERROR).json({error: err}); } diff --git a/demo/Page/Page.routes.js b/demo/Page/Page.routes.js index 55c701b326..5c6e70ed62 100644 --- a/demo/Page/Page.routes.js +++ b/demo/Page/Page.routes.js @@ -10,7 +10,7 @@ router .post(pagePolicy.post, pageController.post); router - .route('/:id') + .route('/:slug') .get(pagePolicy.find, pageController.find) .put(pagePolicy.update, pageController.update) .delete(pagePolicy.delete, pageController.delete); diff --git a/demo/Page/components/Edit/index.js b/demo/Page/components/Edit/index.js index f72b08d8d6..556d16cba4 100644 --- a/demo/Page/components/Edit/index.js +++ b/demo/Page/components/Edit/index.js @@ -23,7 +23,6 @@ class Edit extends Component { this.collection = Page; this.state = { - data: false, slug: this.props.match.params.slug } @@ -36,7 +35,7 @@ class Edit extends Component { render() { return ( - +
{ componentDidMount() { api.requests.get(`${config.serverUrl}/${collection.slug}`).then( - res => - this.setState({ data: res }), - err => - console.warn(err) + res => this.setState({ data: res }), + err => console.warn(err) ) } diff --git a/src/components/data/edit.js b/src/components/data/edit.js index d93b023c23..7189fa4500 100644 --- a/src/components/data/edit.js +++ b/src/components/data/edit.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import { withRouter } from 'react-router-dom'; +import api from 'payload/api'; const withEditData = (PassedComponent, collection, config) => { @@ -11,12 +13,23 @@ const withEditData = (PassedComponent, collection, config) => { } } + componentDidMount() { + const slug = this.props.match.params.slug; + + if (slug) { + api.requests.get(`${config.serverUrl}/${collection.slug}/${slug}`).then( + res => this.setState({ data: res }), + err => console.warn(err) + ) + } + } + render() { return ; } } - return EditData; + return withRouter(EditData); } export default withEditData; diff --git a/src/components/layout/Table/index.scss b/src/components/layout/Table/index.scss index 825621eacf..01a2065a90 100644 --- a/src/components/layout/Table/index.scss +++ b/src/components/layout/Table/index.scss @@ -15,7 +15,7 @@ table { } tbody { - @extend %inputShadow; + @extend %shadow-sm; } tr:nth-child(even) { diff --git a/src/components/modules/APIUrl/index.js b/src/components/modules/APIUrl/index.js index 6c50e56480..25f9fc923c 100644 --- a/src/components/modules/APIUrl/index.js +++ b/src/components/modules/APIUrl/index.js @@ -4,12 +4,12 @@ import { Label, Input } from 'payload/components'; const APIUrl = props => { - const apiUrl = `${props.serverUrl}/${props.collectionSlug}?slug=${props.slug ? `${props.slug}` : ''}`; + const apiUrl = `${props.serverUrl}/${props.collectionSlug}/${props.slug ? `${props.slug}` : ''}`; return (
- +
); diff --git a/src/components/modules/SearchableTable/index.js b/src/components/modules/SearchableTable/index.js index 2cd9587680..1f47b2a73c 100644 --- a/src/components/modules/SearchableTable/index.js +++ b/src/components/modules/SearchableTable/index.js @@ -27,7 +27,7 @@ class SearchableTable extends Component { return this.props.data.map(row => { const formattedRow = {...row}; - const url = `/${this.props.collection.slug}/${row.slug}`; + const url = `/collections/${this.props.collection.slug}/${row.slug}`; // Link the first column formattedRow[this.state.columns[0].key] = {row[this.state.columns[0].key]} diff --git a/src/components/views/collections/Edit/index.js b/src/components/views/collections/Edit/index.js index e154835594..e83979cdb0 100644 --- a/src/components/views/collections/Edit/index.js +++ b/src/components/views/collections/Edit/index.js @@ -28,10 +28,14 @@ const EditView = props => {
{isEditing && -

Edit Page {}

+

+ Edit {props.collection.singular} {props.data && + props.data[props.collection.uid] + } +

} {!isEditing && -

Create New Page

+

Create New {props.collection.singular}

}
{props.children} diff --git a/src/scss/vars.scss b/src/scss/vars.scss index a95a757450..47a24745d5 100644 --- a/src/scss/vars.scss +++ b/src/scss/vars.scss @@ -52,13 +52,17 @@ $radius-sm : 5px; $radius-lrg : 10px; $stroke-width : 1px; +%shadow-sm { + box-shadow: 0 2px 4px 0 rgba(0,2,4,.1), + 0 2px 20px 0 rgba(0,2,4,.04); +} + %shadow { box-shadow: 0 22px 65px rgba(0,0,0,.07); } %inputShadow { - box-shadow: 0 2px 4px 0 rgba(0,2,4,.1), - 0 2px 20px 0 rgba(0,2,4,.04); + @extend %shadow-sm; &:hover { box-shadow: 0 2px 4px 0 rgba(0,2,4,.1),