Revert "Feat/issue55 profile photo" (#393)

Reverts #392
I accidentally merged this PR to master instead of dev.

apps/recnet-api/.env.sample

@@ -23,10 +23,4 @@ export SMTP_PASS="ask for password"
 export SLACK_TOKEN="ask for token" # to be deprecated
 export SLACK_CLIENT_ID="ask for client id"
 export SLACK_CLIENT_SECRET="ask for client secret"
-export SLACK_TOKEN_ENCRYPTION_KEY="ask for token encryption key"
-
-# AWS S3
-export AWS_BUCKET_NAME="ask for AWS bucket name"
-export AWS_ACCESS_KEY_ID="ask for AWS access key id"
-export AWS_SECRET_ACCESS_KEY="ask for AWS secret access key"
-export AWS_BUCKET_REGION="ask for AWS bucket region"
+export SLACK_TOKEN_ENCRYPTION_KEY="ask for token encryption key"

apps/recnet-api/.env.test

@@ -5,10 +5,4 @@ SMTP_USER=test_user
 SMTP_PASS=test_password
 SLACK_CLIENT_ID=test_client_id
 SLACK_CLIENT_SECRET=test_client_secret
-SLACK_TOKEN_ENCRYPTION_KEY=test_token_encryption_key
-
-# AWS S3
-export AWS_BUCKET_NAME=test_aws_bucket_name
-export AWS_ACCESS_KEY_ID=test_aws_access_key_id
-export AWS_SECRET_ACCESS_KEY=test_aws_secret_access_key
-export AWS_BUCKET_REGION=test_aws_bucket_region
+SLACK_TOKEN_ENCRYPTION_KEY=test_token_encryption_key

apps/recnet-api/src/app.module.ts

@@ -9,7 +9,6 @@ import { ArticleModule } from "./modules/article/article.module";
 import { EmailModule } from "./modules/email/email.module";
 import { HealthModule } from "./modules/health/health.module";
 import { InviteCodeModule } from "./modules/invite-code/invite-code.module";
-import { PhotoStorageModule } from "./modules/photo-storage/photo-storage.module";
 import { RecModule } from "./modules/rec/rec.module";
 import { StatModule } from "./modules/stat/stat.module";
 import { SubscriptionModule } from "./modules/subscription/subscription.module";
@@ -33,7 +32,6 @@ import { LoggerMiddleware } from "./utils/middlewares/logger.middleware";
     EmailModule,
     AnnouncementModule,
     SubscriptionModule,
-    PhotoStorageModule,
   ],
   controllers: [],
   providers: [],

apps/recnet-api/src/config/common.config.ts

@@ -38,10 +38,3 @@ export const SlackConfig = registerAs("slack", () => ({
   clientSecret: parsedEnv.SLACK_CLIENT_SECRET,
   tokenEncryptionKey: parsedEnv.SLACK_TOKEN_ENCRYPTION_KEY,
 }));
-
-export const S3Config = registerAs("s3", () => ({
-  bucketName: parsedEnv.AWS_BUCKET_NAME,
-  accessKeyId: parsedEnv.AWS_ACCESS_KEY_ID,
-  secretAccessKey: parsedEnv.AWS_SECRET_ACCESS_KEY,
-  s3Region: parsedEnv.AWS_BUCKET_REGION,
-}));

apps/recnet-api/src/config/env.schema.ts

