allow adding existing chapter to a topic

Author: ceolinwill

src/components/ChapterForm.tsx

@@ -1,7 +1,10 @@
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { throttle } from 'lodash';
 import { Grid, TextField } from '@material-ui/core';
 import { Chapter } from '@zoonk/models';
+import { searchChapter } from '@zoonk/services';
 import { GlobalContext } from '@zoonk/utils';
+import ChapterSelector from './ChapterSelector';
 import FormBase from './FormBase';
 
 interface ChapterFormProps {
@@ -25,12 +28,26 @@ const ChapterForm = ({
   const [description, setDescription] = useState<string>(
     data?.description || '',
   );
+  const [search, setSearch] = useState<ReadonlyArray<Chapter.Index>>([]);
+  const throttled = useRef(
+    throttle((query: string) => {
+      searchChapter(query).then(setSearch);
+    }, 1000),
+  );
+
   const descriptionMax = 500;
   const valid =
     title.length > 0 &&
     description.length > 0 &&
     description.length <= descriptionMax;
 
+  // Search existing chapters when creating a new one.
+  useEffect(() => {
+    if (!data && title.length > 3) {
+      throttled.current(title);
+    }
+  }, [data, title]);
+
   return (
     <FormBase
       valid={valid}
@@ -55,6 +72,8 @@ const ChapterForm = ({
           />
         </Grid>
 
+        <ChapterSelector chapters={search} />
+
         <Grid item xs={12}>
           <TextField
             multiline

src/components/ChapterSelector.tsx

@@ -0,0 +1,97 @@
+import { useContext, useState } from 'react';
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+import {
+  Button,
+  Card,
+  CardHeader,
+  List,
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+} from '@material-ui/core';
+import { Chapter, SnackbarAction } from '@zoonk/models';
+import { firebaseError, GlobalContext, theme, timestamp } from '@zoonk/utils';
+import { addChapterToTopic } from '@zoonk/services';
+import Snackbar from './Snackbar';
+
+interface ChapterSelectorProps {
+  chapters: ReadonlyArray<Chapter.Index>;
+}
+
+/**
+ * Chapter list with an option to add it to the current topic.
+ */
+const ChapterSelector = ({ chapters }: ChapterSelectorProps) => {
+  const { profile, translate, user } = useContext(GlobalContext);
+  const [snackbar, setSnackbar] = useState<SnackbarAction | null>(null);
+  const { query, push } = useRouter();
+  const topicId = String(query.id);
+
+  if (chapters.length === 0 || !profile || !user) {
+    return null;
+  }
+
+  const add = (id: string) => {
+    setSnackbar({ type: 'progress', msg: translate('chapter_adding') });
+    const metadata = {
+      updatedAt: timestamp,
+      updatedBy: profile,
+      updatedById: user.uid,
+    };
+
+    addChapterToTopic(id, topicId, metadata)
+      .then(() =>
+        push(
+          '/topics/[topicId]/chapters/[chapterId]',
+          `/topics/${topicId}/chapters/${id}`,
+        ),
+      )
+      .catch((e) => setSnackbar(firebaseError(e, 'add_existing_chapter')));
+  };
+
+  return (
+    <Card
+      variant="outlined"
+      style={{ width: '100%', margin: theme.spacing(1) }}
+    >
+      <CardHeader
+        title={translate('chapter_select_title')}
+        subheader={translate('chapter_select_desc')}
+      />
+      <List>
+        {chapters.map((chapter, index) => (
+          <ListItem
+            key={chapter.objectID}
+            divider={chapters.length > index + 1}
+          >
+            <ListItemText primary={chapter.title} />
+            <ListItemSecondaryAction>
+              <NextLink
+                href="/topics/[id]/chapters/[chapterId]"
+                as={`/topics/${topicId}/chapters/${chapter.objectID}`}
+                passHref
+              >
+                <Button
+                  component="a"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  color="primary"
+                >
+                  {translate('view')}
+                </Button>
+              </NextLink>
+              <Button color="secondary" onClick={() => add(chapter.objectID)}>
+                {translate('add')}
+              </Button>
+            </ListItemSecondaryAction>
+          </ListItem>
+        ))}
+      </List>
+
+      <Snackbar action={snackbar} />
+    </Card>
+  );
+};
+
+export default ChapterSelector;

src/locale/en.ts

@@ -6,6 +6,7 @@ const translate: TranslationFn = (key, args) => {
     about_me: 'About me',
     about_list: 'List of pages about how Zoonk works',
     add_image: 'Add image',
+    add: 'Add',
     admin: 'Admin',
     advanced: 'Advanced',
     after: 'After',
@@ -18,8 +19,11 @@ const translate: TranslationFn = (key, args) => {
     by: 'by',
     cancel: 'Cancel',
     chapter_add: 'Add a new chapter',
+    chapter_adding: 'Adding a chapter to this topic...',
     chapter_edit: 'Edit chapter',
     chapter_invalid_id: 'You cannot create a chapter without a topicId.',
+    chapter_select_desc: 'You can add an existing chapter to this topic:',
+    chapter_select_title: 'Select a chapter',
     chapter: 'Chapter',
     chapters: 'Chapters',
     choose_language: 'Choose a language',

src/locale/pt.ts

@@ -6,6 +6,7 @@ const translate: TranslationFn = (key, args) => {
     about_list: 'Lista de páginas sobre como o Zoonk funciona',
     about_me: 'Sobre mim',
     add_image: 'Inserir imagem',
+    add: 'Add',
     admin: 'Admin',
     advanced: 'Avançado',
     after: 'Depois',
@@ -18,9 +19,13 @@ const translate: TranslationFn = (key, args) => {
     by: 'por',
     cancel: 'Cancelar',
     chapter_add: 'Crie um novo capítulo',
+    chapter_adding: 'Adicionando capítulo na página deste assunto...',
     chapter_edit: 'Editar capítulo',
     chapter_invalid_id:
       'Você não pode criar um capítulo sem uma ID válida para a trilha de aprendizagem.',
+    chapter_select_desc:
+      'Você pode adicionar um capítulo existente neste tópico clicando no botão "add":',
+    chapter_select_title: 'Escolher capítulo',
     chapter: 'Capítulo',
     chapters: 'Capítulos',
     choose_language: 'Escolha um idioma',

src/models/i18n.ts

@@ -6,6 +6,7 @@ export type TranslationKeys =
   | 'about_list'
   | 'about_me'
   | 'add_image'
+  | 'add'
   | 'admin'
   | 'advanced'
   | 'after'
@@ -18,8 +19,11 @@ export type TranslationKeys =
   | 'by'
   | 'cancel'
   | 'chapter_add'
+  | 'chapter_adding'
   | 'chapter_edit'
   | 'chapter_invalid_id'
+  | 'chapter_select_desc'
+  | 'chapter_select_title'
   | 'chapter'
   | 'chapters'
   | 'choose_language'

src/services/chapters.ts

@@ -1,5 +1,5 @@
 import { pickBy } from 'lodash';
-import { Chapter, Profile } from '@zoonk/models';
+import { Chapter, ContentMetadata, Profile } from '@zoonk/models';
 import {
   analytics,
   arrayUnion,
@@ -48,6 +48,21 @@ export const createChapter = async (data: Chapter.Create): Promise<string> => {
   return slug;
 };
 
+/**
+ * Add an existing chapter to a topic.
+ */
+export const addChapterToTopic = (
+  chapterId: string,
+  topicId: string,
+  user: ContentMetadata.Update,
+): Promise<void> => {
+  const changes = {
+    ...user,
+    chapters: arrayUnion(chapterId),
+  };
+  return db.doc(`topics/${topicId}`).update(changes);
+};
+
 /**
  * Update an existing chapter.
  */

src/services/search.ts

@@ -1,6 +1,6 @@
 import algolia from 'algoliasearch';
 import { SearchResponse } from '@algolia/client-search';
-import { SearchResult } from '@zoonk/models';
+import { Chapter, SearchResult } from '@zoonk/models';
 import { analytics, appLanguage, isProduction } from '@zoonk/utils';
 
 const ALGOLIA_APP_ID = isProduction ? 'CEHDTPZ5VM' : 'J75DV0NKA3';
@@ -30,3 +30,14 @@ export const search = async (
     index: item.index?.slice(0, item.index.length - 3),
   }));
 };
+
+/**
+ * Search for an existing chapter.
+ */
+export const searchChapter = async (
+  query: string,
+): Promise<ReadonlyArray<Chapter.Index>> => {
+  const index = client.initIndex(`chapters_${appLanguage}`);
+  const req = await index.search<Chapter.Index>(query, { hitsPerPage: 5 });
+  return req.hits;
+};