From 592a5d50396309494f73761f8c6c9efaaa1fff5c Mon Sep 17 00:00:00 2001
From: KM Koushik <koushikmohan1996@gmail.com>
Date: Sun, 8 Sep 2024 20:37:49 +1000
Subject: [PATCH] fix r2 not working in self-hosted version (#97)

---
 .env.example                                  |  4 +++-
 docker/prod/compose.yml                       |  2 +-
 src/components/AddExpense/AddExpensePage.tsx  |  6 ++---
 src/components/Expense/ExpensePage.tsx        |  7 +++---
 src/env.js                                    |  9 +++-----
 src/pages/add.tsx                             |  7 ++----
 .../[friendId]/expenses/[expenseId].tsx       | 22 +++++++++++++++++--
 src/pages/expenses/[expenseId].tsx            | 22 +++++++++++++++++--
 .../groups/[groupId]/expenses/[expenseId].tsx | 22 +++++++++++++++++--
 9 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/.env.example b/.env.example
index d5bd7af..9b2df5a 100644
--- a/.env.example
+++ b/.env.example
@@ -35,11 +35,13 @@ GOOGLE_CLIENT_SECRET=
 #********* OPTIONAL ENV VARS *********
 
 # Storage: any S3 compatible storage will work, for self hosting can use minio
+# 
 R2_ACCESS_KEY=
 R2_SECRET_KEY=
 R2_BUCKET=
 R2_URL=
-NEXT_PUBLIC_R2_PUBLIC_URL=
+# public url of the storage, https://developers.cloudflare.com/r2/buckets/public-buckets/
+R2_PUBLIC_URL=
 
 # Email
 FROM_EMAIL=
diff --git a/docker/prod/compose.yml b/docker/prod/compose.yml
index 3a73cb1..f924f6a 100644
--- a/docker/prod/compose.yml
+++ b/docker/prod/compose.yml
@@ -39,7 +39,7 @@ services:
       - R2_SECRET_KEY=${R2_SECRET_KEY}
       - R2_BUCKET=${R2_BUCKET}
       - R2_URL=${R2_URL}
-      - NEXT_PUBLIC_R2_PUBLIC_URL=${NEXT_PUBLIC_R2_PUBLIC_URL}
+      - R2_PUBLIC_URL=${R2_PUBLIC_URL}
       - EMAIL_SERVER_HOST=${EMAIL_SERVER_HOST}
       - EMAIL_SERVER_PORT=${EMAIL_SERVER_PORT}
       - EMAIL_SERVER_USER=${EMAIL_SERVER_USER}
diff --git a/src/components/AddExpense/AddExpensePage.tsx b/src/components/AddExpense/AddExpensePage.tsx
index ffea024..2bbb50f 100644
--- a/src/components/AddExpense/AddExpensePage.tsx
+++ b/src/components/AddExpense/AddExpensePage.tsx
@@ -105,9 +105,9 @@ const categories = {
   },
 };
 
-export const AddExpensePage: React.FC<{ isStorageConfigured: boolean }> = ({
-  isStorageConfigured,
-}) => {
+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('');
diff --git a/src/components/Expense/ExpensePage.tsx b/src/components/Expense/ExpensePage.tsx
index bd4377d..a4d84f1 100644
--- a/src/components/Expense/ExpensePage.tsx
+++ b/src/components/Expense/ExpensePage.tsx
@@ -19,9 +19,10 @@ type ExpenseDetailsProps = {
     paidByUser: User;
     deletedByUser: User | null;
   };
+  storagePublicUrl?: string;
 };
 
