Feat/preview post

apps/frontend/src/app/(site)/preview/[id]/page.tsx

@@ -0,0 +1,16 @@
+import { Preview } from "@gitroom/frontend/components/preview/preview";
+import { isGeneralServerSide } from "@gitroom/helpers/utils/is.general.server.side";
+import { Metadata } from "next";
+
+export const dynamic = 'force-dynamic';
+
+export const metadata: Metadata = {
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Preview`,
+  description: 'Make a preview link for your posts.',
+}
+
+export default async function Index({ params }: { params: { id: string } }) {
+  return (
+    <Preview id={params.id} />
+  );
+}

apps/frontend/src/components/launches/add.edit.model.tsx

@@ -635,7 +635,7 @@ export const AddEditModal: FC<{
                     }
                   >
                     <div className="flex justify-center items-center gap-[5px] h-full">
-                      <div className="h-full flex items-center text-white">
+                      <div className="flex items-center h-full text-white">
                         {!canSendForPublication
                           ? 'Not matching order'
                           : postFor
@@ -645,7 +645,7 @@ export const AddEditModal: FC<{
                           : 'Update'}
                       </div>
                       {!postFor && (
-                        <div className="h-full flex items-center">
+                        <div className="flex items-center h-full">
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
                             width="18"
@@ -668,6 +668,8 @@ export const AddEditModal: FC<{
                       )}
                     </div>
                   </Button>
+
+
                 </Submitted>
               </div>
             </div>

apps/frontend/src/components/launches/calendar.tsx

@@ -134,14 +134,14 @@ export const WeekView = () => {
   const { currentYear, currentWeek } = useCalendar();
 
   return (
-    <div className="flex flex-col h-screen overflow-hidden text-textColor flex-1">
+    <div className="flex flex-col flex-1 h-screen overflow-hidden text-textColor">
       <div className="flex-1">
         <div className="grid grid-cols-8 bg-customColor31 gap-[1px] border-customColor31 border rounded-[10px]">
-          <div className="bg-customColor20 sticky top-0 z-10 bg-gray-900"></div>
+          <div className="sticky top-0 z-10 bg-gray-900 bg-customColor20"></div>
           {days.map((day, index) => (
             <div
               key={day}
-              className="sticky top-0 z-10 bg-customColor20 p-2 text-center"
+              className="sticky top-0 z-10 p-2 text-center bg-customColor20"
             >
               <div>{day}</div>
             </div>
@@ -209,13 +209,13 @@ export const MonthView = () => {
   }, [currentYear, currentMonth]);
 
   return (
-    <div className="flex flex-col h-screen overflow-hidden text-textColor flex-1">
-      <div className="flex-1 flex">
+    <div className="flex flex-col flex-1 h-screen overflow-hidden text-textColor">
+      <div className="flex flex-1">
         <div className="grid grid-cols-7 grid-rows-[40px_auto] bg-customColor31 gap-[1px] border-customColor31 border rounded-[10px] flex-1">
           {days.map((day) => (
             <div
               key={day}
-              className="sticky top-0 z-10 bg-customColor20 p-2 text-center"
+              className="sticky top-0 z-10 p-2 text-center bg-customColor20"
             >
               <div>{day}</div>
             </div>
@@ -237,7 +237,7 @@ export const MonthView = () => {
   );
 };
 
-export const Calendar = () => {
+export const  Calendar = () => {
   const { display } = useCalendar();
 
   return (

apps/frontend/src/components/launches/general.preview.component.tsx

@@ -9,6 +9,7 @@ import interClass from '@gitroom/react/helpers/inter.font';
 
 export const GeneralPreviewComponent: FC<{maximumCharacters?: number}> = (props) => {
   const { value: topValue, integration } = useIntegration();
+
   const mediaDir = useMediaDirectory();
   const newValues = useFormatting(topValue, {
     removeMarkdown: true,
@@ -21,7 +22,7 @@ export const GeneralPreviewComponent: FC<{maximumCharacters?: number}> = (props)
 
   return (
     <div className={clsx('w-full md:w-[555px] px-[16px]')}>
-      <div className="w-full h-full relative flex flex-col">
+      <div className="relative flex flex-col w-full h-full">
         {newValues.map((value, index) => (
           <div
             key={`tweet_${index}`}

apps/frontend/src/components/launches/providers.options.tsx

@@ -22,7 +22,7 @@ export const ProvidersOptions: FC<{
     }
   }, [integrations, selectedIntegrations]);
   return (
-    <div className="flex flex-1 flex-col">
+    <div className="flex flex-col flex-1">
       <PickPlatforms
         integrations={integrations}
         selectedIntegrations={selectedIntegrations}

apps/frontend/src/components/launches/providers/high.order.provider.tsx

@@ -11,7 +11,6 @@ import React, {
 } from 'react';
 import { Button } from '@gitroom/react/form/button';
 import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
-import MDEditor, { commands } from '@uiw/react-md-editor';
 import { useHideTopEditor } from '@gitroom/frontend/components/launches/helpers/use.hide.top.editor';
 import { useValues } from '@gitroom/frontend/components/launches/helpers/use.values';
 import { FormProvider } from 'react-hook-form';
@@ -24,7 +23,6 @@ import {
 import { MultiMediaComponent } from '@gitroom/frontend/components/media/media.component';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
-import { newImage } from '@gitroom/frontend/components/launches/helpers/new.image.component';
 import { postSelector } from '@gitroom/frontend/components/post-url-selector/post.url.selector';
 import { UpDownArrow } from '@gitroom/frontend/components/launches/up.down.arrow';
 import { arrayMoveImmutable } from 'array-move';
@@ -37,6 +35,8 @@ import { useCopilotAction, useCopilotReadable } from '@copilotkit/react-core';
 import { AddPostButton } from '@gitroom/frontend/components/launches/add.post.button';
 import { GeneralPreviewComponent } from '@gitroom/frontend/components/launches/general.preview.component';
 import { capitalize } from 'lodash';
+
+import { useToaster } from '@gitroom/react/toaster/toaster';
 import { useModals } from '@mantine/modals';
 
 // Simple component to change back to settings on after changing tab
@@ -93,6 +93,7 @@ export const withProvider = function <T extends object>(
     hideMenu?: boolean;
     show: boolean;
   }) => {
+    const toast = useToaster();
     const existingData = useExistingData();
     const { integration, date } = useIntegration();
     const [showLinkedinPopUp, setShowLinkedinPopUp] = useState<any>(false);
@@ -121,6 +122,7 @@ export const withProvider = function <T extends object>(
           }))
         : [{ content: '' }]
     );
+
     const [showTab, setShowTab] = useState(0);
 
     const Component = useMemo(() => {
@@ -224,6 +226,20 @@ export const withProvider = function <T extends object>(
       [InPlaceValue]
     );
 
+    // Share Post
+    const handleShare = () => {
+      const postId = existingData.posts[0].id;
+      const origin = window.location.origin;
+      const previewPath = `${origin}/preview/${postId}`;
+
+      try {
+        navigator.clipboard.writeText(previewPath);
+        return toast.show('Link copied to clipboard.', 'success');
+      } catch (err) {
+        toast.show('Failed to copy the link.', 'warning');
+      }
+    };
+
     // This is a function if we want to switch from the global editor to edit in place
     const changeToEditor = useCallback(async () => {
       if (
@@ -288,7 +304,7 @@ export const withProvider = function <T extends object>(
         <div className="mt-[15px] w-full flex flex-col flex-1">
           {!props.hideMenu && (
             <div className="flex gap-[4px]">
-              <div className="flex-1 flex">
+              <div className="flex flex-1">
                 <Button
                   className="rounded-[4px] flex-1 overflow-hidden whitespace-nowrap"
                   secondary={showTab !== 0}
@@ -298,7 +314,7 @@ export const withProvider = function <T extends object>(
                 </Button>
               </div>
               {!!SettingsComponent && (
-                <div className="flex-1 flex">
+                <div className="flex flex-1">
                   <Button
                     className={clsx(
                       'flex-1 overflow-hidden whitespace-nowrap',
@@ -311,7 +327,7 @@ export const withProvider = function <T extends object>(
                   </Button>
                 </div>
               )}
-              <div className="flex-1 flex">
+              <div className="flex flex-1">
                 <Button
                   className="text-white rounded-[4px] flex-1 !bg-red-700 overflow-hidden whitespace-nowrap"
                   secondary={showTab !== 1}
@@ -429,8 +445,30 @@ export const withProvider = function <T extends object>(
                           </div>
                         </div>
                       </div>
-                      <div>
+                      <div className="flex gap-[8px] items-center">
                         <AddPostButton onClick={addValue(index)} num={index} />
+                        <Button
+                          onClick={handleShare}
+                          className="!h-[24px] rounded-[3px] flex gap-[4px] w-[102px] text-[12px] font-[500]"
+                        >
+                          <div>
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              version="1.1"
+                              x="0px"
+                              y="0px"
+                              viewBox="0 0 800 1000"
+                              className="max-w-[20px] max-h-[20px] fill-current h-[1.25em]"
+                            >
+                              <path
+                                fill="white"
+                                d="M443.25,529.42c2.9,1.32,6.32,0.83,8.73-1.27l211.28-183.37c1.79-1.55,2.81-3.79,2.81-6.16c0-2.37-1.02-4.61-2.81-6.16  L451.98,149.11c-2.41-2.1-5.83-2.59-8.73-1.27c-2.91,1.33-4.77,4.23-4.77,7.42v109.52c-168.67,5.27-304.54,173.69-304.54,379.94  c0,3.81,2.63,7.11,6.35,7.95c0.61,0.14,1.21,0.21,1.81,0.21c3.08,0,5.97-1.75,7.35-4.63c81.79-170.48,158.11-233.12,289.03-235.58  V522C438.47,525.19,440.34,528.09,443.25,529.42z M151.83,607.06c15.41-182.94,141.74-326.08,294.8-326.08  c4.51,0,8.16-3.65,8.16-8.16v-99.67l190.67,165.48L454.79,504.11v-99.67c0-4.51-3.65-8.16-8.16-8.16  C314.35,396.29,231.89,454.14,151.83,607.06z"
+                              />
+                            </svg>
+                          </div>
+
+                          <div className="text-white">Share</div>
+                        </Button>
                       </div>
                     </Fragment>
                   ))}

apps/frontend/src/components/preview/preview.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { GeneralPreviewComponent } from '@gitroom/frontend/components/launches/general.preview.component';
+import { IntegrationContext } from '@gitroom/frontend/components/launches/helpers/use.integration';
+import dayjs from 'dayjs';
+import { useCallback } from 'react';
+import useSWR from 'swr';
+import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
+import { LoadingComponent } from '../layout/loading';
+
+interface PreviewProps {
+  id: string;
+}
+
+export const Preview = ({ id }: PreviewProps) => {
+  const fetch = useFetch();
+
+  const getPostsMarketplace = useCallback(async () => {
+    return (await fetch(`/posts/${id}`)).json();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  const { data, isLoading, error } = useSWR(
+    `/posts/${id}`,
+    getPostsMarketplace
+  );
+
+  if (isLoading) return <LoadingComponent />;
+
+  if (!data?.posts || error)
+    return (
+      <main className="flex mx-auto">
+        <h1>
+          {!data?.posts ? 'No post founded.' : 'Oops! Something went wrong.'}{' '}
+        </h1>
+      </main>
+    );
+
+  return (
+    <IntegrationContext.Provider
+      value={{
+        date: dayjs(),
+        integration: data?.posts[0]?.integration,
+        value: [
+          {
+            content: data?.posts[0]?.content,
+            id: data?.posts[0]?.id,
+            image: data?.posts[0]?.image,
+          },
+        ],
+      }}
+    >
+      <div className="flex mx-auto">
+        <GeneralPreviewComponent />
+      </div>
+    </IntegrationContext.Provider>
+  );
+};