feat(Walk): Standardize directory listing to GenericList

ui/app/components/GenericList/index.jsx

@@ -1,17 +1,14 @@
-/**
-*
-* GenericList
-*
-*/
-
 import React from 'react';
 
 import List from '../List';
 import ListItem from '../ListItem';
 import LoadingIndicator from '../LoadingIndicator';
 
 function GenericList({
-  loading, error, items, component,
+  component,
+  items,
+  loading,
+  error,
 }) {
   if (loading) {
     return <List component={LoadingIndicator} />;

ui/app/components/List/tests/index.test.jsx

@@ -6,15 +6,16 @@ import List from '..';
 
 describe('<List />', () => {
   test('should render the passed component if no items are passed', () => {
-    const component = () => <li>test</li>; // eslint-disable-line react/prop-types
+    const component = () => <li id="expected id">test</li>;
     const { container } = render(<List component={component} />);
     expect(container.querySelector('li')).not.toBeNull();
+    expect(container.querySelector('li').id).toEqual('expected id');
   });
 
   test('should pass all items props to rendered component', () => {
     const items = [{ id: 1, name: 'Hello' }, { id: 2, name: 'World' }];
 
-    const component = ({ item }) => <li>{item.name}</li>; // eslint-disable-line react/prop-types
+    const component = ({ item, key }) => <li title={key}>{item.name}</li>;
 
     const { container, getByText } = render(
       <List items={items} component={component} />,

ui/app/containers/AdminLandingPage/index.jsx

@@ -1,41 +1,26 @@
-import { push } from 'connected-react-router';
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
 
 import A from '../../components/A';
 import messages from './messages';
 
-export function AdminLandingPage({
-  navToResize,
-  navToWalk,
-}) {
+export function AdminLandingPage() {
   return (
     <div>
       <Helmet>
-        <title>Admin</title>
+        <title>Walk - Admin</title>
         <meta name="description" content="Admin" />
       </Helmet>
       <h1>
         <FormattedMessage {...messages.header} />
       </h1>
       <ul>
-        <li><A onClick={navToWalk}>Walk</A></li>
-        <li><A onClick={navToResize}>Resize</A></li>
+        <li><A href="/admin/walk">Walk</A></li>
+        <li><A href="/admin/resize">Resize</A></li>
       </ul>
     </div>
   );
 }
 
-const mapDispatchToProps = (dispatch) => ({
-  navToWalk: () => dispatch(push('/admin/walk')),
-  navToResize: () => dispatch(push('/admin/resize')),
-});
-
-const withConnect = connect(null, mapDispatchToProps);
-
-export default compose(
-  withConnect,
-)(AdminLandingPage);
+export default AdminLandingPage;

ui/app/containers/Walk/Contents.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import A from '../../components/A';
+import ListItem from '../../components/ListItem';
+import Placeholder from './Placeholder';
+
+import walkUtils from './util';
+
+const { areImages } = walkUtils;
+
+function Contents({ item: file }) {
+  const key = `contents-${file.id.replace(/\//, '-') || 'missingId'}`;
+  if (areImages(file)) {
+    return <Placeholder file={file} key={key} />;
+  }
+
+  if (file.mediumType === 'folder') {
+    const Link = (
+      <A href={`?path=${file.path}`}>
+        {file.filename}
+      </A>
+    );
+
+    return (<ListItem item={Link} />);
+  }
+
+  return (
+    <ListItem item={file.filename} />
+  );
+}
+
+export default Contents;

ui/app/containers/Walk/actions.js

@@ -4,7 +4,7 @@ import {
   LIST_DIRECTORY_FAILURE,
 } from './constants';
 
-function getFilesByPath(path) {
+function listDirectory(path) {
   return {
     type: LIST_DIRECTORY_REQUEST,
     path,
@@ -26,7 +26,7 @@ function listingFailure(error) {
 }
 
 export default {
-  getFilesByPath,
+  listDirectory,
   listingSuccess,
   listingFailure,
 };

ui/app/containers/Walk/index.jsx

@@ -1,66 +1,62 @@
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
-import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
 import { compose } from 'redux';
+import { createStructuredSelector } from 'reselect';
 
-import { useInjectSaga } from '../../utils/injectSaga';
-import { useInjectReducer } from '../../utils/injectReducer';
 import actions from './actions';
-import {
-  makeSelectFiles,
-  makeSelectPath,
-} from './selectors';
 import reducer from './reducer';
 import saga from './saga';
+import { makeSelectFiles, makeSelectPath } from './selectors';
+import { useInjectSaga } from '../../utils/injectSaga';
+import { useInjectReducer } from '../../utils/injectReducer';
 
-import Contents from './contents';
-
-import walkUtils from './util';
-
-const { areImages } = walkUtils;
+import Contents from './Contents';
+import GenericList from '../../components/GenericList';
 
 function parseQueryString(find, from) {
   if (!find || !from) return '';
   return RegExp(`[?&]${find}(=([^&#]*)|&|#|$)`).exec(from)[2];
 }
 
 function Walk({
-  getFilesByPath,
+  doListDirectory,
   files,
   location: { search: querystring },
-  path: pathProp,
+  statePath,
 }) {
   useInjectReducer({ key: 'walk', reducer });
   useInjectSaga({ key: 'walk', saga });
 
   const qsPath = parseQueryString('path', querystring);
-  const path = qsPath || pathProp;
+  const path = qsPath || statePath;
 
   useEffect(() => {
-    getFilesByPath(path);
-  }, []);
-
-  const hasImage = files.some(areImages);
+    doListDirectory(path);
+  }, [doListDirectory, path]);
 
-  return (
-    <div>
-      <Helmet>
-        <title>Walk</title>
-        <meta name="description" content="Description of Walk" />
-      </Helmet>
-      <Contents files={files} showControls={hasImage} />
-    </div>
-  );
+  return [
+    <Helmet key="walk-Helmet">
+      <title>Walk</title>
+      <meta name="description" content="Description of Walk" />
+    </Helmet>,
+    <GenericList
+      key="walk-GenericList"
+      component={Contents}
+      items={files.map((f) => ({ id: f.path, ...f }))}
+      loading={!files || files.length === 0}
+      error={false}
+    />,
+  ];
 }
 
 const mapStateToProps = createStructuredSelector({
   files: makeSelectFiles(),
-  path: makeSelectPath(),
+  statePath: makeSelectPath(),
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  getFilesByPath: (path) => dispatch(actions.getFilesByPath(path)),
+  doListDirectory: (path) => dispatch(actions.listDirectory(path)),
 });
 
 const withConnect = connect(mapStateToProps, mapDispatchToProps);

ui/app/containers/Walk/reducer.js

@@ -4,7 +4,6 @@ import { LIST_DIRECTORY_REQUEST, LIST_DIRECTORY_SUCCESS } from './constants';
 export const initialState = {
   listing: {
     files: [],
-    path: 'galleries',
   },
 };
 

ui/app/containers/Walk/rename.jsx

@@ -40,6 +40,7 @@ function onClick() {
     body: JSON.stringify(data),
   };
 
+  // TODO replace with request and fetchWithTimeout
   return fetch('/admin/rename', options)
     .then((response) => response.json())
     .then(output)

ui/app/containers/Walk/saga.js

@@ -4,15 +4,25 @@ import {
   takeLatest,
 } from 'redux-saga/effects';
 
-import request, { querystring } from '../../utils/request';
-import { apiPort as port } from '../../../../config.json';
 import actions from './actions';
+import { apiPort as port } from '../../../../config.json';
 import { LIST_DIRECTORY_REQUEST } from './constants';
+import request, { querystring } from '../../utils/request';
+
+function getBaseUrl(path) {
+  const baseUrl = `http://localhost:${port}/admin/walk-path`;
+
+  if (path) {
+    return querystring(baseUrl, { path });
+  }
+
+  return baseUrl;
+}
 
 // File system directory request/response handler
 export function* requestDirectoryListing({ path }) {
   try {
-    const url = querystring(`http://localhost:${port}/admin/walk-path`, { path });
+    const url = getBaseUrl(path);
     const listing = yield call(request, url);
     yield put(actions.listingSuccess(listing));
   } catch (error) {

ui/app/containers/Walk/selectors.js

@@ -5,12 +5,12 @@ const selectWalkDomain = (state) => state.walk || initialState;
 
 const makeSelectFiles = () => createSelector(
   selectWalkDomain,
-  (substate) => substate.listing.files,
+  (pageState) => pageState.listing.files,
 );
 
 const makeSelectPath = () => createSelector(
   selectWalkDomain,
-  (substate) => substate.listing.path,
+  (pageState) => pageState.listing.path,
 );
 
 export default selectWalkDomain;

ui/app/utils/request.js

@@ -60,12 +60,22 @@ export function querystring(rawUrl, params) {
 }
 
 // *********** HISTORY CUSTOM not React Boilerplate
-function fetchWithTimeout(url, options, timeout = 1700) {
+function fetchWithTimeout(url, options, wait = 1700) {
+  let timerId;
+  const timeout = new Promise((_, reject) => {
+    timerId = setTimeout(() => {
+      clearTimeout(timerId);
+      reject(new Error(`XHR timeout (${timeout}) to ${url}`))
+    }, wait)
+  })
+
   return Promise.race([
-    fetch(url, options),
-    new Promise((_, reject) =>
-      setTimeout(() => reject(new Error(`HTTP request timeout reached at ${timeout}`)), timeout)
-    )
+    fetch(url, options)
+      .then((response) => {
+        clearTimeout(timerId);
+        return response;
+      }),
+    timeout,
   ]);
 }