feat: creators

.env.development

@@ -1,6 +1,7 @@
 NUXT_PUBLIC_APP_URL=http://localhost:3001/
 NUXT_PUBLIC_SITE_URL=https://menthor.io/
-NUXT_PUBLIC_API_URL=http://localhost:3000/dev
+#NUXT_PUBLIC_API_URL=http://localhost:3000/dev
+NUXT_PUBLIC_API_URL=https://2vzfiy8py1.execute-api.sa-east-1.amazonaws.com/dev
 NUXT_PUBLIC_UMAMI_HOST="https://analytics.umami.is/script.js"
 NUXT_PUBLIC_UMAMI_ID="3ff16063-e916-4083-ad5e-66dcec525c16"
 NUXT_PUBLIC_APP_UMAMI_ID="8746ccb0-1a39-489a-8c8f-a394e4e2ee3b"

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [menthorlabs]

apps/app/components/atoms/CreatorsImageCard.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+defineProps<{
+  fileUrl: string;
+}>();
+</script>
+
+<template>
+  <div
+    v-if="fileUrl === 'loading'"
+    class="flex items-center justify-center w-full aspect-video bg-zinc-100 animate-pulse"
+  >
+    <svg
+      class="w-10 h-10 text-zinc-200"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 18"
+    >
+      <path
+        d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"
+      />
+    </svg>
+  </div>
+  <div v-else class="relative group">
+    <div
+      class="absolute top-2 right-2 z-20 hidden group-hover:flex items-center gap-1"
+    >
+      <nuxt-link external target="_blank" :to="fileUrl">
+        <MIconButton icon="external-link-alt" class="!text-white" />
+      </nuxt-link>
+      <MIconButton icon="times" class="!text-white" />
+    </div>
+
+    <div
+      class="absolute z-10 top-0 left-0 w-full h-full items-center justify-center bg-black/50 cursor-pointer hidden group-hover:flex"
+    >
+      <span class="font-semibold text-sm text-white"> Copiar url </span>
+    </div>
+    <div class="aspect-video w-full overflow-hidden bg-zinc-100">
+      <nuxt-img
+        :src="fileUrl"
+        :quality="85"
+        format="webp"
+        width="250"
+        height="140"
+        alt="Roadmap"
+        class="h-full w-full object-cover object-center transition-all group-hover:scale-110"
+      />
+    </div>
+  </div>
+</template>

apps/app/components/molecules/TaskModal.vue

