feat(data): add slug to glossary entries (#195)

* feat(data): add slug to glossary entries

* feat(hasura): put back webhook

* feat: update migration and trim fields

* refactor(frontend): minor changes

targets/frontend/src/components/forms/Lister/index.js

@@ -19,27 +19,26 @@ const Lister = ({ defaultValue = "[]", disabled, ...props }) => {
 };
 
 Lister.propTypes = {
-  defaultValue: PropTypes.string,
+  defaultValue: PropTypes.arrayOf(PropTypes.string),
   disabled: PropTypes.bool,
 };
 
 export { Lister };
 
-function RootLister({ disabled, value: rawEntries, onChange, name }) {
-  const entries = JSON.parse(rawEntries);
+function RootLister({ disabled, value: entries, onChange, name }) {
   const inputRef = useRef(null);
   const onAddEntry = () => {
     const value = inputRef.current.value;
     if (value === "") return;
     if (!entries.includes(value)) {
-      onChange(JSON.stringify([...entries, value]));
+      onChange([...entries, value.trim()]);
     }
     inputRef.current.value = "";
   };
   const onDeleteEntry = (deletedEntry) => {
     const entriesCopy = [...entries];
     entriesCopy.splice(entriesCopy.indexOf(deletedEntry), 1);
-    onChange(JSON.stringify(entriesCopy));
+    onChange(entriesCopy);
   };
 
   const handleKeyDown = (event) => {
@@ -89,5 +88,5 @@ RootLister.propTypes = {
   disabled: PropTypes.bool,
   name: PropTypes.string,
   onChange: PropTypes.func.isRequired,
-  value: PropTypes.string,
+  value: PropTypes.arrayOf(PropTypes.string),
 };

targets/frontend/src/components/glossary/TermForm.js

@@ -1,4 +1,5 @@
 /** @jsx jsx  */
+import slugify from "@socialgouv/cdtn-slugify";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
@@ -40,10 +41,13 @@ export const TermForm = ({ term = {} }) => {
   const [duplicateTermError, setDuplicateTermError] = useState(false);
 
   async function onSubmit(data) {
+    data.term = data.term.trim();
+    data.definition = data.definition.trim();
     const result = await editTerm({
       term: {
         ...(term.id && { id: term.id }),
         ...data,
+        slug: slugify(data.term),
       },
     });
     if (!result.error) {

targets/frontend/src/pages/glossary/edit/[[...id]].js

@@ -16,10 +16,10 @@ const getTermQuery = `
 query getTerm($id: uuid!) {
   term: glossary_by_pk(id: $id) {
     id
-    abbreviations
+    term
     definition
+    abbreviations
     references
-    term
     variants
   }
 }

targets/frontend/src/pages/glossary/index.js

@@ -14,8 +14,9 @@ import { useQuery } from "urql";
 const getGlossaryQuery = `
   query getGlossary {
     glossary(order_by: {term: asc}) {
-      term
       id
+      slug
+      term
     }
   }
 `;
@@ -29,7 +30,9 @@ function getTermsByLetter(glossary = []) {
   );
   return alphabet.map((letter) => ({
     letter,
-    terms: glossary.filter(({ term }) => term[0].toUpperCase() === letter),
+    terms: glossary.filter(
+      ({ slug }) => slug.substring(0, 1).toUpperCase() === letter
+    ),
   }));
 }
 

targets/hasura/metadata/tables.yaml

@@ -353,43 +353,55 @@
     permission:
       check: {}
       columns:
-      - id
-      - term
       - abbreviations
+      - references
       - variants
       - definition
-      - references
+      - slug
+      - term
+      - created_at
+      - updated_at
+      - id
       backend_only: false
   select_permissions:
   - role: public
     permission:
       columns:
       - abbreviations
-      - definition
       - references
-      - term
       - variants
+      - definition
+      - slug
+      - term
+      - created_at
+      - updated_at
       - id
       filter: {}
   - role: user
     permission:
       columns:
       - abbreviations
-      - definition
       - references
-      - term
       - variants
+      - definition
+      - slug
+      - term
+      - created_at
+      - updated_at
       - id
       filter: {}
   update_permissions:
   - role: user
     permission:
       columns:
       - abbreviations
-      - definition
       - references
-      - term
       - variants
+      - definition
+      - slug
+      - term
+      - created_at
+      - updated_at
       - id
       filter: {}
       check: null

targets/hasura/migrations/1606230745147_new_glossary/down.sql

@@ -0,0 +1 @@
+DROP TABLE "public"."glossary";

targets/hasura/migrations/1606230745147_new_glossary/up.sql

@@ -0,0 +1,22 @@
+DROP TABLE "public"."glossary";
+
+CREATE TABLE "public"."glossary"(
+  "id" uuid NOT NULL DEFAULT gen_random_uuid(),
+  "term" text NOT NULL,
+  "slug" text NOT NULL,
+  "definition" text NOT NULL,
+  "abbreviations" jsonb NOT NULL DEFAULT jsonb_build_array(),
+  "variants" jsonb NOT NULL DEFAULT jsonb_build_array(),
+  "references" jsonb NOT NULL DEFAULT jsonb_build_array(),
+  "created_at" timestamptz NOT NULL DEFAULT now(),
+  "updated_at" timestamptz NOT NULL DEFAULT now(),
+  PRIMARY KEY ("id"),
+  UNIQUE ("slug")
+);
+
+CREATE TRIGGER "set_public_glossary_updated_at"
+  BEFORE UPDATE ON "public"."glossary"
+  FOR EACH ROW
+  EXECUTE PROCEDURE trigger_set_timestamp();
+
+COMMENT ON TRIGGER "set_public_glossary_updated_at" ON "public"."glossary" IS 'trigger to set value of column "updated_at" to current timestamp on row update';