feat(Walk): Display image filename in OrganizePreviews

ui/app/components/OrganizePreviews/index.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+
+// a little function to help us with reordering the result
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+const grid = 8;
+
+const getItemStyle = (isDragging, draggableStyle) => ({
+  // some basic styles to make the items look a bit nicer
+  userSelect: 'none',
+  padding: grid * 2,
+  margin: `0 0 ${grid}px 0`,
+
+  // change background colour if dragging
+  background: isDragging ? 'lightgreen' : 'grey',
+
+  // styles we need to apply on draggables
+  ...draggableStyle,
+});
+
+const getListStyle = (isDraggingOver) => ({
+  background: isDraggingOver ? 'lightblue' : 'lightgrey',
+  padding: grid,
+  width: 250,
+});
+
+function OrganizePreviews({ items: initialItems }) {
+  const [items, setItems] = useState(initialItems);
+
+  function onDragEnd(result) {
+    // dropped outside the list
+    if (!result.destination) {
+      return;
+    }
+
+    setItems(reorder(
+      items,
+      result.source.index,
+      result.destination.index,
+    ));
+  }
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="droppable">
+        {(providedDrop, snapshotDrop) => (
+          <div
+            {...providedDrop.droppableProps}
+            ref={providedDrop.innerRef}
+            style={getListStyle(snapshotDrop.isDraggingOver)}
+          >
+            {items.map((item, index) => (
+              <Draggable key={item.id} draggableId={item.id} index={index}>
+                {(providedDrag, snapshotDrag) => (
+                  <div
+                    ref={providedDrag.innerRef}
+                    {...providedDrag.draggableProps}
+                    {...providedDrag.dragHandleProps}
+                    style={getItemStyle(
+                      snapshotDrag.isDragging,
+                      providedDrag.draggableProps.style,
+                    )}
+                  >
+                    {item.content}
+                  </div>
+                )}
+              </Draggable>
+            ))}
+            {providedDrop.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+}
+
+export default OrganizePreviews;

ui/app/components/OrganizePreviews/tests/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+	extends: '../../../../test.eslintrc.js',
+};

ui/app/components/OrganizePreviews/tests/index.stories.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import OrganizePreviews from '../index';
+
+export default {
+  title: 'OrganizePreviews',
+  component: OrganizePreviews,
+};
+
+export const OrganizePreviewStories = () => {
+  // fake data generator
+  const getItems = (count) => Array.from({ length: count }, (v, k) => k).map((k) => ({
+    id: `item-${k}`,
+    content: `item ${k + 1}`,
+  }));
+
+  return (
+    <OrganizePreviews items={getItems(7)} />
+  );
+};
+
+OrganizePreviewStories.story = {
+  name: 'with text',
+};

ui/app/containers/Walk/ListFolders.jsx

@@ -5,10 +5,10 @@ import ListItem from '../../components/ListItem';
 
 import walkUtils from './util';
 
-const { areImages } = walkUtils;
+const { isImage } = walkUtils;
 
 function Contents({ item: file }) {
-  if (areImages(file)) {
+  if (isImage(file)) {
     return null;
   }
 

ui/app/containers/Walk/index.jsx

@@ -10,9 +10,13 @@ import saga from './saga';
 import { makeSelectFiles, makeSelectPath } from './selectors';
 import { useInjectSaga } from '../../utils/injectSaga';
 import { useInjectReducer } from '../../utils/injectReducer';
+import walkUtils from './util';
 
-import ListFolders from './ListFolders';
 import GenericList from '../../components/GenericList';
+import ListFolders from './ListFolders';
+import OrganizePreviews from '../../components/OrganizePreviews';
+
+const { isImage } = walkUtils;
 
 function parseQueryString(find, from) {
   if (!find || !from) return '';
@@ -35,7 +39,9 @@ function Walk({
     doListDirectory(path);
   }, [doListDirectory, path]);
 
-  return [
+  const loading = !files || files.length === 0;
+
+  const Components = [
     <Helmet key="walk-Helmet">
       <title>Walk</title>
       <meta name="description" content="Description of Walk" />
@@ -44,10 +50,20 @@ function Walk({
       key="walk-GenericList"
       component={ListFolders}
       items={files.map((f) => ({ id: f.path, ...f }))}
-      loading={!files || files.length === 0}
+      loading={loading}
       error={false}
     />,
   ];
+
+  const images = files.filter((f) => isImage(f));
+  if (!loading && images.length > 0) {
+    Components.push(<OrganizePreviews
+      key="walk-OrganizePreviews"
+      items={images.map((f) => ({ id: f.path, content: f.filename, ...f }))}
+    />);
+  }
+
+  return Components;
 }
 
 const mapStateToProps = createStructuredSelector({

ui/app/containers/Walk/util.js

@@ -1,9 +1,9 @@
 const config = require('../../../../config.json');
 
-function areImages(file) {
+function isImage(file) {
   return (file.mediumType === 'image' && config.supportedFileTypes.photo.includes(file.ext.toLowerCase()));
 }
 
 export default {
-  areImages,
+  isImage,
 };

ui/internals/generators/component/index.js.hbs

@@ -1,15 +1,8 @@
-/**
- *
- * {{ properCase name }}
- *
- */
-
 {{#if memo}}
 import React, { memo } from 'react';
 {{else}}
 import React from 'react';
 {{/if}}
-// import PropTypes from 'prop-types';
 // import styled from 'styled-components';
 
 {{#if wantMessages}}
@@ -27,8 +20,6 @@ function {{ properCase name }}() {
   );
 }
 
-{{ properCase name }}.propTypes = {};
-
 {{#if memo}}
 export default memo({{ properCase name }});
 {{else}}

ui/package.json

@@ -87,6 +87,7 @@
     "moment": "^2.20.1",
     "ngrok": "3.1.1",
     "react": "16.8.6",
+    "react-beautiful-dnd": "^13.0.0",
     "react-dates": "^20.2.1",
     "react-dom": "16.8.6",
     "react-helmet": "6.0.0-beta",