From ec42a9865a58d83abfe758e4b01904ffb9688851 Mon Sep 17 00:00:00 2001
From: Faye <faye@fayevr.dev>
Date: Tue, 1 Oct 2024 03:27:42 +0200
Subject: [PATCH] add status, add opengraph

---
 .../(main)/community/[communityId]/page.tsx   | 10 ++++--
 src/components/community/admin/main.tsx       | 31 +++++++++++++++++--
 src/components/community/uploadAvatar.tsx     | 19 ++++++------
 src/components/community/uploadBanner.tsx     |  1 +
 4 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/app/[locale]/(main)/community/[communityId]/page.tsx b/src/app/[locale]/(main)/community/[communityId]/page.tsx
index 54e337b..d5835e5 100644
--- a/src/app/[locale]/(main)/community/[communityId]/page.tsx
+++ b/src/app/[locale]/(main)/community/[communityId]/page.tsx
@@ -1,6 +1,7 @@
 import { getCommunity } from '@/utils/server-api/communities/getCommunity'
 import PageClient from './page.client'
 import { notFound } from 'next/navigation'
+import { getCommunityAvatarUrlView } from '@/components/getStorageItem'
 
 export const runtime = 'edge'
 
@@ -15,16 +16,21 @@ export async function generateMetadata({
     return notFound()
   }
 
+  let avatarUrl = '/logos/Headpat_Logo_web_1024x1024_240518-02.png'
+  if (community.avatarId) {
+    avatarUrl = getCommunityAvatarUrlView(community.avatarId)
+  }
+
   return {
     title: community?.name || 'Community',
     description: community?.description,
     icons: {
-      icon: '/logos/Headpat_Logo_web_1024x1024_240518-02.png',
+      icon: avatarUrl,
     },
     openGraph: {
       title: community?.name || 'Community',
       description: community?.description,
-      images: '/logos/Headpat_Logo_web_1024x1024_240518-02.png',
+      images: avatarUrl,
     },
   }
 }
diff --git a/src/components/community/admin/main.tsx b/src/components/community/admin/main.tsx
index 1f5db4f..fa2c604 100644
--- a/src/components/community/admin/main.tsx
+++ b/src/components/community/admin/main.tsx
@@ -1,9 +1,7 @@
 'use client'
 import { Community } from '@/utils/types/models'
-import { databases, functions } from '@/app/appwrite-client'
-import { ExecutionMethod } from 'node-appwrite'
+import { databases } from '@/app/appwrite-client'
 import { useEffect, useState } from 'react'
-import NoAccess from '@/components/static/noAccess'
 import UploadAvatar from '@/components/community/uploadAvatar'
 import UploadBanner from '@/components/community/uploadBanner'
 import { Label } from '@/components/ui/label'
@@ -133,6 +131,33 @@ export default function CommunityAdminMain({
                   </div>
                 </div>
               </div>
+
+              <div className="col-span-full">
+                <Label htmlFor="status">Status</Label>
+                <div className="relative mt-2">
+                  <Input
+                    id="status"
+                    name="status"
+                    type="text"
+                    value={communityData ? communityData.status : ''}
+                    onChange={(e) => {
+                      if (e.target.value.length <= 24) {
+                        setCommunityData({
+                          ...communityData,
+                          status: e.target.value,
+                        })
+                      }
+                    }}
+                    maxLength={24}
+                  />
+                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm leading-5">
+                    <span className="select-none">
+                      {communityData ? communityData.status?.length : 0}
+                    </span>
+                    <span className="select-none text-gray-400">/{24}</span>
+                  </div>
+                </div>
+              </div>
             </div>
 
             <div className="mt-8 flex">
diff --git a/src/components/community/uploadAvatar.tsx b/src/components/community/uploadAvatar.tsx
index f5b18a8..c0da58c 100644
--- a/src/components/community/uploadAvatar.tsx
+++ b/src/components/community/uploadAvatar.tsx
@@ -47,19 +47,11 @@ export default function UploadAvatar({
   const scale = 1
   const rotate = 0
   const aspect = 1
+  const maxSizeInBytes = 1024 * 1024 // 1 MB
 
   function onSelectFile(e: React.ChangeEvent<HTMLInputElement>) {
     if (e.target.files && e.target.files.length > 0) {
       const file = e.target.files[0]
-      const maxSizeInBytes = 1024 * 1024 // 1 MB
-
-      if (file.size > maxSizeInBytes) {
-        toast.error('File size exceeds the 1 MB limit.')
-        if (fileInputRef.current) {
-          fileInputRef.current.value = '' // Reset the input field
-        }
-        return
-      }
 
       setOpen(true)
       setCrop(undefined) // Makes crop preview update between images.
@@ -91,6 +83,15 @@ export default function UploadAvatar({
     try {
       const file = formData.get('file') as File
 
+      if (file.size > maxSizeInBytes) {
+        toast.dismiss(loadingToast)
+        toast.error('File size exceeds the 1 MB limit.')
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '' // Reset the input field
+        }
+        return
+      }
+
       setIsUploading(true)
 
       const data = await functions.createExecution(
diff --git a/src/components/community/uploadBanner.tsx b/src/components/community/uploadBanner.tsx
index 31e8bfc..2bfb9f0 100644
--- a/src/components/community/uploadBanner.tsx
+++ b/src/components/community/uploadBanner.tsx
@@ -83,6 +83,7 @@ export default function UploadBanner({
       const file = formData.get('file') as File
 
       if (file.size > maxSizeInBytes) {
+        toast.dismiss(loadingToast)
         toast.error('File size exceeds the 5 MB limit.')
         if (fileInputRef.current) {
           fileInputRef.current.value = '' // Reset the input field