🔀 Dev to prod

packages/app/.prettierrc.json

@@ -1,8 +1,16 @@
 {
   "trailingComma": "es5",
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
-  "printWidth": 70, 
-  "bracketSameLine": true,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css"
 }

packages/app/app/(legal)/data-request/components/createRequest.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { CardContent } from '@/components/ui/card';
+import { useAccount } from 'wagmi';
+import { Button } from '@/components/ui/button';
+import { LuMail } from 'react-icons/lu';
+
+const CreateRequest = () => {
+  const { address } = useAccount();
+
+  const handleEmailClick = () => {
+    const subject = encodeURIComponent('Request for Personal Data');
+    const body = encodeURIComponent(`Dear StreamETH Support,
+
+I would like to request all my personal data saved by StreamETH.
+
+My login address is: ${address || 'Unknown'}
+
+Please provide me with the following information:
+
+[Please specify what personal data you are requesting]
+
+Thank you for your assistance.
+
+Best regards,
+[Your Name]`);
+
+    window.location.href = `mailto:[email protected]?subject=${subject}&body=${body}`;
+  };
+
+  return (
+    <CardContent className="space-y-4">
+      <h2 className="text-2xl font-bold">Request Your Personal Data</h2>
+      <p className="text-sm text-gray-600">
+        Please click the button below to email [email protected] with your
+        request:
+      </p>
+      <ul className="space-y-2 text-sm list-disc list-inside text-gray-600">
+        <li>
+          Your login address:{' '}
+          <span className="font-mono">{address || 'Not connected'}</span>
+        </li>
+        <li>Specify what personal data you are requesting</li>
+      </ul>
+      <p className="text-sm text-gray-600">
+        We will send an email confirmation that we received your request. We
+        will then follow up with a zip file containing all your personal data
+        saved on StreamETH.
+      </p>
+
+      <Button onClick={handleEmailClick} variant={'primary'} className="w-full">
+        <LuMail size={20} className="mr-2" />
+        Compose Email
+      </Button>
+    </CardContent>
+  );
+};
+
+export default CreateRequest;

packages/app/app/(legal)/data-request/page.tsx

@@ -0,0 +1,38 @@
+'use server';
+
+import { Card, CardTitle, CardFooter } from '@/components/ui/card';
+import Image from 'next/image';
+import Footer from '@/components/Layout/Footer';
+import AuthorizationMessage from '@/components/authorization/AuthorizationMessage';
+import CheckAuthorization from '@/components/authorization/CheckAuthorization';
+import CreateRequest from './components/createRequest';
+
+const DataRequest = async () => {
+  const year = new Date().getFullYear();
+
+  const isAuthorized = await CheckAuthorization();
+  if (!isAuthorized) {
+    return <AuthorizationMessage />;
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <div className="flex flex-grow justify-center items-center">
+        <Card className="flex flex-col justify-between p-5 my-5 w-full max-w-4xl bg-gray-100">
+          <CardTitle className="mb-6 ml-4">
+            <Image
+              src={'/logo.png'}
+              alt={'StreamETH logo'}
+              width={50}
+              height={50}
+            />
+          </CardTitle>
+          <CreateRequest />
+        </Card>
+      </div>
+      <Footer active={'data_request'} />
+    </div>
+  );
+};
+
+export default DataRequest;

packages/app/app/(legal)/privacy/page.tsx

@@ -1,16 +1,16 @@
-import { Card, CardTitle, CardFooter } from '@/components/ui/card'
-import { promises as fs } from 'fs'
-import Image from 'next/image'
-import Footer from '@/components/Layout/Footer'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { Card, CardTitle, CardFooter } from '@/components/ui/card';
+import { promises as fs } from 'fs';
+import Image from 'next/image';
+import Footer from '@/components/Layout/Footer';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
-const Terms = async () => {
-  const year = new Date().getFullYear()
+const Privacy = async () => {
+  const year = new Date().getFullYear();
   const file = await fs.readFile(
     process.cwd() + '/public/legal/privacy.md',
     'utf8'
-  )
+  );
 
   return (
     <div>
@@ -27,18 +27,17 @@ const Terms = async () => {
             </CardTitle>
             <Markdown
               remarkPlugins={[remarkGfm]}
-              className="prose prose-sm my-5 max-w-full p-4">
+              className="prose prose-sm my-5 max-w-full p-4"
+            >
               {file}
             </Markdown>
           </div>
-          <CardFooter>
-            © {year} StreamETH International B.V.
-          </CardFooter>
+          <CardFooter>© {year} StreamETH International B.V.</CardFooter>
         </Card>
       </div>
       <Footer active={'privacy'} />
     </div>
-  )
-}
+  );
+};
 
-export default Terms
+export default Privacy;

packages/app/app/(legal)/terms/page.tsx

@@ -1,16 +1,16 @@
-import { Card, CardTitle, CardFooter } from '@/components/ui/card'
-import { promises as fs } from 'fs'
-import Image from 'next/image'
-import Footer from '@/components/Layout/Footer'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { Card, CardTitle, CardFooter } from '@/components/ui/card';
+import { promises as fs } from 'fs';
+import Image from 'next/image';
+import Footer from '@/components/Layout/Footer';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 const Terms = async () => {
-  const year = new Date().getFullYear()
+  const year = new Date().getFullYear();
   const file = await fs.readFile(
     process.cwd() + '/public/legal/terms.md',
     'utf8'
-  )
+  );
 
   return (
     <div>
@@ -27,18 +27,17 @@ const Terms = async () => {
             </CardTitle>
             <Markdown
               remarkPlugins={[remarkGfm]}
-              className="prose prose-sm my-5 max-w-full p-4">
+              className="prose prose-sm my-5 max-w-full p-4"
+            >
               {file}
             </Markdown>
           </div>
-          <CardFooter>
-            © {year} StreamETH International B.V.
-          </CardFooter>
+          <CardFooter>© {year} StreamETH International B.V.</CardFooter>
         </Card>
       </div>
       <Footer active={'terms'} />
     </div>
-  )
-}
+  );
+};
 