@@ -40,6 +40,7 @@ async function sendSubmission(status: "Pending" | "Draft") {
     if (!currentLesson) return;
 
     const payload: typeof submissionsStore.submission = {
+      Filename: submissionsStore.submission?.Filename || "",
       Content: submissionsStore.submission?.Content || "",
       SubmissionType: currentLesson.submissionContent,
       SubmissionStatus: status,
@@ -62,9 +63,11 @@ async function sendSubmission(status: "Pending" | "Draft") {
       submissionsStore.submission?.SubmissionType === "Image" &&
       uploadedFile.value
     ) {
-      await submissionsStore.requestUrl(uploadedFile.value.type);
-      await submissionsStore.uploadFileOnUrl(uploadedFile.value);
-      submissionsStore.submission.Content = `https://menthor-lessons.s3.sa-east-1.amazonaws.com/${submissionsStore.uploadUrl?.fileName}`;
+      const response = await submissionsStore.requestUrl(
+        uploadedFile.value.type
+      );
+      await submissionsStore.uploadFileOnUrl(uploadedFile.value, response.url);
+      submissionsStore.submission.Filename = response.fileName;
       await submissionsStore.updateSubmission();
     }
     coursesStore.updateCourseLessons(currentLesson._id);
@@ -90,7 +93,7 @@ async function uploadFile(file: File) {
 
   if (!submissionsStore.submission) return;
   uploadedFile.value = file;
-  submissionsStore.submission.Content = URL.createObjectURL(file);
+  submissionsStore.submission.Filename = URL.createObjectURL(file);
 }
 </script>
 
@@ -119,9 +122,13 @@ async function uploadFile(file: File) {
               class="mb-4"
             />
             <nuxt-img
-              v-if="submissionsStore.submission.Content"
+              v-if="submissionsStore.submission.Filename"
               class="rounded overflow-hidden"
-              :src="submissionsStore.submission.Content"
+              :src="
+                submissionsStore.submission.Filename.includes('blob')
+                  ? submissionsStore.submission.Filename
+                  : `https://menthor-lessons.s3.sa-east-1.amazonaws.com/${submissionsStore.submission.Filename}`
+              "
               alt="Submission Image"
             />
           </template>

apps/app/pages/creators/images.vue

@@ -1,12 +1,57 @@
+<script setup lang="ts">
+const creatorsStore = useCreatorsStore();
+const uploadStore = useUploadStore();
+const loading = ref(true);
+
+onMounted(async () => {
+  await creatorsStore.getImages();
+  loading.value = false;
+});
+
+function onInput(event: Event) {
+  const allFiles = (event.target as HTMLInputElement).files;
+
+  if (!allFiles) return;
+
+  for (let i = 0; i < allFiles.length; ++i) {
+    const file = allFiles[i];
+    uploadFile(file);
+  }
+}
+
+async function uploadFile(file: File) {
+  const response = await creatorsStore.signUrl(file.type);
+  console.log(response);
+
+  await uploadStore.uploadFileOnUrl(file, response.signedUrl.url);
+  await creatorsStore.addImage(response.signedUrl.fileName);
+}
+</script>
+
 <template>
-  <div class="container pt-4">
+  <div
+    class="container pt-4"
+    :class="{ 'overflow-hidden h-[calc(100%_-_56px)]': loading }"
+  >
     <h1 class="text-4xl font-extrabold mb-4">Suas imagens</h1>
     <div class="flex items-center gap-4 mb-8">
       <MButton
         variant="outline"
         text="Fazer upload"
         icon-left="cloud-arrow-up"
+        @click="($refs['creators_image'] as HTMLInputElement).click()"
       />
+      <input
+        ref="creators_image"
+        id="creators_image"
+        name="creators_image"
+        type="file"
+        accept="image/*"
+        multiple
+        class="hidden"
+        @input="onInput"
+      />
+
       <div class="space-y-[4px] w-full max-w-[240px] pt-2">
         <div class="rounded-full bg-zinc-200 h-[4px]">
           <div
@@ -15,26 +60,34 @@
         </div>
         <div class="flex text-zinc-500 text-sm">
           <div class="flex-1">
-            Usado: <span class="text-zinc-950 font-medium">5GB</span> de 10GB
+            Usado:
+            <span class="text-zinc-950 font-medium">{{
+              creatorsStore.filesSize
+            }}</span>
+            de 10GB
           </div>
           <div>50%</div>
         </div>
       </div>
     </div>
-    <div class="grid grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))] gap-1">
-      <div v-for="i in 16" :key="i">
-        <div class="aspect-video w-full overflow-hidden">
-          <nuxt-img
-            src="/app/midjourney/backgrounds/login.png"
-            :quality="85"
-            format="webp"
-            width="250"
-            height="140"
-            alt="Roadmap"
-            class="h-full w-full object-cover object-center transition-all group-hover:scale-110"
-          />
-        </div>
-      </div>
+    <div
+      class="grid grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))] gap-1 relative"
+      v-if="loading"
+    >
+      <CreatorsImageCard v-for="i in 30" :key="i" fileUrl="loading" />
+      <div
+        class="absolute top-0 left-0 w-full h-full bg-[linear-gradient(180deg,_rgba(255,_255,_255,_0.00)_0%,_#FFF_100%)] z-10"
+      ></div>
+    </div>
+    <div
+      class="grid grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))] gap-1"
+      v-else
+    >
+      <CreatorsImageCard
+        v-for="fileName in creatorsStore.images"
+        :key="fileName"
+        :fileUrl="`https://menthor-content.s3.sa-east-1.amazonaws.com/${fileName}`"
+      />
     </div>
   </div>
 </template>

apps/app/plugins/icons.ts

@@ -10,6 +10,7 @@ import {
   faCheck,
   faTerminal,
   faCircleInfo,
+  faExternalLinkAlt,
   faMoon,
   faSun,
   faEdit,
@@ -49,6 +50,7 @@ library.add(
   faCheck,
   faTerminal,
   faCircleInfo,
+  faExternalLinkAlt,
   faMoon,
   faSun,
   faEdit,

apps/app/stores/api/creators.ts

@@ -0,0 +1,63 @@
+import { defineStore } from "pinia";
+
+export const useCreatorsStore = defineStore("creators", {
+  state: (): {
+    images: string[];
+    filesSize: number;
+  } => ({
+    images: [],
+    filesSize: 0,
+  }),
+  actions: {
+    async getImages() {
+      try {
+        const response = await this.$api(`/creators/images`);
+        this.images = response.images;
+        this.filesSize = response.filesSize;
+        return response;
+      } catch (e) {
+        throw new Error((e as Error).message);
+      }
+    },
+    async signUrl(fileType: string) {
+      try {
+        const response = await this.$api(`/creators/images/sign-url`, {
+          method: "POST",
+          body: {
+            fileType,
+          },
+        });
+
+        return response;
+      } catch (e) {
+        throw new Error((e as Error).message);
+      }
+    },
+    async deleteImage(fileName: string) {
+      try {
+        await this.$api(`/creators/${fileName}`, {
+          method: "DELETE",
+        });
+
+        if (this.images.length <= 0) return;
+        this.images = this.images.filter((e) => e != fileName);
+      } catch (e) {
+        throw new Error((e as Error).message);
+      }
+    },
+    async addImage(fileName: string) {
+      try {
+        await this.$api(`/creators/images`, {
+          method: "POST",
+          body: {
+            url: fileName,
+          },
+        });
+
+        this.images.push(fileName);
+      } catch (e) {
+        throw new Error((e as Error).message);
+      }
+    },
+  },
+});

apps/app/stores/api/submissions.ts

@@ -9,6 +9,7 @@ export type SubmissionStatus =
 
 export type SubmissionParams = {
   Content: string;
+  Filename: string;
   SubmissionType: "Content" | "Image";
   SubmissionStatus: SubmissionStatus;
   LessonUrl: string;
@@ -20,11 +21,9 @@ export const useSubmissionsStore = defineStore("submissions", {
   state: (): {
     submission: SubmissionParams | null;
     submissions: SubmissionParams[] | null;
-    uploadUrl: { fileName: string; url: string } | null;
   } => ({
     submission: null,
     submissions: null,
-    uploadUrl: null,
   }),
   getters: {
     hasSubmission(state) {
@@ -75,23 +74,27 @@ export const useSubmissionsStore = defineStore("submissions", {
           }
         );
 
-        this.uploadUrl = response.url;
+        console.log(response);
+
+        return response;
       } catch (e) {
         throw new Error((e as Error).message);
       }
     },
-    async uploadFileOnUrl(file: File) {
-      if (!this.uploadUrl?.url) return;
+    async uploadFileOnUrl(file: File, url: string) {
+      console.log({ file, url });
 
       try {
-        const response = await $fetch(this.uploadUrl.url, {
+        const response = await $fetch(url, {
           method: "PUT",
           body: file,
           headers: {
             "Content-Type": file.type,
           },
         });
 
+        console.log(response);
+
         return response;
       } catch (e) {
         throw new Error((e as Error).message);

apps/app/stores/api/upload.ts

@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+
+export const useUploadStore = defineStore("upload", {
+  actions: {
+    async uploadFileOnUrl(file: File, url: string) {
+      try {
+        const response = await $fetch(url, {
+          method: "PUT",
+          body: file,
+          headers: {
+            "Content-Type": file.type,
+          },
+        });
+
+        return response;
+      } catch (e) {
+        throw new Error((e as Error).message);
+      }
+    },
+  },
+});