feat(Walk): Show full dimension images

danactive · Jun 16, 2020 · 956e8fc · 956e8fc
1 parent 93e5dc8
commit 956e8fc
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 55 deletions.
diff --git a/api/server/plugins/admin/components/page.jsx b/api/server/plugins/admin/components/page.jsx
@@ -11,58 +11,11 @@ function Page() {
       </head>
       <body>
         <ul>
-          <li>
-            <a href="/admin/get_geocode_via_map.html">
-              Get geocode via map
-            </a>
-            {' '}
-            (Broken)
-          </li>
           <li>
             <a href="/edit/album">
               Edit Album
             </a>
           </li>
-          <li>
-            <a href="/admin/walk-path">
-              Walk todo photos
-            </a>
-            {' '}
-            (Broken)
-          </li>
-          <li>
-            <a href="/admin/diff-album-path">
-              Compare album XML to filenames
-            </a>
-            {' '}
-            (Broken)
-          </li>
-        </ul>
-        <h3>
-          Harness
-        </h3>
-        <ul>
-          <li>
-            <a href="map.htm">
-              Slippy map cycle through pins one at a time
-            </a>
-            {' '}
-            (Broken)
-          </li>
-          <li>
-            <a href="albumXml.htm">
-              Convert album XML to JSON
-            </a>
-            {' '}
-            (Broken)
-          </li>
-          <li>
-            <a href="../public/justifiedGallery.htm?lat=49.25&amp;lon=-123.1">
-              Flickr fully justified gallery
-            </a>
-            {' '}
-            (Broken)
-          </li>
         </ul>
       </body>
     </html>

diff --git a/ui/app/components/OrganizePreviews/index.jsx b/ui/app/components/OrganizePreviews/index.jsx
@@ -28,7 +28,7 @@ const getItemStyle = (isDragging, draggableStyle) => ({
 const getListStyle = (isDraggingOver) => ({
   background: isDraggingOver ? 'lightblue' : 'lightgrey',
   padding: grid,
-  width: 250,
+  width: 278,
 });
 
 function OrganizePreviews({ items, setItems }) {

diff --git a/...iners/AlbumViewPage/tests/actions.jest.js → ...iners/AlbumViewPage/tests/actions.test.js b/...iners/AlbumViewPage/tests/actions.jest.js → ...iners/AlbumViewPage/tests/actions.test.js
@@ -121,6 +121,7 @@ describe('Load album hosted on Dropbox', () => {
       type: LOAD_ALBUM_SUCCESS,
       gallery: 'demo',
       album: 'sample',
+      host: 'dropbox',
       memories: fixtures.memories,
     };
 
@@ -146,7 +147,15 @@ describe('Load album hosted on Dropbox', () => {
     };
     const received = reducer(state, albumLoadSuccess(sagaResult));
     const expected = produce(state, (draft) => {
-      draft.demo.sample.memories = fixtures.memories;
+      draft.dropbox = {
+        demo: {
+          sample: {
+            memories: [{
+              filename: '2017-12-25.jpg',
+            }],
+          },
+        },
+      };
     });
 
     expect(received).toEqual(expected);
@@ -207,10 +216,6 @@ describe('Load next thumb page', () => {
       },
     };
 
-    const {
-      album,
-      gallery,
-    } = state;
     const args = {
       host: fixtures.host,
       album: fixtures.album,
@@ -223,7 +228,13 @@ describe('Load next thumb page', () => {
 
     const received = reducer(state, nextPageSuccess(args));
     const expected = produce(state, (draft) => {
-      draft[gallery][album].memories = fixtures.memories.concat(fixtures.newMemories);
+      draft.dropbox = {
+        demo: {
+          sample: {
+            memories: fixtures.memories.concat(fixtures.newMemories),
+          },
+        },
+      };
     });
 
     expect(received).toEqual(expected);

diff --git a/ui/app/containers/Walk/index.jsx b/ui/app/containers/Walk/index.jsx
@@ -5,6 +5,7 @@ import { compose } from 'redux';
 import { createStructuredSelector } from 'reselect';
 
 import actions from './actions';
+import config from '../../../../config.json';
 import reducer from './reducer';
 import saga from './saga';
 import { makeSelectFiles, makeSelectPath } from './selectors';
@@ -81,7 +82,19 @@ function Walk({
 
     Components.push(<OrganizePreviews
       key="walk-OrganizePreviews"
-      items={items}
+      items={items.map((item) => ({
+        ...item,
+        content: [
+          <span key={`label-${item.filename}`}>{item.filename}</span>,
+          <img
+            key={`thumbnail-${item.filename}`}
+            alt="No preview yet"
+            src={`http://localhost:8000/public/${path}/${item.filename}`}
+            width={config.resizeDimensions.preview.width}
+            height={config.resizeDimensions.preview.height}
+          />,
+        ],
+      }))}
       setItems={setItems}
     />);
   }