-export default Terms
+export default Terms;

packages/app/app/(vod)/archive/page.tsx

@@ -1,55 +1,50 @@
-import { SearchPageProps } from '@/lib/types'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { fetchEvent } from '@/lib/services/eventService'
-import { redirect } from 'next/navigation'
-import {
-  generalMetadata,
-  archiveMetadata,
-} from '@/lib/utils/metadata'
-import { Metadata } from 'next'
-
-export default async function ArchivePage({
-  searchParams,
-}: SearchPageProps) {
+import { SearchPageProps } from '@/lib/types';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { fetchEvent } from '@/lib/services/eventService';
+import { redirect } from 'next/navigation';
+import { generalMetadata, archiveMetadata } from '@/lib/utils/metadata';
+import { Metadata } from 'next';
+
+export default async function ArchivePage({ searchParams }: SearchPageProps) {
   if (searchParams.organization) {
     const organization = await fetchOrganization({
       organizationSlug: searchParams.organization,
-    })
+    });
 
     if (!organization) {
-      return redirect('/404')
+      return redirect('/404');
     }
 
-    return redirect(`/${organization.slug}/videos`)
+    return redirect(`/${organization.slug}/videos`);
   }
 
   if (searchParams.event) {
     const event = await fetchEvent({
       eventSlug: searchParams.event,
-    })
+    });
 
     const organization = await fetchOrganization({
       organizationId: event?.organizationId as string,
-    })
+    });
 
     if (!event || !organization) {
-      return redirect('/404')
+      return redirect('/404');
     }
 
-    return redirect(`/${organization.slug}/videos`)
+    return redirect(`/${organization.slug}/videos`);
   }
 
-  return <>Page moved</>
+  return <>Page moved</>;
 }
 
 export async function generateMetadata({
   searchParams,
 }: SearchPageProps): Promise<Metadata> {
-  if (!searchParams.event) return generalMetadata
+  if (!searchParams.event) return generalMetadata;
   const event = await fetchEvent({
     eventSlug: searchParams.event,
-  })
+  });
 
-  if (!event) return generalMetadata
-  return archiveMetadata({ event })
+  if (!event) return generalMetadata;
+  return archiveMetadata({ event });
 }

packages/app/app/(vod)/watch/page.tsx

@@ -1,48 +1,41 @@
-import { WatchPageProps } from '@/lib/types'
-import { Metadata } from 'next'
-import { apiUrl } from '@/lib/utils/utils'
-import { notFound } from 'next/navigation'
-import { generalMetadata, watchMetadata } from '@/lib/utils/metadata'
-import { fetchSession } from '@/lib/services/sessionService'
-import { redirect } from 'next/navigation'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { generateThumbnailAction } from '@/lib/actions/sessions'
-export default async function Watch({
-  searchParams,
-}: WatchPageProps) {
-  if (!searchParams.session) return notFound()
+import { WatchPageProps } from '@/lib/types';
+import { Metadata } from 'next';
+import { apiUrl } from '@/lib/utils/utils';
+import { notFound } from 'next/navigation';
+import { generalMetadata, watchMetadata } from '@/lib/utils/metadata';
+import { fetchSession } from '@/lib/services/sessionService';
+import { redirect } from 'next/navigation';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { generateThumbnailAction } from '@/lib/actions/sessions';
+export default async function Watch({ searchParams }: WatchPageProps) {
+  if (!searchParams.session) return notFound();
   const video = await fetchSession({
     session: searchParams.session,
-  })
+  });
 
-  if (!video) return notFound()
+  if (!video) return notFound();
   const organization = await fetchOrganization({
     organizationId: video.organizationId as string,
-  })
+  });
   if (!organization) {
-    return notFound()
+    return notFound();
   }
 
-  redirect(
-    `/${organization.slug}/watch?session=${searchParams.session}`
-  )
-  return 'loading...'
+  redirect(`/${organization.slug}/watch?session=${searchParams.session}`);
+  return 'loading...';
 }
 
 export async function generateMetadata({
   searchParams,
 }: WatchPageProps): Promise<Metadata> {
-  const response = await fetch(
-    `${apiUrl()}/sessions/${searchParams.session}`
-  )
-  const responseData = await response.json()
-  const video = responseData.data
+  const response = await fetch(`${apiUrl()}/sessions/${searchParams.session}`);
+  const responseData = await response.json();
+  const video = responseData.data;
 
-  if (!searchParams.session) return generalMetadata
+  if (!searchParams.session) return generalMetadata;
 
-  if (!video) return generalMetadata
-  const thumbnail =
-    video.coverImage ?? (await generateThumbnailAction(video))
+  if (!video) return generalMetadata;
+  const thumbnail = video.coverImage ?? (await generateThumbnailAction(video));
 
-  return watchMetadata({ session: video, thumbnail })
+  return watchMetadata({ session: video, thumbnail });
 }