Merge pull request #243 from thanhdanh27600/dev

Dev

prisma/migrations/20240317125704_feature_file/migration.sql

@@ -0,0 +1,42 @@
+-- DropForeignKey
+ALTER TABLE "Media" DROP CONSTRAINT "Media_noteId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Media" DROP CONSTRAINT "Media_urlShortenerHistoryId_fkey";
+
+-- DropIndex
+DROP INDEX "Media_urlShortenerHistoryId_key";
+
+-- CreateTable
+CREATE TABLE "File" (
+    "id" SERIAL NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "hash" TEXT NOT NULL,
+    "urlShortenerHistoryId" INTEGER NOT NULL,
+    "urlShortenerRecordId" INTEGER,
+    "mediaId" INTEGER NOT NULL,
+
+    CONSTRAINT "File_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "File_hash_key" ON "File"("hash");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "File_mediaId_key" ON "File"("mediaId");
+
+-- AddForeignKey
+ALTER TABLE "Media" ADD CONSTRAINT "Media_urlShortenerHistoryId_fkey" FOREIGN KEY ("urlShortenerHistoryId") REFERENCES "UrlShortenerHistory"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Media" ADD CONSTRAINT "Media_noteId_fkey" FOREIGN KEY ("noteId") REFERENCES "Note"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "File" ADD CONSTRAINT "File_urlShortenerHistoryId_fkey" FOREIGN KEY ("urlShortenerHistoryId") REFERENCES "UrlShortenerHistory"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "File" ADD CONSTRAINT "File_urlShortenerRecordId_fkey" FOREIGN KEY ("urlShortenerRecordId") REFERENCES "UrlShortenerRecord"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "File" ADD CONSTRAINT "File_mediaId_fkey" FOREIGN KEY ("mediaId") REFERENCES "Media"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

src/components/atoms/BlobUploader.tsx

@@ -212,7 +212,7 @@ export const BlobUploader = ({ name = '', selectedMedia }: Props) => {
                 <p className="text-sm">Download</p>
               </button>
             )}
-            {hasFile && (
+            {!!downloadUrl && (
               <div className="flex cursor-pointer items-center gap-1 text-gray-700" onClick={handleDelete}>
                 <Trash className="h-4 w-4 " />
                 <p className="text-sm">Delete</p>

src/components/atoms/Tabs.tsx

@@ -34,7 +34,7 @@ export const Tabs = (props: Props) => {
               <button
                 onClick={handleClick(tab)}
                 className={clsx(
-                  'group inline-flex items-center justify-center rounded-t-lg border-b-2 border-transparent p-2 py-2 transition-all md:p-4',
+                  'group inline-flex items-center justify-center rounded-t-lg border-b-2 border-transparent p-1 py-2 transition-all md:p-4',
                   !tab.disabled && !selected && 'hover:border-gray-300 hover:bg-gray-100/40 hover:text-gray-600',
                   !tab.disabled &&
                     selected &&

src/components/screens/Upload.tsx

@@ -5,7 +5,7 @@ import { ShortenUrlTile } from 'components/gadgets/URLShortener/ShortenUrlTile';
 import { FeedbackLink, FeedbackTemplate } from 'components/sections/FeedbackLink';
 import { logEvent } from 'firebase/analytics';
 import mixpanel from 'mixpanel-browser';
-import { useMemo, useState } from 'react';
+import { useLayoutEffect, useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { createFileRequest } from 'requests';
 import shortenSlice from 'store/shortenSlice';
@@ -22,6 +22,10 @@ export const Upload = () => {
   const [localError, setLocalError] = useState('');
   const [shortenUrl, setShortenHistory] = shortenSlice((state) => [state.getShortenUrl(), state.setShortenHistory]);
 
+  useLayoutEffect(() => {
+    setShortenHistory(undefined);
+  }, []);
+
   const requestFile = useMutation(QueryKey.FILE, createFileRequest, {
     onMutate: (variables) => {
       setLocalError('');
@@ -32,13 +36,13 @@ export const Upload = () => {
         errorMessage: error,
         data: variables,
       };
-      mixpanel.track(MIXPANEL_EVENT.NOTE_CREATE, log);
+      mixpanel.track(MIXPANEL_EVENT.FILE_CREATE, log);
       logEvent(analytics, FIREBASE_ANALYTICS_EVENT.FILE_CREATE, log);
     },
     onSuccess: (data, variables, context) => {
       if (data.file?.UrlShortenerHistory) {
         setShortenHistory(data.file.UrlShortenerHistory);
-        mixpanel.track(MIXPANEL_EVENT.NOTE_CREATE, {
+        mixpanel.track(MIXPANEL_EVENT.FILE_CREATE, {
           status: EVENTS_STATUS.OK,
           data,
         });

src/components/sections/URLStatsInput.tsx

@@ -84,7 +84,7 @@ export const URLStats = ({ defaultOpen = false }: { defaultOpen?: boolean }) =>
   return (
     <Accordion title={title} defaultOpen={defaultOpen}>
       <div className="solid container mx-auto max-w-5xl border p-4 py-8 shadow-xl sm:px-8 sm:py-8 sm:pt-10">
-        <h1 className="mb-4 text-3xl">{t('findLink')}</h1>
+        <h1 className="mb-4 flex gap-1 text-xl md:text-3xl">{t('findLink')}</h1>
         <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-2">
           <InputWithButton
             placeholder={`${BASE_URL_SHORT}/xxx`}

src/pages/f/[...hash].tsx

@@ -2,12 +2,15 @@ import { Media } from '@prisma/client';
 import { BlobViewer } from 'components/atoms/BlobViewer';
 import { LayoutMain } from 'components/layouts/LayoutMain';
 import { FeedbackLink, FeedbackTemplate } from 'components/sections/FeedbackLink';
+import mixpanel from 'mixpanel-browser';
 import { GetServerSidePropsContext } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import Head from 'next/head';
+import { useEffect } from 'react';
 import requestIp from 'request-ip';
 import { getFileRequest } from 'requests';
 import { FileWithData } from 'types/file';
+import { MIXPANEL_EVENT } from 'types/utils';
 import { defaultLocale, useTrans } from 'utils/i18next';
 import PageNotFound from '../404';
 
@@ -18,7 +21,12 @@ interface Props {
 }
 
 const ViewFile = ({ file, ip, error }: Props) => {
-  const { t, locale } = useTrans();
+  const { t } = useTrans();
+
+  useEffect(() => {
+    mixpanel.track(MIXPANEL_EVENT.BLOB_VIEW_LANDED);
+  }, []);
+
   if (!file || !file.Media || !!error) return <PageNotFound />;
 
   return (

src/pages/upload.tsx

@@ -14,7 +14,6 @@ const UploadComponent = ({ feature }: { feature: FeatureTabKey }) => {
   useEffect(() => {
     mixpanel.track(MIXPANEL_EVENT.UPLOAD_LANDED);
   }, []);
-
   return <MainPage feature={feature} />;
 };
 

src/types/utils.ts

@@ -14,6 +14,7 @@ const EVENTS = {
   SHORTEN_MORE: 'Shorten Another',
   NOTE_LANDED: 'Note Landed',
   UPLOAD_LANDED: 'Upload Landed',
+  BLOB_VIEW_LANDED: 'Blob View Landed',
   NOTE_GET: 'Note Get',
   NOTE_CREATE: 'Note Create',
   NOTE_UPDATE: 'Note Update',