make r2 env optional

oss-apps · Aug 15, 2024 · 4af4b8d · 4af4b8d
1 parent 8dca40d
commit 4af4b8d
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 47 deletions.
diff --git a/.env.example b/.env.example
@@ -14,7 +14,7 @@ DATABASE_URL="postgresql://postgres@localhost:5435/"
 # POSTGRES_USER="postgres"
 # POSTGRES_PASSWORD="strong-password"
 
-
+# Required
 # Next Auth
 # You can generate a new secret on the command line with:
 # openssl rand -base64 32
@@ -27,12 +27,14 @@ NEXT_PUBLIC_URL="http://localhost:3000"
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
+# optional envs
+
 R2_ACCESS_KEY=
 R2_SECRET_KEY=
 R2_BUCKET=
 R2_URL=
+NEXT_PUBLIC_R2_PUBLIC_URL=
 
-RESEND_API_KEY=
 FROM_EMAIL=
 FEEDBACK_EMAIL=
 

diff --git a/src/components/AddExpense/AddExpensePage.tsx b/src/components/AddExpense/AddExpensePage.tsx
@@ -105,7 +105,9 @@ const categories = {
   },
 };
 
-export const AddExpensePage: React.FC = () => {
+export const AddExpensePage: React.FC<{ isStorageConfigured: boolean }> = ({
+  isStorageConfigured,
+}) => {
   const [date, setDate] = React.useState<Date | undefined>(new Date());
   const [open, setOpen] = React.useState(false);
   const [amtStr, setAmountStr] = React.useState('');
@@ -386,7 +388,7 @@ export const AddExpensePage: React.FC = () => {
                     </Popover>
                   </div>
                   <div className="flex items-center gap-4">
-                    <UploadFile />
+                    {isStorageConfigured ? <UploadFile /> : null}
 
                     <Button
                       className=" min-w-[100px]"

diff --git a/src/env.js b/src/env.js
@@ -25,12 +25,11 @@ export const env = createEnv({
     ),
     GOOGLE_CLIENT_ID: z.string(),
     GOOGLE_CLIENT_SECRET: z.string(),
-    R2_ACCESS_KEY: z.string(),
-    R2_SECRET_KEY: z.string(),
-    R2_BUCKET: z.string(),
-    R2_URL: z.string(),
-    RESEND_API_KEY: z.string(),
-    FROM_EMAIL: z.string(),
+    R2_ACCESS_KEY: z.string().optional(),
+    R2_SECRET_KEY: z.string().optional(),
+    R2_BUCKET: z.string().optional(),
+    R2_URL: z.string().optional(),
+    FROM_EMAIL: z.string().optional(),
     FEEDBACK_EMAIL: z.string().optional(),
     WEB_PUSH_EMAIL: z.string().optional(),
     WEB_PUSH_PRIVATE_KEY: z.string().optional(),
@@ -45,7 +44,7 @@ export const env = createEnv({
    */
   client: {
     NEXT_PUBLIC_URL: z.string(),
-    NEXT_PUBLIC_R2_PUBLIC_URL: z.string(),
+    NEXT_PUBLIC_R2_PUBLIC_URL: z.string().optional(),
     NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY: z.string().optional(),
     NEXT_PUBLIC_BEAM_ID: z.string().optional(),
   },
@@ -67,7 +66,6 @@ export const env = createEnv({
     R2_SECRET_KEY: process.env.R2_SECRET_KEY,
     R2_BUCKET: process.env.R2_BUCKET,
     R2_URL: process.env.R2_URL,
-    RESEND_API_KEY: process.env.RESEND_API_KEY,
     FROM_EMAIL: process.env.FROM_EMAIL,
     FEEDBACK_EMAIL: process.env.FEEDBACK_EMAIL,
     NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,

diff --git a/src/pages/add.tsx b/src/pages/add.tsx
@@ -7,13 +7,17 @@ import { AddExpensePage } from '~/components/AddExpense/AddExpensePage';
 import MainLayout from '~/components/Layout/MainLayout';
 import { getServerAuthSessionForSSG } from '~/server/auth';
 import { db } from '~/server/db';
+import { isStorageConfigured } from '~/server/storage';
 import { useAddExpenseStore } from '~/store/addStore';
 import { type NextPageWithUser } from '~/types';
 import { api } from '~/utils/api';
 
 // 🧾
 
-const AddPage: NextPageWithUser = ({ user }) => {
+const AddPage: NextPageWithUser<{ isStorageConfigured: boolean }> = ({
+  user,
+  isStorageConfigured,
+}) => {
   const { setCurrentUser, setGroup, setParticipants, setCurrency } = useAddExpenseStore(
     (s) => s.actions,
   );
@@ -73,11 +77,23 @@ const AddPage: NextPageWithUser = ({ user }) => {
       <Head>
         <title>Add Expense</title>
       </Head>
-      <MainLayout hideAppBar>{currentUser ? <AddExpensePage /> : <div></div>}</MainLayout>
+      <MainLayout hideAppBar>
+        {currentUser ? <AddExpensePage isStorageConfigured={isStorageConfigured} /> : <div></div>}
+      </MainLayout>
     </>
   );
 };
 
 AddPage.auth = true;
 
 export default AddPage;
+
+export async function getStaticProps() {
+  console.log('isStorageConfigured', isStorageConfigured());
+
+  return {
+    props: {
+      isStorageConfigured: !!isStorageConfigured(),
+    },
+  };
+}
diff --git a/src/server/mailer.ts b/src/server/mailer.ts
@@ -3,8 +3,6 @@ import { Unsend } from 'unsend';
 import { Resend } from 'resend';
 import { env } from '~/env';
 
-const resend = new Resend(env.RESEND_API_KEY);
-
 const unsend = new Unsend(env.UNSEND_API_KEY);
 
 export async function sendSignUpEmail(email: string, token: string, url: string) {
@@ -69,14 +67,4 @@ async function sendMail(email: string, subject: string, text: string, html: stri
   } catch (error) {
     console.log('Error sending email using unsend, so fallback to resend', error);
   }
-
-  const response = await resend.emails.send({
-    from: env.FROM_EMAIL,
-    to: email,
-    subject,
-    text,
-    html,
-  });
-
-  console.log('Email sent', response);
 }
diff --git a/src/server/storage.ts b/src/server/storage.ts
@@ -1,33 +1,42 @@
-import {
-  S3Client,
-  ListBucketsCommand,
-  ListObjectsV2Command,
-  GetObjectCommand,
-  PutObjectCommand,
-  DeleteObjectsCommand,
-  PutBucketCorsCommand,
-} from '@aws-sdk/client-s3';
+import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import { env } from '~/env';
 
-const S3 = new S3Client({
-  region: 'auto',
-  endpoint: env.R2_URL,
-  credentials: {
-    accessKeyId: env.R2_ACCESS_KEY,
-    secretAccessKey: env.R2_SECRET_KEY,
-  },
-});
+let S3: S3Client | null = null;
+
+export const isStorageConfigured = () =>
+  env.R2_URL && env.R2_ACCESS_KEY && env.R2_SECRET_KEY && env.R2_BUCKET;
+
+// console.log(isStorageConfigured());
+
+const getClient = () => {
+  if (!S3 && env.R2_URL && env.R2_ACCESS_KEY && env.R2_SECRET_KEY && env.R2_BUCKET) {
+    S3 = new S3Client({
+      region: 'auto',
+      endpoint: env.R2_URL,
+      credentials: {
+        accessKeyId: env.R2_ACCESS_KEY,
+        secretAccessKey: env.R2_SECRET_KEY,
+      },
+    });
+  }
+
+  return S3;
+};
 
 export const getDocumentUploadUrl = async (key: string, fileType: string, fileSize?: number) => {
+  const s3Client = getClient();
+
+  if (!s3Client) {
+    throw new Error('R2 is not configured');
+  }
+
   const url = await getSignedUrl(
-    S3,
+    s3Client,
     new PutObjectCommand({
       Bucket: env.R2_BUCKET,
       Key: key,
       ContentType: fileType,
-      // ContentLength: fileSize,
-      // C
     }),
     { expiresIn: 3600 },
   );

diff --git a/src/types.ts b/src/types.ts
@@ -2,7 +2,8 @@ import { type NextPage } from 'next';
 import { type User } from 'next-auth';
 import { z } from 'zod';
 
-export type NextPageWithUser = NextPage<{ user: User }> & { auth: boolean };
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type NextPageWithUser<T = {}> = NextPage<{ user: User } & T> & { auth: boolean };
 
 export type PushMessage = { title: string; message: string };