re-introduce last-util fn for better typing (#41)

* re-introduce last-util fn for better typing

* remove lodash.last

Author: tjlav5

package-lock.json

@@ -16,7 +16,6 @@
     "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",
@@ -60,7 +59,6 @@
     "@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,6 @@
  */
 
 import React, { useEffect } from 'react';
-import last from 'lodash.last';
 import { TextField } from '@rmwc/textfield';
 
 import * as actions from './actions';
@@ -26,7 +25,7 @@ import {
   DocumentProvider,
 } from './store';
 import { FirestoreMap } from '../models';
-import { isMap, isArray, getFieldType } from '../utils';
+import { isMap, isArray, lastFieldName, getFieldType } from '../utils';
 
 /** Entry point for a Document/Field editor */
 const DocumentEditor: React.FC<{
@@ -89,7 +88,7 @@ const NestedEditor: React.FC<{ path: string[] }> = ({ path }) => {
   return (
     <>
       <div style={{ display: 'flex' }}>
-        <TextField readOnly value={last(path)} placeholder="Field" />
+        <TextField readOnly value={lastFieldName(path)} placeholder="Field" />
         <TextField readOnly value={getFieldType(state)} placeholder="Type" />
         <TextField
           value={JSON.stringify(state)}

src/components/Firestore/DocumentEditor/index.tsx

@@ -16,12 +16,11 @@
 
 import React from 'react';
 import get from 'lodash.get';
-import last from 'lodash.last';
 import produce from 'immer';
 import { Action, createReducer } from 'typesafe-actions';
 
 import * as actions from './actions';
-import { isMap, isArray, getParentPath } from '../utils';
+import { isMap, isArray, lastFieldName, getParentPath } from '../utils';
 import { FirestoreAny, FirestoreMap } from '../models';
 
 const reducer = createReducer<FirestoreMap, Action>({})
@@ -33,7 +32,7 @@ const reducer = createReducer<FirestoreMap, Action>({})
     produce((draft, { payload }) => {
       const parent = get(draft, getParentPath(payload.path)) || draft;
       if (isMap(parent)) {
-        parent[last(payload.path) as string] = payload.value;
+        parent[lastFieldName(payload.path)] = payload.value;
       } else if (isArray(parent)) {
         parent.push(payload.value);
       }
@@ -44,9 +43,9 @@ const reducer = createReducer<FirestoreMap, Action>({})
     produce((draft, { payload }) => {
       const parent = get(draft, getParentPath(payload.path)) || draft;
       if (isMap(parent)) {
-        parent[last(payload.path) as string] = payload.value;
+        parent[lastFieldName(payload.path)] = payload.value;
       } else if (isArray(parent)) {
-        parent[Number(last(payload.path))] = payload.value;
+        parent[Number(lastFieldName(payload.path))] = payload.value;
       } else {
         return payload.value;
       }
@@ -57,9 +56,9 @@ const reducer = createReducer<FirestoreMap, Action>({})
     produce((draft, { payload }) => {
       const parent = get(draft, getParentPath(payload)) || draft;
       if (isMap(parent)) {
-        delete parent[last(payload) as string];
+        delete parent[lastFieldName(payload)];
       } else if (isArray(parent)) {
-        parent.splice(Number(last(payload)), 1);
+        parent.splice(Number(lastFieldName(payload)), 1);
       }
     })
   );

src/components/Firestore/DocumentEditor/store.tsx

@@ -18,12 +18,17 @@ import React, { useState } from 'react';
 import { firestore } from 'firebase';
 import { ListItem, ListItemMeta } from '@rmwc/list';
 import { IconButton } from '@rmwc/icon-button';
-import last from 'lodash.last';
 
 import { updateField, deleteField } from './api';
 import InlineEditor from './InlineEditor';
 import { useDocumentState, useFieldState } from './store';
-import { getFieldType, isPrimitive, isMap, isArray } from '../utils';
+import {
+  getFieldType,
+  isPrimitive,
+  isMap,
+  isArray,
+  lastFieldName,
+} from '../utils';
 
 const FieldPreview: React.FC<{
   path: string[];
@@ -63,7 +68,7 @@ const FieldPreview: React.FC<{
 
   return isEditing ? (
     <InlineEditor
-      value={{ [last(path) as string]: state }}
+      value={{ [lastFieldName(path)]: state }}
       path={path}
       onCancel={() => {
         setIsEditing(false);
@@ -77,7 +82,7 @@ const FieldPreview: React.FC<{
     <>
       <ListItem onClick={() => setIsExpanded(!isExpanded)}>
         <span>
-          {last(path)}:{JSON.stringify(state)}
+          {lastFieldName(path)}:{JSON.stringify(state)}
         </span>
         ({getFieldType(state)})
         <ListItemMeta>
@@ -112,7 +117,7 @@ const FieldPreview: React.FC<{
       </ListItem>
       {addPath && isAddingField && (
         <InlineEditor
-          value={{ [last(addPath) as string]: '' }}
+          value={{ [lastFieldName(addPath)]: '' }}
           path={addPath}
           onCancel={() => {
             setIsAddingField(false);

src/components/Firestore/DocumentPreview/FieldPreview.tsx

@@ -15,12 +15,12 @@
  */
 
 import React, { useState } from 'react';
-import last from 'lodash.last';
 import { Card, CardActionButtons, CardActionButton } from '@rmwc/card';
 import { Elevation } from '@rmwc/elevation';
 
 import DocumentEditor from '../DocumentEditor';
 import { FirestoreMap } from '../models';
+import { lastFieldName } from '../utils';
 
 /** Editor entry point for a selected field */
 const InlineEditor: React.FC<{
@@ -43,7 +43,7 @@ const InlineEditor: React.FC<{
   function handleSave(e: React.MouseEvent<HTMLButtonElement>) {
     e.stopPropagation();
     // TODO key could change in the editor
-    onSave(last(path)!, internalValue);
+    onSave(lastFieldName(path), internalValue);
   }
 
   return (

src/components/Firestore/DocumentPreview/InlineEditor.tsx

@@ -15,10 +15,9 @@
  */
 
 import { firestore } from 'firebase';
-import last from 'lodash.last';
 
 import { FirestoreArray, FirestoreAny, FirestoreMap } from '../models';
-import { isMap, isArray } from '../utils';
+import { isMap, isArray, lastFieldName } from '../utils';
 
 export function deleteField(
   documentRef: firestore.DocumentReference,
@@ -97,7 +96,7 @@ function adjustPayloadForArray(
 
     if (
       topLevelArray === nestedObjectToModify &&
-      Number(last(fieldPath)) >= (topLevelArray as {}[]).length
+      Number(lastFieldName(fieldPath)) >= (topLevelArray as {}[]).length
     ) {
       // Appending a new element to the top-level array
       return [
@@ -109,7 +108,8 @@ function adjustPayloadForArray(
   } else {
     // Deal with deleting from an array
     if (nestedObjectToModify instanceof Array) {
-      const valueToDelete = nestedObjectToModify[Number(last(fieldPath))];
+      const valueToDelete =
+        nestedObjectToModify[Number(lastFieldName(fieldPath))];
       if (
         nestedObjectToModify !== topLevelArray ||
         nestedObjectToModify.indexOf(valueToDelete) !==

src/components/Firestore/DocumentPreview/api.tsx

@@ -28,6 +28,12 @@ export function getParentPath(path: string[]) {
   return path.slice(0, path.length - 1);
 }
 
+export function lastFieldName(path: string[]): string {
+  if (!path.length)
+    throw new Error(`${path} is empty and has no _last_ field name`);
+  return path[path.length - 1];
+}
+
 export function getFieldType(value: FirestoreAny): FieldType {
   if (value === null) {
     return FieldType.NULL;