Replace post type with tags

apps/page/components/post.tsx

@@ -1,3 +1,4 @@
+import { PostType } from "@changes-page/supabase/types/page";
 import { PostTypeBadge } from "@changes-page/ui";
 import classNames from "classnames";
 import dynamic from "next/dynamic";
@@ -47,11 +48,15 @@ export default function Post({
     >
       <div className="absolute top-3 ml-[-20px] h-[0.0725rem] w-3.5 bg-gray-700 dark:bg-gray-400"></div>
       <div className="min-w-0 w-full space-y-3">
-        <span className="inline-flex text-sm space-x-2 whitespace-nowrap text-gray-500 dark:text-gray-400">
+        <span className="inline-flex flex-col md:flex-row text-sm md:space-x-2 space-y-2 md:space-y-0 whitespace-nowrap text-gray-500 dark:text-gray-400">
           <PostDateTime publishedAt={publishedAt} />
 
           <div className="flex items-center -mt-0.5">
-            <PostTypeBadge type={post?.type} />
+            {(post?.tags ?? []).map((tag, idx) => (
+              <div key={tag} className={classNames(idx ? "ml-2" : "")}>
+                <PostTypeBadge type={tag as PostType} />
+              </div>
+            ))}
             {isPinned && <PostTypeBadge type="pinned" className="ml-2" />}
           </div>
         </span>

apps/page/lib/data.ts

@@ -70,6 +70,9 @@ export const BLACKLISTED_SLUGS = [
   "press-kit",
 ];
 
+const postSelectParams =
+  "id,title,content,tags,publication_date,updated_at,created_at,allow_reactions";
+
 function translateHostToPageIdentifier(host: string): {
   page: string | null;
   domain: string | null;
@@ -209,12 +212,9 @@ async function fetchPosts(
 ): Promise<{ posts: IPost[]; postsCount: number }> {
   const postsQuery = supabaseAdmin
     .from("posts")
-    .select(
-      "id,title,content,type,publication_date,updated_at,created_at,allow_reactions",
-      {
-        count: "exact",
-      }
-    )
+    .select(postSelectParams, {
+      count: "exact",
+    })
     .eq("page_id", String(pageId))
     .eq("status", "published")
     .range(
@@ -242,9 +242,7 @@ async function fetchPosts(
     // Get pinned post
     const { data: pinnedPost, error: pinnedPostError } = await supabaseAdmin
       .from("posts")
-      .select(
-        "id,title,content,type,publication_date,updated_at,created_at,allow_reactions"
-      )
+      .select(postSelectParams)
       .eq("id", pinned_post_id)
       .eq("status", "published")
       .maybeSingle();
@@ -283,7 +281,7 @@ export type IPostPublicData = Pick<
   | "id"
   | "title"
   | "content"
-  | "type"
+  | "tags"
   | "publication_date"
   | "updated_at"
   | "created_at"
@@ -299,9 +297,7 @@ async function fetchPostById(
 }> {
   const { data: post, error: postError } = await supabaseAdmin
     .from("posts")
-    .select(
-      "id,title,content,type,publication_date,updated_at,created_at,allow_reactions"
-    )
+    .select(postSelectParams)
     .eq("id", String(postId))
     .eq("page_id", String(pageId))
     .eq("status", "published")

apps/page/pages/_sites/[site]/plain.tsx

@@ -2,6 +2,7 @@ import {
   IPage,
   IPageSettings,
   IPost,
+  PostType,
   PostTypeToLabel,
 } from "@changes-page/supabase/types/page";
 import { DateTime } from "@changes-page/utils";
@@ -61,7 +62,10 @@ export default function Index({
                 <h2 className="post-title text-xl font-bold">{post.title}</h2>
 
                 <div className="min-w-0 w-full">
-                  {PostTypeToLabel[post?.type]},{" "}
+                  {(post.tags ?? [])
+                    .map((tag) => PostTypeToLabel[tag as PostType])
+                    .join(", ")}
+                  {" | "}
                   <span className="inline-flex text-sm space-x-2 whitespace-nowrap">
                     <time dateTime="2020-09-20" suppressHydrationWarning>
                       {DateTime.fromISO(

apps/page/pages/api/latest.ts

@@ -7,7 +7,7 @@ import { getPageUrl, getPostUrl } from "../../lib/url";
 
 type IPostWithUrl = Pick<
   IPost,
-  "id" | "title" | "content" | "type" | "created_at"
+  "id" | "title" | "content" | "tags" | "created_at"
 > & { url: string };
 
 async function handler(
@@ -32,7 +32,7 @@ async function handler(
     // fetch latest post for page
     const { data, error: postsError } = await supabaseAdmin
       .from("posts")
-      .select("id,title,content,type,publication_date,updated_at,created_at")
+      .select("id,title,content,tags,publication_date,updated_at,created_at")
       .eq("page_id", String(page?.id))
       .eq("status", "published")
       .order("publication_date", { ascending: false })

apps/page/pages/api/pinned.ts

@@ -7,7 +7,7 @@ import { getPageUrl, getPostUrl } from "../../lib/url";
 
 type IPostWithUrl = Pick<
   IPost,
-  "id" | "title" | "content" | "type" | "created_at"
+  "id" | "title" | "content" | "tags" | "created_at"
 > & { url: string };
 
 async function handler(
@@ -32,7 +32,7 @@ async function handler(
     // fetch pinned post for page
     const { data, error: postsError } = await supabaseAdmin
       .from("posts")
-      .select("id,title,content,type,publication_date,updated_at,created_at")
+      .select("id,title,content,tags,publication_date,updated_at,created_at")
       .eq("page_id", String(page?.id))
       .eq("status", "published")
       .eq("id", String(settings?.pinned_post_id))

apps/page/pages/api/posts.ts

@@ -21,7 +21,7 @@ async function handler(
   try {
     const { data: posts } = await supabaseAdmin
       .from("posts")
-      .select("id,title,content,type,publication_date,updated_at,created_at")
+      .select("id,title,content,tags,publication_date,updated_at,created_at")
       .eq("page_id", String(page_id))
       .eq("status", "published")
       .range(Number(offset), Number(PAGINATION_LIMIT - 1 + Number(offset)))

apps/web/components/forms/post-form.component.tsx

@@ -19,7 +19,7 @@ import { useFormik } from "formik";
 import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { v4 } from "uuid";
-import { InferType, boolean, mixed, object, string } from "yup";
+import { InferType, array, boolean, mixed, object, string } from "yup";
 import { track } from "../../utils/analytics";
 import { useUserData } from "../../utils/useUser";
 import { PrimaryButton } from "../core/buttons.component";
@@ -40,9 +40,9 @@ export const NewPostSchema = object().shape({
     .required("Content cannot be empty")
     .min(2, "Content too Short!")
     .max(9669, "Content too Long!"),
-  type: mixed<PostType>()
-    .oneOf(Object.values(PostType))
-    .required("Enter valid type"),
+  tags: array()
+    .of(mixed<PostType>().oneOf(Object.values(PostType)))
+    .required("Enter valid tags"),
   status: mixed<PostStatus>()
     .oneOf(Object.values(PostStatus))
     .required("Enter valid status"),
@@ -120,7 +120,7 @@ export default function PostFormComponent({
     initialValues: {
       title: "",
       content: "",
-      type: Object.keys(PostType)[0] as PostType,
+      tags: [Object.keys(PostType)[0]] as PostType[],
       status: PostStatus.published,
       page_id: "",
       images_folder: "",
@@ -201,21 +201,29 @@ export default function PostFormComponent({
           <div className="overflow-hidden md:rounded-md md:border border-gray-300 dark:border-gray-700 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
             <Listbox
               as="div"
-              value={formik.values.type}
-              onChange={(type) => formik.setFieldValue("type", type)}
+              multiple
+              value={formik.values.tags}
+              onChange={(tags) => {
+                formik.setFieldValue("tags", tags);
+                if (!tags.length) {
+                  formik.setFieldValue("tags", [Object.keys(PostType)[0]]);
+                }
+              }}
               className="flex-shrink-0 bg-white dark:bg-gray-900 p-2"
             >
-              {({ open }) => (
+              {({ open, value }) => (
                 <>
                   <Listbox.Label className="sr-only">
                     {" "}
                     Add a label{" "}
                   </Listbox.Label>
                   <div className="relative">
-                    <Listbox.Button className="relative p-0 pl-1 scale-110">
-                      <PostTypeBadge
-                        type={formik.values.type ?? PostType.fix}
-                      />
+                    <Listbox.Button className="relative p-0 pl-1 scale-110 w-auto text-left">
+                      {value.map((tag: PostType) => (
+                        <div key={tag} className="inline-block ml-2">
+                          <PostTypeBadge type={tag} />
+                        </div>
+                      ))}
                     </Listbox.Button>
 
                     <Transition
@@ -241,6 +249,12 @@ export default function PostFormComponent({
                           >
                             <div className="flex items-center">
                               <span className="block truncate font-medium">
+                                {value.includes(label) ? (
+                                  <CheckIcon
+                                    className="h-5 w-5 inline mr-2"
+                                    aria-hidden="true"
+                                  />
+                                ) : null}
                                 {PostTypeToLabel[label]}
                               </span>
                             </div>

apps/web/components/post/post.tsx

@@ -4,6 +4,7 @@ import {
   IPost,
   PostStatus,
   PostStatusToLabel,
+  PostType,
 } from "@changes-page/supabase/types/page";
 import { PostDateTime, PostTypeBadge } from "@changes-page/ui";
 import { Menu } from "@headlessui/react";
@@ -76,11 +77,15 @@ export function Post({
         <div className="flex items-center justify-between space-x-4 relative">
           <div className="absolute top-3 ml-[-20px] h-[0.0725rem] w-3.5 bg-gray-700 dark:bg-gray-400"></div>
           <div className="min-w-0 w-full space-y-3">
-            <span className="inline-flex text-sm space-x-2 whitespace-nowrap text-gray-500 dark:text-gray-400">
+            <span className="inline-flex flex-col md:flex-row text-sm md:space-x-2 space-y-2 md:space-y-0 whitespace-nowrap text-gray-500 dark:text-gray-400">
               <PostDateTime publishedAt={publishedAt} startWithFullDate />
 
               <div className="flex items-center -mt-0.5">
-                <PostTypeBadge type={post?.type} />
+                {(post?.tags ?? []).map((tag: PostType, idx) => (
+                  <div key={tag} className={classNames(idx ? "ml-2" : "")}>
+                    <PostTypeBadge type={tag} />
+                  </div>
+                ))}
                 {settings?.pinned_post_id === post.id && (
                   <PostTypeBadge type="pinned" className="ml-2" />
                 )}

apps/web/pages/api/integrations/zapier/trigger-new-post.tsx

@@ -11,7 +11,7 @@ import {
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<
-    | Pick<IPost, "id" | "title" | "content" | "type" | "created_at">[]
+    | Pick<IPost, "id" | "title" | "content" | "tags" | "created_at">[]
     | null
     | IErrorResponse
   >
@@ -38,7 +38,7 @@ export default async function handler(
 
     const { data: posts } = await supabaseAdmin
       .from("posts")
-      .select("id,title,content,type,created_at")
+      .select("id,title,content,tags,created_at")
       .eq("page_id", String(pageDetails.id))
       .eq("status", String(status))
       .order("created_at", { ascending: false })

apps/web/pages/api/posts/index.ts

@@ -10,7 +10,7 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
       page_id,
       title,
       content,
-      type,
+      tags,
       status,
       images_folder,
       publish_at,
@@ -39,7 +39,7 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
         page_id,
         title,
         content,
-        type,
+        tags,
         status,
         images_folder,
         publish_at,

packages/supabase/migrations/14_post_tags.sql

@@ -0,0 +1,8 @@
+ALTER TABLE IF EXISTS public.posts
+ADD COLUMN tags text [] not null DEFAULT '{}';
+
+UPDATE posts
+SET tags = array_append(tags, type::text);
+
+ALTER TABLE posts
+DROP COLUMN type;