feat(Walk): Rename Button renames image files based on calendar

ui/app/components/Button/index.jsx

@@ -10,7 +10,6 @@ import React, { Children } from 'react';
 
 import A from './A';
 import StyledButton from './StyledButton';
-import Wrapper from './Wrapper';
 
 function Button({
   children,
@@ -34,7 +33,7 @@ function Button({
     );
   }
 
-  return <Wrapper>{button}</Wrapper>;
+  return button;
 }
 
 export default Button;

ui/app/components/OrganizePreviews/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 
 // a little function to help us with reordering the result
@@ -31,9 +31,7 @@ const getListStyle = (isDraggingOver) => ({
   width: 250,
 });
 
-function OrganizePreviews({ items: initialItems }) {
-  const [items, setItems] = useState(initialItems);
-
+function OrganizePreviews({ items, setItems }) {
   function onDragEnd(result) {
     // dropped outside the list
     if (!result.destination) {

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

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

ui/app/containers/AdminLandingPage/index.jsx

@@ -15,6 +15,7 @@ export function AdminLandingPage() {
     { label: 'Resize', href: '/admin/resize' },
   ].map(applyId);
 
+  // TODO danactive change href to onChange to be SPA and decrease page loads
   const ListComponent = ({ item }) => <ListItem item={<A href={item.href}>{item.label}</A>} />;
 
   return (

ui/app/containers/Walk/Menu.jsx

@@ -0,0 +1,42 @@
+import moment from 'moment';
+import React, { useState } from 'react';
+import 'react-dates/initialize';
+import { isInclusivelyBeforeDay, SingleDatePicker } from 'react-dates';
+import 'react-dates/lib/css/_datepicker.css';
+
+import RenameButton from './RenameButton';
+
+function Menu({
+  showMenu,
+  imageFilenames,
+  path,
+}) {
+  const [isFocused, setFocus] = useState(false);
+  const [date, setDate] = useState(moment().hour(1));
+
+  if (showMenu) {
+    return (
+      <section>
+        <SingleDatePicker
+          date={date}
+          displayFormat="yyyy-MM-DD"
+          showDefaultInputIcon
+          focused={isFocused}
+          onDateChange={(inputDate) => setDate(inputDate)}
+          onFocusChange={({ focused }) => setFocus(focused)}
+          isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())}
+          regular
+        />
+        <RenameButton
+          filenames={imageFilenames}
+          prefix={date.toISOString().split('T')[0]}
+          path={path}
+        />
+      </section>
+    );
+  }
+
+  return null;
+}
+
+export default Menu;

ui/app/containers/Walk/RenameButton.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+
+import Button from '../../components/Button';
+import config from '../../../../config.json';
+import request from '../../utils/request';
+
+function Rename({
+  filenames,
+  path,
+  prefix,
+}) {
+  const [output, setOutput] = useState('');
+  const postBody = {
+    filenames,
+    prefix,
+    source_folder: path,
+    preview: false,
+    raw: true,
+    rename_associated: true,
+  };
+  const options = {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: JSON.stringify(postBody),
+  };
+
+  function onClick() {
+    /*
+    curl -d '{"filenames":["a.jpg","b.jpg"], "prefix": "2020-06-13",
+    "source_folder": "/todo/doit", "preview": "false", "raw": "true", "rename_associated": "true"}'
+    -i http://127.0.0.1:8000/admin/rename  -H "Content-Type: application/json"
+     */
+    return request(`http://localhost:${config.apiPort}/admin/rename`, options)
+      .then(setOutput);
+  }
+
+  return [
+    <Button
+      key="rename"
+      handleRoute={onClick}
+    >
+      Rename
+    </Button>,
+    <textarea
+      key="console"
+      id="console"
+      style={{ padding: '1em', fontFamily: '"Montserrat", "sans-serif"', fontSize: '1em' }}
+      value={JSON.stringify(output.xml, null, '\t')}
+    />,
+  ];
+}
+
+export default Rename;

ui/app/containers/Walk/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
@@ -14,6 +14,7 @@ import walkUtils from './util';
 
 import GenericList from '../../components/GenericList';
 import ListFolders from './ListFolders';
+import Menu from './Menu';
 import OrganizePreviews from '../../components/OrganizePreviews';
 
 const { isImage } = walkUtils;
@@ -31,7 +32,7 @@ function Walk({
 }) {
   useInjectReducer({ key: 'walk', reducer });
   useInjectSaga({ key: 'walk', saga });
-
+  const [stateItems, setItems] = useState([]);
   const qsPath = parseQueryString('path', querystring);
   const path = qsPath || statePath;
 
@@ -40,26 +41,46 @@ function Walk({
   }, [doListDirectory, path]);
 
   const loading = !files || files.length === 0;
+  const itemFiles = files.map((file) => ({
+    id: file.path,
+    content: file.filename,
+    ...file,
+  }));
+  const itemImages = itemFiles.filter((file) => isImage(file));
+  const hasImages = !loading && itemImages.length > 0;
 
   const Components = [
     <Helmet key="walk-Helmet">
       <title>Walk</title>
       <meta name="description" content="Description of Walk" />
     </Helmet>,
+    <Menu
+      key="walk-Menu"
+      showMenu={hasImages}
+      imageFilenames={stateItems.map((i) => i.filename)}
+      path={path}
+    />,
     <GenericList
       key="walk-GenericList"
       component={ListFolders}
-      items={files.map((f) => ({ id: f.path, ...f }))}
+      items={itemFiles}
       loading={loading}
       error={false}
     />,
   ];
 
-  const images = files.filter((f) => isImage(f));
-  if (!loading && images.length > 0) {
+  if (hasImages) {
+    let items = itemImages;
+    if (stateItems.length > 0) {
+      items = stateItems;
+    } else {
+      setItems(itemImages);
+    }
+
     Components.push(<OrganizePreviews
       key="walk-OrganizePreviews"
-      items={images.map((f) => ({ id: f.path, content: f.filename, ...f }))}
+      items={items}
+      setItems={setItems}
     />);
   }