minor preview fixes

maheshj01 · Jun 15, 2024 · f79b3c1 · f79b3c1
1 parent 1aea2bc
commit f79b3c1
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 172 deletions.
diff --git a/.firebase/hosting.b3V0.cache b/.firebase/hosting.b3V0.cache
diff --git a/src/app/(main)/_components/Pastelog.tsx b/src/app/(main)/_components/Pastelog.tsx
@@ -15,7 +15,7 @@ import { Button } from './button';
 export default function Pastelog() {
 
     const { theme } = useTheme();
-    const [description, setDescription] = useState<string>('');
+    const [title, setTitle] = useState<string>('');
     const [content, setContent] = useState<string>('');
     const [preview, setPreview] = useState<boolean>(false);
     const [loading, setLoading] = useState<boolean>(false);
@@ -28,16 +28,15 @@ export default function Pastelog() {
 
     async function publish() {
         setLoading(true);
-        // 30 days from now
         const today = new Date();
-        // Publish the pastelog
         const log = new Log(
             expiryDate.toDate('UTC'),
             content,
             new Date(),
-            description,
             LogType.TEXT,
-            true
+            true,
+            title,
+            false,
         );
         const id = await logService.publishLog(log);
         if (!id) {
@@ -62,8 +61,8 @@ export default function Pastelog() {
                         <PSInput
                             className="my-2"
                             placeHolder="Pastelog Description"
-                            value={description}
-                            onChange={(e) => { setDescription(e.target.value) }}
+                            value={title}
+                            onChange={(e) => { setTitle(e.target.value) }}
                             disabled={loading}
                         />
                         <div className="flex flex-col items-center w-full md:w-3/4 lg:w-2/3 border-black rounded-lg bg-surface">

diff --git a/src/app/(main)/_components/Preview.tsx b/src/app/(main)/_components/Preview.tsx
@@ -77,12 +77,17 @@ const Preview = ({ logId }: { logId: string }) => {
                     {(
                         !loading &&
                         <div className='flex flex-row justify-between'>
-                            <div className=''>
-                                <p className="text-black dark:text-slate-50 my-1 font-bold">
-                                    {`Expires:`}
-                                </p>
-                                <p className="text-black dark:text-slate-50 my-1"> {` ${previewLog?.expiryDate?.toDateString()}`}</p>
-                            </div>
+                            {
+                                previewLog?.expiryDate ?
+                                    <div>
+                                        <p className="text-black dark:text-slate-50 my-1 font-bold">
+                                            {`Expires:`}
+                                        </p>
+                                        <p className="text-black dark:text-slate-50 my-1"> {` ${previewLog?.expiryDate?.toDateString()}`}</p>
+                                    </div>
+                                    : <div></div>
+
+                            }
                             <Tooltip
                                 content='Download to Image'
                                 placement='top'

diff --git a/src/app/(main)/_components/SideBarItem.tsx b/src/app/(main)/_components/SideBarItem.tsx
@@ -14,7 +14,7 @@ const SidebarItem: React.FC<SidebarItemProps> = ({ selected, id, log, onLogClick
                 className={`text-sm dark:text-slate-200 cursor-pointer py-2 hover:bg-background transition-all duration-100 px-2 rounded-md whitespace-nowrap overflow-hidden text-ellipsis relative ${selected ? 'bg-background' : ''}`}
                 onClick={() => onLogClick(log)}
             >
-                <span>{log.title.length === 0 ? log.id : log.title}</span>
+                <span>{log.title!.length === 0 ? log.id : log.title}</span>
                 <div className="absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-surface pointer-events-none"></div>
             </div>
         </div>

diff --git a/src/app/(main)/_models/Log.ts b/src/app/(main)/_models/Log.ts
@@ -10,33 +10,37 @@ export interface ILog {
     expiryDate: Date | null;
     data: string;
     createdDate: Date;
-    title: string;
+    title?: string | '';
     type: LogType;
     isMarkDown: boolean;
     id?: string;
+    isExpired?: boolean | false;
 }
 
 export class Log implements ILog {
     expiryDate: Date | null;
     data: string;
-    title: string;
+    title?: string | '';
     createdDate: Date;
     type: LogType;
     isMarkDown: boolean;
+    isExpired?: boolean | false;
     id?: string | undefined;
 
     constructor(
         expiryDate: Date | null,
         data: string,
         createdDate: Date,
-        title: string,
         type: LogType,
         isMarkDown: boolean,
+        title?: string | '',
+        isExpired?: boolean | false,
         id?: string
     ) {
         this.expiryDate = expiryDate;
         this.data = data;
         this.title = title;
+        this.isExpired = isExpired;
         this.createdDate = new Date(createdDate);
         this.type = type;
         this.isMarkDown = isMarkDown;
@@ -49,9 +53,10 @@ export class Log implements ILog {
             data.expiryDate ? new Date(data.expiryDate) : null,
             data.data,
             new Date(data.createdDate),
-            data.title,
             data.type as LogType,
             data.isMarkDown,
+            data.title ? data.title : '',
+            data.isExpired,
             data.id ? data.id : doc.id
         );
     }
@@ -61,9 +66,10 @@ export class Log implements ILog {
             expiryDate: this.expiryDate ? this.expiryDate.toISOString() : null,
             data: this.data,
             createdDate: this.createdDate.toISOString(),
-            title: this.title,
+            title: this.title ? this.title : '',
             type: this.type,
             isMarkDown: this.isMarkDown,
+            isExpired: this.isExpired
         };
     }
 }

diff --git a/src/app/(main)/_services/logService.ts b/src/app/(main)/_services/logService.ts
@@ -4,12 +4,15 @@ import { db } from '../../../utils/firebase';
 import { Log } from '../_models/Log';
 
 class LogService {
-    private logCollection = collection(db, 'logs_dev');
+    private logCollection = collection(db, `${process.env.NEXT_PUBLIC_FIREBASE_COLLECTION}`);
     async fetchLogs(): Promise<Log[]> {
         const querySnapshot = await getDocs(this.logCollection);
         const logs: Log[] = [];
         querySnapshot.forEach((doc) => {
-            logs.push(Log.fromFirestore(doc));
+            const log = Log.fromFirestore(doc);
+            if (!log.isExpired) {
+                logs.push(Log.fromFirestore(doc));
+            }
         });
         return logs;
     }

diff --git a/src/app/markdown.css b/src/app/markdown.css
@@ -1,3 +1,9 @@
+.reactMarkDown {
+    /* word-break: break-all;
+    white-space: pre-wrap; */
+    word-wrap: break-word;
+}
+
 .reactMarkDown h1 {
     font-size: 2.25rem;
     font-weight: 700;