@@ -30,11 +30,6 @@ export const EnvSchema = z.object({
   SLACK_TOKEN_ENCRYPTION_KEY: z
     .string()
     .transform((val) => Buffer.from(val, "base64")),
-  // AWS S3 config
-  AWS_BUCKET_NAME: z.string(),
-  AWS_ACCESS_KEY_ID: z.string(),
-  AWS_SECRET_ACCESS_KEY: z.string(),
-  AWS_BUCKET_REGION: z.string(),
 });
 
 export const parseEnv = (env: Record<string, string | undefined>) => {

apps/recnet-api/src/utils/error/recnet.error.const.ts

@@ -23,8 +23,6 @@ export const ErrorCode = {
   EMAIL_SEND_ERROR: 3000,
   FETCH_DIGITAL_LIBRARY_ERROR: 3001,
   SLACK_ERROR: 3002,
-  AWS_S3_GET_SIGNED_URL_ERROR: 3003,
-  AWS_S3_DELETE_OBJECT_ERROR: 3004,
 };
 
 export const errorMessages = {
@@ -51,6 +49,4 @@ export const errorMessages = {
   [ErrorCode.FETCH_DIGITAL_LIBRARY_ERROR]: "Fetch digital library error",
   [ErrorCode.SLACK_ERROR]: "Slack error",
   [ErrorCode.SLACK_ALREADY_INSTALLED]: "Slack already installed",
-  [ErrorCode.AWS_S3_GET_SIGNED_URL_ERROR]: "Failed to get AWS S3 signed URL",
-  [ErrorCode.AWS_S3_DELETE_OBJECT_ERROR]: "AWS S3 delete object error",
 };

apps/recnet/src/components/setting/profile/ProfileEditForm.tsx

@@ -10,9 +10,7 @@ import {
   TextArea,
 } from "@radix-ui/themes";
 import { TRPCClientError } from "@trpc/client";
-import Image from "next/image";
 import { useRouter, usePathname } from "next/navigation";
-import React from "react";
 import { useForm, useFormState } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
@@ -63,14 +61,11 @@ const ProfileEditSchema = z.object({
     .max(200, "Bio must contain at most 200 character(s)")
     .nullable(),
   url: z.string().url().nullable(),
-  photoUrl: z.string().url(),
   googleScholarLink: z.string().url().nullable(),
   semanticScholarLink: z.string().url().nullable(),
   openReviewUserName: z.string().nullable(),
 });
 
-const MAX_FILE_SIZE = 3 * 1024 * 1024; // 3MB in bytes
-
 export function ProfileEditForm() {
   const utils = trpc.useUtils();
   const router = useRouter();
@@ -88,7 +83,6 @@ export function ProfileEditForm() {
         affiliation: user?.affiliation ?? null,
         bio: user?.bio ?? null,
         url: user?.url ?? null,
-        photoUrl: user?.photoUrl ?? null,
         googleScholarLink: user?.googleScholarLink ?? null,
         semanticScholarLink: user?.semanticScholarLink ?? null,
         openReviewUserName: user?.openReviewUserName ?? null,
@@ -98,44 +92,6 @@ export function ProfileEditForm() {
   const { isDirty } = useFormState({ control: control });
 
   const updateProfileMutation = trpc.updateUser.useMutation();
-  const generateUploadUrlMutation = trpc.generateUploadUrl.useMutation();
-  const [isUploading, setIsUploading] = React.useState(false);
-  const [selectedFile, setSelectedFile] = React.useState<File | null>(null);
-  const [photoPreviewUrl, setPhotoPreviewUrl] = React.useState<string | null>(
-    null
-  );
-  const [fileError, setFileError] = React.useState<string | null>(null);
-
-  const handleUploadS3 = async (formData: any) => {
-    if (!selectedFile) return;
-    try {
-      setIsUploading(true);
-      const uploadUrl = await generateUploadUrlMutation.mutateAsync();
-      if (!uploadUrl?.url) {
-        throw new Error("Error getting S3 upload URL");
-      }
-      const response = await fetch(uploadUrl.url, {
-        method: "PUT",
-        body: selectedFile,
-        headers: {
-          "Content-Type": selectedFile.type,
-        },
-      });
-      if (!response.ok) {
-        throw new Error("Upload failed");
-      }
-      // The URL where the file will be accessible
-      const fileUrl = uploadUrl.url.split("?")[0];
-      // update form data directly because the form data is already passed to the handleSubmit function
-      formData.photoUrl = fileUrl;
-      return formData;
-    } catch (error) {
-      console.error("Error uploading file:", error);
-      toast.error("Error uploading file. Please try again.");
-    } finally {
-      setIsUploading(false);
-    }
-  };
 
   return (
     <form
@@ -148,12 +104,8 @@ export function ProfileEditForm() {
           console.error("Invalid form data.");
           return;
         }
-        // Handle the file upload if there's a selected file
-        if (selectedFile) {
-          res.data = await handleUploadS3(res.data);
-        }
         // if no changes, close dialog
-        if (!isDirty && !selectedFile) {
+        if (!isDirty) {
           setOpen(false);
           return;
         }
@@ -231,62 +183,6 @@ export function ProfileEditForm() {
             </Text>
           ) : null}
         </label>
-        <label>
-          <Text as="div" size="2" mb="1" weight="medium">
-            Profile Photo
-          </Text>
-          <input
-            type="file"
-            accept="image/*"
-            onChange={async (e: React.ChangeEvent<HTMLInputElement>) => {
-              setFileError(null);
-              if (!e.target.files || e.target.files.length === 0) {
-                setSelectedFile(null);
-                setPhotoPreviewUrl(null);
-                return;
-              }
-              const file = e.target.files[0];
-              if (file.size > MAX_FILE_SIZE) {
-                setFileError("File size must be less than 3MB");
-                setSelectedFile(null);
-                setPhotoPreviewUrl(null);
-                return;
-              }
-
-              setSelectedFile(file);
-              // Cleanup previous preview URL if it exists
-              if (photoPreviewUrl) {
-                URL.revokeObjectURL(photoPreviewUrl);
-              }
-              // Create preview URL for the selected image
-              const objectUrl = URL.createObjectURL(file);
-              setPhotoPreviewUrl(objectUrl);
-            }}
-          />
-          {fileError && (
-            <Text size="1" color="red">
-              {fileError}
-            </Text>
-          )}
-          {formState.errors?.photoUrl ? (
-            <Text size="1" color="red">
-              {formState.errors.photoUrl.message}
-            </Text>
-          ) : null}
-          {photoPreviewUrl && (
-            <Image
-              src={photoPreviewUrl}
-              alt="Profile photo preview"
-              width={100}
-              height={100}
-              style={{
-                objectFit: "cover",
-                borderRadius: "50%",
-                marginTop: "12px",
-              }}
-            />
-          )}
-        </label>
         <label>
           <Text as="div" size="2" mb="1" weight="medium">
             Affiliation
@@ -417,9 +313,9 @@ export function ProfileEditForm() {
             "bg-gray-5": !formState.isValid,
           })}
           type="submit"
-          disabled={!formState.isValid || isUploading}
+          disabled={!formState.isValid}
         >
-          {isUploading ? "Uploading photo..." : "Save"}
+          Save
         </Button>
       </Flex>
     </form>