Firestore document preview and basic-editing (#35)

Breaking this up into smaller bits... this includes:

a basic list view
an editor (can only edit values right now)
adding field in the preview to maps/arrays
deleting fields (preview and editor)

Still to come:

better presentation that JSON.stringify in the ListItem (indentation too)
changing field type
specific field type editors
conditionally changing field-key (especially in document-creation/add-field)

Author: tjlav5

package-lock.json

@@ -13,7 +13,10 @@
     "express": "^4.17.1",
     "firebase": "^7.6.0",
     "font-awesome": "^4.7.0",
+    "immer": "^6.0.1",
     "keycode": "^2.2.0",
+    "lodash.get": "^4.4.2",
+    "lodash.last": "^3.0.0",
     "node-fetch": "^2.6.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
@@ -25,7 +28,7 @@
     "redux-saga": "^1.1.1",
     "rmwc": "^5.7.1",
     "typesafe-actions": "^5.1.0",
-    "typescript": "3.6.4"
+    "typescript": "^3.8.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -56,6 +59,8 @@
     "@firebase/auth-interop-types": "^0.1.1",
     "@firebase/component": "^0.1.1",
     "@testing-library/react": "^9.3.2",
+    "@types/lodash.get": "^4.4.6",
+    "@types/lodash.last": "^3.0.6",
     "@types/react-router-dom": "^5.1.2",
     "husky": "^3.0.9",
     "jest-fetch-mock": "^3.0.1",

package.json

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { useCollection, useDocumentData } from 'react-firebase-hooks/firestore';
 
@@ -44,6 +44,16 @@ it('shows the list of documents in the collection', () => {
     </MemoryRouter>
   );
 
+  act(() =>
+    collectionReference.setSnapshot({
+      docs: [
+        fakeDocumentSnapshot({
+          ref: fakeDocumentReference({ id: 'cool-doc-1' }),
+        }),
+      ],
+    })
+  );
+
   expect(getByText(/my-stuff/)).not.toBeNull();
   expect(queryByText(/Loading documents/)).toBeNull();
   expect(getByText(/cool-doc-1/)).not.toBeNull();

src/components/Firestore/Collection.test.tsx

@@ -29,6 +29,8 @@ import { ApiProvider } from './ApiContext';
 
 import { Document, Root } from './Document';
 
+import { DocumentStateContext } from './Field/DocumentStore';
+
 jest.mock('react-firebase-hooks/firestore');
 
 it('shows the root-id', () => {
@@ -46,8 +48,6 @@ it('shows the root-id', () => {
 });
 
 it('shows the document-id', () => {
-  useDocumentData.mockReturnValueOnce([]);
-
   const { getByText } = render(
     <MemoryRouter>
       <ApiProvider value={fakeFirestoreApi()}>
@@ -60,8 +60,6 @@ it('shows the document-id', () => {
 });
 
 it('shows the root collection-list', () => {
-  useDocumentData.mockReturnValueOnce([]);
-
   const { getByTestId } = render(
     <MemoryRouter>
       <ApiProvider value={fakeFirestoreApi()}>

src/components/Firestore/Document.test.tsx

@@ -14,18 +14,17 @@
  * limitations under the License.
  */
 
-import { createContext, useContext } from 'react';
-import { firestore } from 'firebase';
+import { createAction } from 'typesafe-actions';
 
-const DocumentRefContext = createContext<firestore.DocumentReference | null>(
-  null
-);
+import { FirestoreAny, FirestoreMap } from '../models';
 
-export const DocumentRefProvider = DocumentRefContext.Provider;
-export const useDocumentRef = () => {
-  const documentRef = useContext(DocumentRefContext);
-  if (!documentRef) {
-    throw new Error('You are missing a <DocumentRefProvider>.');
-  }
-  return documentRef;
-};
+export const reset = createAction('@document/reset')<FirestoreMap>();
+export const addField = createAction('@document/add')<{
+  path: string[];
+  value: FirestoreAny;
+}>();
+export const updateField = createAction('@document/update')<{
+  path: string[];
+  value: FirestoreAny;
+}>();
+export const deleteField = createAction('@document/delete')<string[]>();

src/components/Firestore/Field/DocumentRefContext.tsx renamed to src/components/Firestore/DocumentEditor/actions.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { firestore } from 'firebase';
+
+import DocumentEditor from './index';
+
+it('renders an editable field', () => {
+  const onChange = jest.fn();
+  const { getByPlaceholderText } = render(
+    <DocumentEditor value={{ hello: 'world' }} onChange={onChange} />
+  );
+  expect(getByPlaceholderText('Field').value).toBe('hello');
+  expect(getByPlaceholderText('Type').value).toBe('string');
+  expect(getByPlaceholderText('Value').value).toBe('"world"');
+
+  fireEvent.change(getByPlaceholderText('Value'), {
+    target: { value: 'new' },
+  });
+
+  expect(getByPlaceholderText('Value').value).toBe('"new"');
+  expect(onChange).toHaveBeenCalledWith({ hello: 'new' });
+});
+
+it('renders an editable field with children', () => {
+  const onChange = jest.fn();
+
+  const { getByDisplayValue } = render(
+    <DocumentEditor
+      value={{ hello: { foo: ['bar', { spam: 'eggs' }] } }}
+      onChange={onChange}
+    />
+  );
+
+  fireEvent.change(getByDisplayValue('"eggs"'), {
+    target: { value: 'new' },
+  });
+
+  expect(onChange).toHaveBeenCalledWith({
+    hello: { foo: ['bar', { spam: 'new' }] },
+  });
+});

src/components/Firestore/DocumentEditor/index.test.tsx

@@ -0,0 +1,105 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect } from 'react';
+import last from 'lodash.last';
+import { TextField } from '@rmwc/textfield';
+
+import * as actions from './actions';
+import {
+  useDocumentState,
+  useDocumentDispatch,
+  useFieldState,
+  DocumentProvider,
+} from './store';
+import { FirestoreMap } from '../models';
+import { isMap, isArray, getFieldType } from '../utils';
+
+/** Entry point for a Document/Field editor */
+const DocumentEditor: React.FC<{
+  value: FirestoreMap;
+  onChange?: (value: FirestoreMap) => void;
+}> = ({ value, onChange }) => {
+  return (
+    <DocumentProvider value={value}>
+      <RootField onChange={onChange} />
+    </DocumentProvider>
+  );
+};
+
+/**
+ * Special representation of a Document Root, where we don't want to show
+ * the implicit top-level map.
+ */
+const RootField: React.FC<{
+  onChange?: (value: FirestoreMap) => void;
+}> = ({ onChange }) => {
+  const state = useDocumentState();
+
+  useEffect(() => {
+    onChange && onChange(state);
+  }, [onChange, state]);
+
+  return (
+    <>
+      {Object.keys(state).map(field => (
+        <NestedEditor key={field} path={[field]} />
+      ))}
+    </>
+  );
+};
+
+/**
+ * Field with call-to-actions for editing as well as rendering applicable child-nodes
+ */
+const NestedEditor: React.FC<{ path: string[] }> = ({ path }) => {
+  const state = useFieldState(path);
+  const dispatch = useDocumentDispatch()!;
+
+  let childEditors = null;
+  if (isMap(state)) {
+    childEditors = Object.keys(state).map(childLeaf => {
+      const childPath = [...path, childLeaf];
+      return <NestedEditor key={childLeaf} path={childPath} />;
+    });
+  } else if (isArray(state)) {
+    childEditors = state.map((value, index) => {
+      const childPath = [...path, `${index}`];
+      return <NestedEditor key={index} path={childPath} />;
+    });
+  }
+
+  function handleEditValue(e: React.FormEvent<HTMLInputElement>) {
+    dispatch(actions.updateField({ path, value: e.currentTarget.value }));
+  }
+
+  return (
+    <>
+      <div style={{ display: 'flex' }}>
+        <TextField readOnly value={last(path)} placeholder="Field" />
+        <TextField readOnly value={getFieldType(state)} placeholder="Type" />
+        <TextField
+          value={JSON.stringify(state)}
+          onChange={handleEditValue}
+          placeholder="Value"
+        />
+      </div>
+      {childEditors && <div>{childEditors}</div>}
+    </>
+  );
+};
+
+export default DocumentEditor;