Move email notification to post settings

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

@@ -1,3 +1,5 @@
+import { IPage, IPageSettings, IPost } from "@changes-page/supabase/types/page";
+import { Timeline } from "@changes-page/ui";
 import classNames from "classnames";
 import { useTheme } from "next-themes";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -6,8 +8,6 @@ import PageHeader from "../../../components/page-header";
 import Post from "../../../components/post";
 import SeoTags from "../../../components/seo-tags";
 import SubscribePrompt from "../../../components/subscribe-prompt";
-import { Timeline } from "@changes-page/ui";
-import { IPage, IPageSettings, IPost } from "@changes-page/supabase/types/page";
 import {
   BLACKLISTED_SLUGS,
   fetchPosts,
@@ -156,14 +156,14 @@ export default function Index({
   );
 }
 
-export async function getStaticPaths() {
-  return {
-    paths: [],
-    fallback: "blocking",
-  };
-}
+// export async function getStaticPaths() {
+//   return {
+//     paths: [],
+//     fallback: "blocking",
+//   };
+// }
 
-export async function getStaticProps({
+export async function getServerSideProps({
   params: { site },
 }: {
   params: { site: string };
@@ -210,6 +210,5 @@ export async function getStaticProps({
       postsCount,
       settings,
     },
-    revalidate: 5,
   };
 }

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

@@ -5,6 +5,7 @@ import {
   PostTypeToLabel,
 } from "@changes-page/supabase/types/page";
 import { DateTime } from "@changes-page/utils";
+import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import ReactMarkdown from "react-markdown";
@@ -82,10 +83,12 @@ export default function Index({
   );
 }
 
-export async function getServerSideProps(context: any) {
+export async function getServerSideProps(context: GetServerSidePropsContext) {
   const hostname = context?.req?.headers?.host;
   const { limit } = context?.query;
-  const { domain, page: url_slug } = translateHostToPageIdentifier(hostname);
+  const { domain, page: url_slug } = translateHostToPageIdentifier(
+    hostname ?? ""
+  );
   const site = url_slug || domain;
 
   console.log("handle site ->", site);
@@ -96,7 +99,7 @@ export async function getServerSideProps(context: any) {
 
   const { page, settings } = await fetchRenderData(site);
   const { posts, postsCount } = await fetchPosts(String(page?.id), {
-    limit,
+    limit: Number(limit ?? 25),
     pinned_post_id: settings?.pinned_post_id,
   });
 

apps/page/pages/api/revalidate.ts

@@ -9,6 +9,7 @@ export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<{ revalidated: boolean } | { message: string } | string>
 ) {
+  return res.json({ revalidated: true });
   const { secret } = req.query;
   const { path } = req.body;
 

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

@@ -50,7 +50,8 @@ export const NewPostSchema = object().shape({
   images_folder: string(),
   publish_at: string().optional().nullable(),
   publication_date: string().optional().nullable(),
-  allow_reactions: boolean().optional().nullable(),
+  allow_reactions: boolean(),
+  email_notified: boolean(),
   notes: string().optional().nullable(),
 });
 
@@ -80,18 +81,13 @@ export default function PostFormComponent({
   const [promptProofRead, setPromptProofRead] = useState(false);
   const [customPublishDate, setCustomPublishDate] = useState(false);
 
-  // For email notifications
-  const [emailNotified, setEmailNotified] = useState(false);
   // Internal notes
   const [editNotes, setEditNotes] = useState(false);
 
   const publishingOptions = useMemo(
     () => [
       {
-        name:
-          settings?.email_notifications && !emailNotified
-            ? "Publish & email"
-            : "Publish",
+        name: "Publish",
         description:
           "This post will be published and can be viewed on the page.",
         value: PostStatus.published,
@@ -108,7 +104,7 @@ export default function PostFormComponent({
         value: PostStatus.draft,
       },
     ],
-    [settings?.email_notifications, emailNotified]
+    []
   );
 
   const PostStatusToAction = useMemo(
@@ -131,6 +127,7 @@ export default function PostFormComponent({
       publish_at: null,
       publication_date: null,
       allow_reactions: true,
+      email_notified: false,
       notes: "",
     },
     validationSchema: NewPostSchema,
@@ -144,7 +141,6 @@ export default function PostFormComponent({
       for (let key in post) {
         formik.setFieldValue(key, post[key]);
       }
-      setEmailNotified(post.email_notified ?? false);
     } else {
       formik.setFieldValue("page_id", pageId);
       formik.setFieldValue("images_folder", v4());
@@ -216,7 +212,7 @@ export default function PostFormComponent({
                     Add a label{" "}
                   </Listbox.Label>
                   <div className="relative">
-                    <Listbox.Button className="relative p-0">
+                    <Listbox.Button className="relative p-0 pl-1 scale-110">
                       <PostTypeBadge
                         type={formik.values.type ?? PostType.fix}
                       />
@@ -537,7 +533,22 @@ export default function PostFormComponent({
             </p>
           </div>
 
-          <div className="mt-6 shadow sm:rounded-md sm:overflow-hidden">
+          {settings?.email_notifications && !(post?.email_notified ?? false) ? (
+            <div className="mt-4 shadow sm:rounded-md sm:overflow-hidden">
+              <div className="px-4 py-5 bg-white dark:bg-gray-950 space-y-6 sm:p-6">
+                <SwitchComponent
+                  title="Email Notifications"
+                  message="Notify subscribers about this post"
+                  enabled={!formik.values.email_notified}
+                  onChange={(v: boolean) => {
+                    formik.setFieldValue("email_notified", !v);
+                  }}
+                />
+              </div>
+            </div>
+          ) : null}
+
+          <div className="mt-2 shadow sm:rounded-md sm:overflow-hidden">
             <div className="px-4 py-5 bg-white dark:bg-gray-950 space-y-6 sm:p-6">
               <SwitchComponent
                 title="Reactions"

apps/web/pages/404.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { ROUTES } from "../data/routes.data";
 
-export default function FourOhFour() {
+function FourOhFour() {
   return (
     <div className="bg-white min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
       <div className="max-w-max mx-auto">
@@ -39,3 +39,9 @@ export default function FourOhFour() {
     </div>
   );
 }
+
+FourOhFour.getInitialProps = () => {
+  return { statusCode: 404 };
+};
+
+export default FourOhFour;

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

@@ -16,6 +16,7 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
       publish_at,
       notes,
       allow_reactions,
+      email_notified,
       publication_date,
     } = req.body;
 
@@ -47,6 +48,7 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
           (status === PostStatus.published ? new Date().toISOString() : null),
         notes: notes ?? "",
         allow_reactions: allow_reactions ?? false,
+        email_notified: email_notified ?? false,
       });
 
       return res.status(201).json({ post });