From a07fb3baf14c5658b56b78a1a99629d6d7316741 Mon Sep 17 00:00:00 2001 From: danactive Date: Sat, 13 Jun 2020 16:36:43 -0700 Subject: [PATCH] feat(Walk): Rename Button renames image files based on calendar --- ui/app/components/Button/Wrapper.js | 9 - ui/app/components/Button/index.jsx | 3 +- ui/app/components/OrganizePreviews/index.jsx | 6 +- .../OrganizePreviews/tests/index.stories.jsx | 18 +- ui/app/containers/AdminLandingPage/index.jsx | 1 + ui/app/containers/Walk/Menu.jsx | 42 ++++ ui/app/containers/Walk/RenameButton.jsx | 55 +++++ ui/app/containers/Walk/controls.jsx | 63 ------ ui/app/containers/Walk/index.jsx | 33 ++- ui/app/containers/Walk/rename.jsx | 63 ------ ui/app/containers/Walk/tests/Menu.stories.jsx | 16 ++ ui/package-lock.json | 201 +++++------------- ui/package.json | 4 +- 13 files changed, 208 insertions(+), 306 deletions(-) delete mode 100755 ui/app/components/Button/Wrapper.js create mode 100644 ui/app/containers/Walk/Menu.jsx create mode 100644 ui/app/containers/Walk/RenameButton.jsx delete mode 100644 ui/app/containers/Walk/controls.jsx delete mode 100644 ui/app/containers/Walk/rename.jsx create mode 100644 ui/app/containers/Walk/tests/Menu.stories.jsx diff --git a/ui/app/components/Button/Wrapper.js b/ui/app/components/Button/Wrapper.js deleted file mode 100755 index e69d2094d..000000000 --- a/ui/app/components/Button/Wrapper.js +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components'; - -const Wrapper = styled.div` - width: 100%; - text-align: center; - margin: 4em 0; -`; - -export default Wrapper; diff --git a/ui/app/components/Button/index.jsx b/ui/app/components/Button/index.jsx index 67d68acda..639f293ba 100755 --- a/ui/app/components/Button/index.jsx +++ b/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 {button}; + return button; } export default Button; diff --git a/ui/app/components/OrganizePreviews/index.jsx b/ui/app/components/OrganizePreviews/index.jsx index 0abd6c0ae..ec85cf7ef 100755 --- a/ui/app/components/OrganizePreviews/index.jsx +++ b/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) { diff --git a/ui/app/components/OrganizePreviews/tests/index.stories.jsx b/ui/app/components/OrganizePreviews/tests/index.stories.jsx index 427fdf66b..6427ca4c4 100644 --- a/ui/app/components/OrganizePreviews/tests/index.stories.jsx +++ b/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 ( - + ); }; - -OrganizePreviewStories.story = { - name: 'with text', -}; diff --git a/ui/app/containers/AdminLandingPage/index.jsx b/ui/app/containers/AdminLandingPage/index.jsx index b53fec82d..5fb1f7529 100755 --- a/ui/app/containers/AdminLandingPage/index.jsx +++ b/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 }) => {item.label}} />; return ( diff --git a/ui/app/containers/Walk/Menu.jsx b/ui/app/containers/Walk/Menu.jsx new file mode 100644 index 000000000..b842f14e6 --- /dev/null +++ b/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 ( +
+ setDate(inputDate)} + onFocusChange={({ focused }) => setFocus(focused)} + isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())} + regular + /> + +
+ ); + } + + return null; +} + +export default Menu; diff --git a/ui/app/containers/Walk/RenameButton.jsx b/ui/app/containers/Walk/RenameButton.jsx new file mode 100644 index 000000000..471c74ad9 --- /dev/null +++ b/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 [ + , +