allow to add existing lessons and examples to a chapter

Author: ceolinwill

src/components/PostForm.tsx

@@ -1,6 +1,10 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { throttle } from 'lodash';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
 import { Button, Grid, makeStyles, TextField } from '@material-ui/core';
 import { Post } from '@zoonk/models';
+import { searchPost } from '@zoonk/services';
 import { appLanguage, GlobalContext } from '@zoonk/utils';
 import FormattingTips from './FormattingTips';
 import FormBase from './FormBase';
@@ -9,6 +13,8 @@ import LinkFormField from './LinkFormField';
 import PostPreview from './PostPreview';
 import TopicSelector from './TopicSelector';
 
+const PostSelector = dynamic(() => import('./PostSelector'));
+
 const useStyles = makeStyles((theme) => ({
   column: {
     '& > *': {
@@ -42,6 +48,8 @@ const PostForm = ({
   onSubmit,
 }: PostFormProps) => {
   const { translate } = useContext(GlobalContext);
+  const { query } = useRouter();
+  const category = String(query.category) as Post.Category;
   const classes = useStyles();
   const [preview, setPreview] = useState<boolean>(false);
   const [content, setContent] = useState<string>(data?.content || '');
@@ -50,7 +58,23 @@ const PostForm = ({
   const [links, setLinks] = useState<string[]>(
     data && data.links && data.links.length > 0 ? data.links : [''],
   );
+  const [search, setSearch] = useState<ReadonlyArray<Post.Index>>([]);
   const valid = content.length > 0 && title.length > 0 && topics.length > 0;
+  const lessonCategories = ['examples', 'lessons'];
+  const isLesson = lessonCategories.includes(category);
+
+  const throttled = useRef(
+    throttle((searchTerm: string) => {
+      searchPost(searchTerm, category).then(setSearch);
+    }, 1000),
+  );
+
+  // Search existing posts when creating a new one.
+  useEffect(() => {
+    if (!data && isLesson && title.length > 3) {
+      throttled.current(title);
+    }
+  }, [data, isLesson, title]);
 
   // Add the current topicId when adding a new item.
   useEffect(() => {
@@ -122,6 +146,8 @@ const PostForm = ({
             type="text"
           />
 
+          {isLesson && <PostSelector posts={search} />}
+
           <TextField
             required
             value={content}

src/components/PostSelector.tsx

@@ -0,0 +1,93 @@
+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 { Post, SnackbarAction } from '@zoonk/models';
+import { firebaseError, GlobalContext, timestamp } from '@zoonk/utils';
+import { addPostToChapter } from '@zoonk/services';
+import Snackbar from './Snackbar';
+
+interface PostSelectorProps {
+  posts: ReadonlyArray<Post.Index>;
+}
+
+/**
+ * Post list with an option to add it to the current chapter.
+ */
+const PostSelector = ({ posts }: PostSelectorProps) => {
+  const { profile, translate, user } = useContext(GlobalContext);
+  const [snackbar, setSnackbar] = useState<SnackbarAction | null>(null);
+  const { query, push } = useRouter();
+  const topicId = String(query.id);
+  const chapterId = String(query.chapterId);
+  const category = String(query.category) as Post.Category;
+
+  if (posts.length === 0 || !profile || !user) {
+    return null;
+  }
+
+  const add = (id: string) => {
+    setSnackbar({ type: 'progress', msg: translate('post_adding') });
+    const metadata = {
+      updatedAt: timestamp,
+      updatedBy: profile,
+      updatedById: user.uid,
+    };
+
+    addPostToChapter(id, chapterId, category, metadata)
+      .then(() =>
+        push(
+          `/topics/[topicId]/chapters/[chapterId]/${category}`,
+          `/topics/${topicId}/chapters/${chapterId}/${category}`,
+        ),
+      )
+      .catch((e) => setSnackbar(firebaseError(e, 'add_existing_post')));
+  };
+
+  return (
+    <Card variant="outlined">
+      <CardHeader
+        title={translate('post_select_title')}
+        subheader={translate('post_select_desc')}
+      />
+      <List>
+        {posts.map((post, index) => (
+          <ListItem key={post.objectID} divider={posts.length > index + 1}>
+            <ListItemText primary={post.title} />
+            <ListItemSecondaryAction>
+              <NextLink
+                href="/posts/[id]"
+                as={`/posts/${post.objectID}`}
+                passHref
+              >
+                <Button
+                  component="a"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  color="primary"
+                >
+                  {translate('view')}
+                </Button>
+              </NextLink>
+              <Button color="secondary" onClick={() => add(post.objectID)}>
+                {translate('add')}
+              </Button>
+            </ListItemSecondaryAction>
+          </ListItem>
+        ))}
+      </List>
+
+      <Snackbar action={snackbar} />
+    </Card>
+  );
+};
+
+export default PostSelector;

src/locale/en.ts

@@ -141,7 +141,10 @@ const translate: TranslationFn = (key, args) => {
     photo_uploaded: 'Uploaded photo',
     photo: 'Photo',
     post_add: 'Create a post',
+    post_adding: 'Adding post to chapter...',
     post_edit: 'Edit post',
+    post_select_desc: 'You can add an existing post to this chapter:',
+    post_select_title: 'Select a post',
     posts_links: 'Posts & Links',
     posts: 'Posts',
     preview: 'Preview',

src/locale/pt.ts

@@ -143,7 +143,11 @@ const translate: TranslationFn = (key, args) => {
     photo_uploaded: 'Foto enviada',
     photo: 'Foto',
     post_add: 'Criar postagem',
+    post_adding: 'Adicionando postagem ao capítulo...',
     post_edit: 'Editar postagem',
+    post_select_desc:
+      'Você pode adicionar uma postagem existente ao capítulo clicando no botão "add":',
+    post_select_title: 'Escolher postagem',
     posts_links: 'Postagens & Links',
     posts: 'Postagens',
     preview: 'Visualizar',

src/models/i18n.ts

@@ -134,7 +134,10 @@ export type TranslationKeys =
   | 'photo_uploaded'
   | 'photo'
   | 'post_add'
+  | 'post_adding'
   | 'post_edit'
+  | 'post_select_desc'
+  | 'post_select_title'
   | 'posts_links'
   | 'posts'
   | 'preview'

src/services/posts.ts

@@ -1,5 +1,5 @@
 import { pickBy } from 'lodash';
-import { ChapterProgress, Post, Profile } from '@zoonk/models';
+import { ChapterProgress, ContentMetadata, Post, Profile } from '@zoonk/models';
 import {
   analytics,
   appLanguage,
@@ -52,6 +52,22 @@ export const createPost = async (
   return slug;
 };
 
+/**
+ * Add an existing post to a chapter.
+ */
+export const addPostToChapter = (
+  postId: string,
+  chapterId: string,
+  category: Post.Category,
+  user: ContentMetadata.Update,
+): Promise<void> => {
+  const changes = {
+    ...user,
+    [category]: arrayUnion(postId),
+  };
+  return db.doc(`chapters/${chapterId}`).update(changes);
+};
+
 /**
  * Update an existing post.
  */

src/services/search.ts

@@ -1,6 +1,6 @@
 import algolia from 'algoliasearch';
 import { SearchResponse } from '@algolia/client-search';
-import { Chapter, SearchResult } from '@zoonk/models';
+import { Chapter, Post, SearchResult } from '@zoonk/models';
 import { analytics, appLanguage, isProduction } from '@zoonk/utils';
 
 const ALGOLIA_APP_ID = isProduction ? 'CEHDTPZ5VM' : 'J75DV0NKA3';
@@ -41,3 +41,18 @@ export const searchChapter = async (
   const req = await index.search<Chapter.Index>(query, { hitsPerPage: 5 });
   return req.hits;
 };
+
+/**
+ * Search for an existing post.
+ */
+export const searchPost = async (
+  query: string,
+  category?: Post.Category,
+): Promise<ReadonlyArray<Post.Index>> => {
+  const index = client.initIndex(`posts_${appLanguage}`);
+  const req = await index.search<Post.Index>(query, {
+    hitsPerPage: 5,
+    filters: category ? `category:${category}` : undefined,
+  });
+  return req.hits;
+};