📝 sections

package.json

@@ -94,7 +94,7 @@
     "errorhandler": "1.5.0",
     "eslint": "3.19.0",
     "eslint-config-airbnb": "14.1.0",
-    "eslint-config-prettier": "1.5.0",
+    "eslint-config-prettier": "1.6.0",
     "eslint-loader": "1.7.1",
     "eslint-plugin-flowtype": "2.30.4",
     "eslint-plugin-import": "2.2.0",

public/components/SectionList.jsx

@@ -7,23 +7,19 @@ import Loader from './Loader';
 import SortableContainer from './SortableContainer';
 import SortableItem from './SortableItem';
 import SectionListItem from './SectionListItem';
+import type { SectionsType } from '../types';
 
 type PropsType = {
   loading: boolean,
-  sections: Array<{
-    id: number,
-    title: string,
-    hidden: boolean,
-  }>,
+  sections: SectionsType,
   onAdd: Function,
   onSelect: Function,
   onMove: Function,
   onDrop: Function,
-  onToggleVisibility: Function,
   onDelete: Function,
 };
 
-export default function SectionList({ loading, sections, onAdd, onSelect, onMove, onDrop, onToggleVisibility, onDelete }: PropsType) {
+export default function SectionList({ loading, sections, onAdd, onSelect, onMove, onDrop, onDelete }: PropsType) {
   return (
     <Paper>
       <Toolbar>
@@ -42,7 +38,7 @@ export default function SectionList({ loading, sections, onAdd, onSelect, onMove
         <SortableContainer>
           {sections.map(section => (
             <SortableItem key={section.id} id={section.id} onMove={onMove} onDrop={onDrop}>
-              <SectionListItem section={section} onSelect={onSelect} onToggleVisibility={onToggleVisibility} onDelete={onDelete} />
+              <SectionListItem section={section} onSelect={onSelect} onDelete={onDelete} />
 
               <Divider />
             </SortableItem>

public/components/SectionListItem.jsx

@@ -6,29 +6,20 @@ import Edit from 'material-ui/svg-icons/image/edit';
 import Delete from 'material-ui/svg-icons/action/delete';
 import Visibility from 'material-ui/svg-icons/action/visibility';
 import VisibilityOff from 'material-ui/svg-icons/action/visibility-off';
+import type { SectionType } from '../types';
 import css from './SectionListItem.styl';
 
 type PropsType = {
-  section: {
-    title: string,
-    hidden: boolean,
-  },
+  section: SectionType,
   onSelect: Function,
-  onToggleVisibility: Function,
   onDelete: Function,
 };
 
-export default class SectionListItem extends Component {
-  props: PropsType;
-
+export default class SectionListItem extends Component<void, PropsType, void> {
   onSelect = () => {
     this.props.onSelect(this.props.section);
   };
 
-  onToggleVisibility = () => {
-    this.props.onToggleVisibility(this.props.section);
-  };
-
   onDelete = () => {
     this.props.onDelete(this.props.section);
   };
@@ -48,7 +39,7 @@ export default class SectionListItem extends Component {
           <Edit />
         </IconButton>
 
-        <IconButton touch onClick={this.onToggleVisibility} disabled>
+        <IconButton disabled>
           {hidden ? <VisibilityOff /> : <Visibility />}
         </IconButton>
 

public/constants/actionTypes.js

@@ -76,28 +76,6 @@ export const DELETE_GIFT_REQUEST = 'DELETE_GIFT_REQUEST';
 export const DELETE_GIFT_SUCCESS = 'DELETE_GIFT_SUCCESS';
 export const DELETE_GIFT_ERROR = 'DELETE_GIFT_ERROR';
 
-export const LOAD_SECTIONS_REQUEST = 'LOAD_SECTIONS_REQUEST';
-export const LOAD_SECTIONS_SUCCESS = 'LOAD_SECTIONS_SUCCESS';
-export const LOAD_SECTIONS_ERROR = 'LOAD_SECTIONS_ERROR';
-
-export const LOAD_SECTION_REQUEST = 'LOAD_SECTION_REQUEST';
-export const LOAD_SECTION_SUCCESS = 'LOAD_SECTION_SUCCESS';
-export const LOAD_SECTION_ERROR = 'LOAD_SECTION_ERROR';
-
-export const CREATE_SECTION_REQUEST = 'CREATE_SECTION_REQUEST';
-export const CREATE_SECTION_SUCCESS = 'CREATE_SECTION_SUCCESS';
-export const CREATE_SECTION_ERROR = 'CREATE_SECTION_ERROR';
-
-export const UPDATE_SECTION_REQUEST = 'UPDATE_SECTION_REQUEST';
-export const UPDATE_SECTION_SUCCESS = 'UPDATE_SECTION_SUCCESS';
-export const UPDATE_SECTION_ERROR = 'UPDATE_SECTION_ERROR';
-
-export const DELETE_SECTION_REQUEST = 'DELETE_SECTION_REQUEST';
-export const DELETE_SECTION_SUCCESS = 'DELETE_SECTION_SUCCESS';
-export const DELETE_SECTION_ERROR = 'DELETE_SECTION_ERROR';
-
-export const MOVE_SECTION = 'MOVE_SECTION';
-
 export const LOAD_GIFT_SETS_REQUEST = 'LOAD_GIFT_SETS_REQUEST';
 export const LOAD_GIFT_SETS_SUCCESS = 'LOAD_GIFT_SETS_SUCCESS';
 export const LOAD_GIFT_SETS_ERROR = 'LOAD_GIFT_SETS_ERROR';

public/containers/CreateSectionPage.jsx

@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import * as actions from '../actions/section';
+import * as actions from '../redux/sections';
 import SectionForm from '../components/SectionForm';
 
 type PropsType = {

public/containers/LandingPage.jsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import moment from 'moment';
 import * as weddingProfileActions from '../actions/weddingProfile';
-import * as sectionActions from '../actions/section';
+import * as sectionActions from '../redux/sections';
 import * as weddingPartyMembersActions from '../actions/weddingPartyMember';
 import * as giftActions from '../actions/gift';
 import * as basketActions from '../redux/basket';

public/containers/SectionsPage/index.jsx

@@ -0,0 +1,88 @@
+/* @flow */
+
+import React, { Component } from 'react';
+import { withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import type { Connector } from 'react-redux';
+import { loadSections, updateSection, deleteSection, moveSection } from '../../redux/sections';
+import { CREATE_SECTION_ROUTE, updateSectionRoute } from '../../constants/routes';
+import SectionList from '../../components/SectionList';
+import type { SectionsType, SectionType, SectionIdType } from '../../types';
+
+type PropsType = {
+  loading: boolean,
+  deleting: boolean,
+  sections: SectionsType,
+  loadSections: () => void,
+  updateSection: (section: SectionType) => void,
+  deleteSection: (section: SectionType) => void,
+  moveSection: ({ sourceId: SectionIdType, targetId: SectionIdType }) => void,
+  router: {
+    push: (route: string) => void,
+  },
+};
+
+const mapStateToProps = ({ sections: { sections, isLoading, isDeleting } }) => {
+  const sortedSections = sections.sort((a, b) => a.position - b.position);
+
+  return {
+    loading: isLoading,
+    deleting: isDeleting,
+    sections: sortedSections,
+  };
+};
+
+const mapDispatchToProps = { loadSections, updateSection, deleteSection, moveSection };
+
+export class SectionsPage extends Component<void, PropsType, void> {
+  componentDidMount() {
+    this.props.loadSections();
+  }
+
+  onAdd = () => {
+    this.props.router.push(CREATE_SECTION_ROUTE);
+  };
+
+  onSelect = ({ id }: SectionType) => {
+    this.props.router.push(updateSectionRoute(id));
+  };
+
+  onDrop = ({ id }: SectionType) => {
+    const section = this.props.sections.find(o => o.id === id);
+
+    if (!section) {
+      // TODO: Error?
+      return;
+    }
+
+    this.props.updateSection(section);
+  };
+
+  onDelete = (section: SectionType) => {
+    if (!confirm('Are you sure you want to delete this section?')) {
+      return;
+    }
+
+    this.props.deleteSection(section);
+  };
+
+  render() {
+    const { loading, sections, moveSection: onMove } = this.props;
+
+    return (
+      <SectionList
+        loading={loading}
+        sections={sections}
+        onAdd={this.onAdd}
+        onSelect={this.onSelect}
+        onMove={onMove}
+        onDrop={this.onDrop}
+        onDelete={this.onDelete}
+      />
+    );
+  }
+}
+
+const connector: Connector<PropsType, PropsType> = connect(mapStateToProps, mapDispatchToProps);
+
+export default withRouter(connector(SectionsPage));