UI V2

Squashed commits:
[e74bbf9] stuff
[28476de] stuff
[c7efb7b] stuff
[2c78f94] stuff
[f79338e] stuff
[a697876] stuff
[85bb60e] stuff
[9f108b2] stuff
[d8e00c0] stuff
[7787ef9] stuff
[f7f10b7] stuff
[aa266f7] stuff
[511ba6b] stuff
[7453747] stuff
[db55e2d] stuff
[b362623] stuff
[7288c17] stuff
[86638cd] stuff
[879dac4] stuff
[65a4996] stuff
[c6fb361] stuff
[d449ce7] stuff
[349dffa] stuff
[84206ab] stuff
[0253c65] stuff
[cc0992e] stuff
[3289e7d] stuff
[d9ab290] stuff
[dcc980d] stuff
[7787da8] stuff
[5bcf7cd] stuff
[00e9316] stuff
[54c9398] stuff
[72b6ee1] stuff
[4b4b26c] stuff
[4cbdb06] stuff
[1a240b3] stuff
[650ea08] stuff
[37440ef] stuff
[9ee66ba] stuff
[b430c86] stuff
[37159c3] stuff
[deba837] stuff
[6ac65f6] stuff
[a2ca1a1] stuff
[c010229] stuff
[3fd7306] stuff
[cbe6efc] stuff
[997a8d0] stuff
[d0708a2] stuff
[d316aba] stuff
[4fe9900] Added initial files

ui/v2/src/components/scenes/SceneList.tsx

@@ -0,0 +1,37 @@
+import _ from "lodash";
+import React, { FunctionComponent } from "react";
+import { QueryHookResult } from "react-apollo-hooks";
+import { FindScenesQuery, FindScenesVariables } from "../../core/generated-graphql";
+import { ListHook } from "../../hooks/ListHook";
+import { IBaseProps } from "../../models/base-props";
+import { ListFilterModel } from "../../models/list-filter/filter";
+import { DisplayMode, FilterMode } from "../../models/list-filter/types";
+import { WallPanel } from "../Wall/WallPanel";
+import { SceneCard } from "./SceneCard";
+
+interface ISceneListProps extends IBaseProps {}
+
+export const SceneList: FunctionComponent<ISceneListProps> = (props: ISceneListProps) => {
+  const listData = ListHook.useList({
+    filterMode: FilterMode.Scenes,
+    props,
+    renderContent,
+  });
+
+  function renderContent(result: QueryHookResult<FindScenesQuery, FindScenesVariables>, filter: ListFilterModel) {
+    if (!result.data || !result.data.findScenes) { return; }
+    if (filter.displayMode === DisplayMode.Grid) {
+      return (
+        <div className="grid">
+          {result.data.findScenes.scenes.map((scene) => (<SceneCard key={scene.id} scene={scene} />))}
+        </div>
+      );
+    } else if (filter.displayMode === DisplayMode.List) {
+      return <h1>TODO</h1>;
+    } else if (filter.displayMode === DisplayMode.Wall) {
+      return <WallPanel scenes={result.data.findScenes.scenes} />;
+    }
+  }
+
+  return listData.template;
+};