Replace ApiAutocomplete with ApiAutoCompleteV2 (#382)

* Convert MainSearchBox to ApiAutoCompleteV2
* Convert WritTitleAutocomplete to ApiAutoCompleteV2
* Convert PersorgNameAutocomplete to ApiAutoCompleteV2

---------

Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>

howdju-client-common/lib/models.ts

@@ -2,7 +2,7 @@
 
 import merge from "lodash/merge";
 import { SetOptional } from "type-fest";
-import { cloneDeep } from "lodash";
+import { cloneDeep, pick } from "lodash";
 
 import {
   JustificationPolarity,
@@ -17,6 +17,10 @@ import {
   JustificationRef,
   JustificationOut,
   negateRootPolarity,
+  CreatePersorgInput,
+  PropositionOut,
+  UpdatePropositionInput,
+  PersorgOut,
 } from "howdju-common";
 
 export function isPropositionRootTarget(
@@ -106,3 +110,24 @@ export const makeCreateContentReportInput = (
     },
     fields
   );
+
+/** Remove the fields that are circular, unserializable, or not part of the API update model. */
+export function toUpdatePropositionInput(
+  proposition: PropositionOut
+): UpdatePropositionInput {
+  return {
+    id: proposition.id,
+    text: proposition.text,
+  };
+}
+
+export function toCreatePersorgInput(persorg: PersorgOut): CreatePersorgInput {
+  return pick(persorg, [
+    "name",
+    "isOrganization",
+    "knownFor",
+    "websiteUrl",
+    "wikipediaUrl",
+    "twitterUrl",
+  ]);
+}

howdju-common/lib/apiModels.ts

@@ -12,6 +12,7 @@ import {
   Entity,
   JustificationRef,
   JustificationVote,
+  Persorg,
   PicRegion,
   Proposition,
   PropositionCompound,
@@ -128,3 +129,5 @@ export interface SortDescription {
   /** For continuations, the sort should filter out this value and any before it according to `direction`. */
   value?: string;
 }
+
+export type PersorgOut = Persorg;

howdju-common/lib/zodSchemas.ts

@@ -229,13 +229,13 @@ export const CreateStatement: z.ZodType<CreateStatement> = z.lazy(() =>
   z.discriminatedUnion("sentenceType", [
     Entity.extend({
       sentenceType: z.literal(sentenceTypes.Enum.PROPOSITION),
-      sentence: Proposition,
-      speaker: Persorg,
+      sentence: CreateProposition,
+      speaker: CreatePersorg,
     }).strict(),
     Entity.extend({
       sentenceType: z.literal(sentenceTypes.Enum.STATEMENT),
-      sentence: Statement,
-      speaker: Persorg,
+      sentence: CreateStatement,
+      speaker: CreatePersorg,
     }).strict(),
   ])
 );

premiser-ui/src/ApiAutoComplete.scss

@@ -0,0 +1,4 @@
+.rmd-floating-label {
+  // TODO(17) figure out the source of this (.md-text--secondary?)
+  color: rgba(0, 0, 0, 0.54);
+}

premiser-ui/src/ApiAutoCompleteV2.tsx → premiser-ui/src/ApiAutoComplete.tsx

@@ -6,6 +6,7 @@ import React, {
 } from "react";
 import { PayloadAction } from "@reduxjs/toolkit";
 import { AutoComplete, AutoCompleteResult } from "@react-md/autocomplete";
+import { FormMessage } from "@react-md/form";
 import { useDebouncedCallback } from "use-debounce";
 import { denormalize, Schema } from "normalizr";
 
@@ -20,7 +21,8 @@ import {
 } from "./types";
 import { useAppDispatch, useAppSelector } from "./hooks";
 import { autocompletes } from "./actions";
-import { FormMessage } from "@react-md/form";
+
+import "./ApiAutoComplete.scss";
 
 export type FetchSuggestionsActionCreator = (
   value: string,
@@ -56,7 +58,7 @@ export interface Props<T>
   onAutoComplete?: (suggestion: T) => void;
 }
 
-export default function ApiAutocompleteV2({
+export default function ApiAutoComplete({
   id,
   name,
   autocompleteThrottleMs = 250,
@@ -144,6 +146,7 @@ export default function ApiAutocompleteV2({
           disableShowOnFocus
           style={{ flexGrow: 1 }}
           theme="underline"
+          filter="none"
         />
         {rightControls}
       </div>