-const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense }) => {
+const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense, storagePublicUrl }) => {
   const youPaid = expense.paidBy === user.id;
 
   const CategoryIcon = CategoryIcons[expense.category] ?? Banknote;
@@ -59,7 +60,7 @@ const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense }) => {
             <AppDrawer
               trigger={
                 <Image
-                  src={`${env.NEXT_PUBLIC_R2_PUBLIC_URL}/${expense.fileKey}`}
+                  src={`${storagePublicUrl}/${expense.fileKey}`}
                   alt="Expense receipt"
                   width={56}
                   height={56}
@@ -76,7 +77,7 @@ const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense }) => {
             >
               <div className="mb-8 overflow-scroll">
                 <Image
-                  src={`${env.NEXT_PUBLIC_R2_PUBLIC_URL}/${expense.fileKey}`}
+                  src={`${storagePublicUrl}/${expense.fileKey}`}
                   width={300}
                   height={800}
                   alt="Expense receipt"
diff --git a/src/env.js b/src/env.js
index af3cad9..434bb81 100644
--- a/src/env.js
+++ b/src/env.js
@@ -39,6 +39,7 @@ export const env = createEnv({
     EMAIL_SERVER_USER: z.string().optional(),
     EMAIL_SERVER_PASSWORD: z.string().optional(),
     DISCORD_WEBHOOK_URL: z.string().optional(),
+    R2_PUBLIC_URL: z.string().optional(),
   },
 
   /**
@@ -46,10 +47,7 @@ export const env = createEnv({
    * isn't built with invalid env vars. To expose them to the client, prefix them with
    * `NEXT_PUBLIC_`.
    */
-  client: {
-    NEXT_PUBLIC_R2_PUBLIC_URL: z.string().optional(),
-    NEXT_PUBLIC_BEAM_ID: z.string().optional(),
-  },
+  client: {},
 
   /**
    * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
@@ -70,11 +68,10 @@ export const env = createEnv({
     R2_URL: process.env.R2_URL,
     FROM_EMAIL: process.env.FROM_EMAIL,
     FEEDBACK_EMAIL: process.env.FEEDBACK_EMAIL,
-    NEXT_PUBLIC_R2_PUBLIC_URL: process.env.NEXT_PUBLIC_R2_PUBLIC_URL,
+    R2_PUBLIC_URL: process.env.R2_PUBLIC_URL,
     WEB_PUSH_EMAIL: process.env.WEB_PUSH_EMAIL,
     WEB_PUSH_PRIVATE_KEY: process.env.WEB_PUSH_PRIVATE_KEY,
     WEB_PUSH_PUBLIC_KEY: process.env.WEB_PUSH_PUBLIC_KEY,
-    NEXT_PUBLIC_BEAM_ID: process.env.NEXT_PUBLIC_BEAM_ID,
     EMAIL_SERVER_HOST: process.env.EMAIL_SERVER_HOST,
     EMAIL_SERVER_PORT: process.env.EMAIL_SERVER_PORT,
     EMAIL_SERVER_USER: process.env.EMAIL_SERVER_USER,
diff --git a/src/pages/add.tsx b/src/pages/add.tsx
index 7fd9fbe..326b9a9 100644
--- a/src/pages/add.tsx
+++ b/src/pages/add.tsx
@@ -1,12 +1,9 @@
-import { type GroupUser, type Group, type User } from '@prisma/client';
-import { type GetServerSideProps, type NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
 import { AddExpensePage } from '~/components/AddExpense/AddExpensePage';
 import MainLayout from '~/components/Layout/MainLayout';
-import { getServerAuthSessionForSSG } from '~/server/auth';
-import { db } from '~/server/db';
+import { env } from '~/env';
 import { isStorageConfigured } from '~/server/storage';
 import { useAddExpenseStore } from '~/store/addStore';
 import { type NextPageWithUser } from '~/types';
@@ -88,7 +85,7 @@ AddPage.auth = true;
 
 export default AddPage;
 
-export async function getStaticProps() {
+export async function getServerSideProps() {
   console.log('isStorageConfigured', isStorageConfigured());
 
   return {
diff --git a/src/pages/balances/[friendId]/expenses/[expenseId].tsx b/src/pages/balances/[friendId]/expenses/[expenseId].tsx
index deadb8e..6ce1939 100644
--- a/src/pages/balances/[friendId]/expenses/[expenseId].tsx
+++ b/src/pages/balances/[friendId]/expenses/[expenseId].tsx
@@ -7,8 +7,12 @@ import { ChevronLeftIcon, Trash, Trash2 } from 'lucide-react';
 import ExpenseDetails from '~/components/Expense/ExpensePage';
 import { DeleteExpense } from '~/components/Expense/DeleteExpense';
 import { type NextPageWithUser } from '~/types';
+import { env } from '~/env';
 
-const ExpensesPage: NextPageWithUser = ({ user }) => {
+const ExpensesPage: NextPageWithUser<{ storagePublicUrl?: string }> = ({
+  user,
+  storagePublicUrl,
+}) => {
   const router = useRouter();
   const expenseId = router.query.expenseId as string;
   const friendId = parseInt(router.query.friendId as string);
@@ -38,7 +42,13 @@ const ExpensesPage: NextPageWithUser = ({ user }) => {
           />
         }
       >
-        {expenseQuery.data ? <ExpenseDetails user={user} expense={expenseQuery.data} /> : null}
+        {expenseQuery.data ? (
+          <ExpenseDetails
+            user={user}
+            expense={expenseQuery.data}
+            storagePublicUrl={storagePublicUrl}
+          />
+        ) : null}
       </MainLayout>
     </>
   );
@@ -46,4 +56,12 @@ const ExpensesPage: NextPageWithUser = ({ user }) => {
 
 ExpensesPage.auth = true;
 
+export async function getServerSideProps() {
+  return {
+    props: {
+      storagePublicUrl: env.R2_PUBLIC_URL,
+    },
+  };
+}
+
 export default ExpensesPage;
diff --git a/src/pages/expenses/[expenseId].tsx b/src/pages/expenses/[expenseId].tsx
index 8039686..dd57597 100644
--- a/src/pages/expenses/[expenseId].tsx
+++ b/src/pages/expenses/[expenseId].tsx
@@ -9,8 +9,12 @@ import { ChevronLeftIcon } from 'lucide-react';
 import ExpenseDetails from '~/components/Expense/ExpensePage';
 import { DeleteExpense } from '~/components/Expense/DeleteExpense';
 import { type NextPageWithUser } from '~/types';
+import { env } from 'process';
 
-const ExpensesPage: NextPageWithUser = ({ user }) => {
+const ExpensesPage: NextPageWithUser<{ storagePublicUrl?: string }> = ({
+  user,
+  storagePublicUrl,
+}) => {
   const router = useRouter();
   const expenseId = router.query.expenseId as string;
 
@@ -33,7 +37,13 @@ const ExpensesPage: NextPageWithUser = ({ user }) => {
         }
         actions={!expenseQuery.data?.deletedBy ? <DeleteExpense expenseId={expenseId} /> : null}
       >
-        {expenseQuery.data ? <ExpenseDetails user={user} expense={expenseQuery.data} /> : null}
+        {expenseQuery.data ? (
+          <ExpenseDetails
+            user={user}
+            expense={expenseQuery.data}
+            storagePublicUrl={storagePublicUrl}
+          />
+        ) : null}
       </MainLayout>
     </>
   );
@@ -41,4 +51,12 @@ const ExpensesPage: NextPageWithUser = ({ user }) => {
 
 ExpensesPage.auth = true;
 
+export async function getServerSideProps() {
+  return {
+    props: {
+      storagePublicUrl: env.R2_PUBLIC_URL,
+    },
+  };
+}
+
 export default ExpensesPage;
diff --git a/src/pages/groups/[groupId]/expenses/[expenseId].tsx b/src/pages/groups/[groupId]/expenses/[expenseId].tsx
index d42dc3d..42953d1 100644
--- a/src/pages/groups/[groupId]/expenses/[expenseId].tsx
+++ b/src/pages/groups/[groupId]/expenses/[expenseId].tsx
@@ -9,8 +9,12 @@ import { ChevronLeftIcon } from 'lucide-react';
 import ExpenseDetails from '~/components/Expense/ExpensePage';
 import { DeleteExpense } from '~/components/Expense/DeleteExpense';
 import { type NextPageWithUser } from '~/types';
+import { env } from 'process';
 
-const ExpensesPage: NextPageWithUser = ({ user }) => {
+const ExpensesPage: NextPageWithUser<{ storagePublicUrl?: string }> = ({
+  user,
+  storagePublicUrl,
+}) => {
   const router = useRouter();
   const expenseId = router.query.expenseId as string;
   const groupId = parseInt(router.query.groupId as string);
@@ -37,7 +41,13 @@ const ExpensesPage: NextPageWithUser = ({ user }) => {
           <DeleteExpense expenseId={expenseId} groupId={expenseQuery.data?.groupId ?? undefined} />
         }
       >
-        {expenseQuery.data ? <ExpenseDetails user={user} expense={expenseQuery.data} /> : null}
+        {expenseQuery.data ? (
+          <ExpenseDetails
+            user={user}
+            expense={expenseQuery.data}
+            storagePublicUrl={storagePublicUrl}
+          />
+        ) : null}
       </MainLayout>
     </>
   );
@@ -45,4 +55,12 @@ const ExpensesPage: NextPageWithUser = ({ user }) => {
 
 ExpensesPage.auth = true;
 
+export async function getServerSideProps() {
+  return {
+    props: {
+      storagePublicUrl: env.R2_PUBLIC_URL,
+    },
+  };
+}
+
 export default ExpensesPage;