small improvements

components/Modal/Collection/CollectionInfo.tsx

@@ -66,7 +66,7 @@ export default function CollectionInfo({
                 <p className="text-sm w-full font-bold text-sky-300 mb-2">
                   Icon Color
                 </p>
-                <div style={{ color: collection.color || "#7dd3fc" }}>
+                <div style={{ color: collection.color }}>
                   <FontAwesomeIcon
                     icon={faFolder}
                     className="w-12 h-12 drop-shadow"
@@ -82,7 +82,7 @@ export default function CollectionInfo({
                 </div>
               </div>
               <HexColorPicker
-                color={collection.color || "#7dd3fc"}
+                color={collection.color}
                 onChange={(e) => setCollection({ ...collection, color: e })}
               />
             </div>

lib/client/getPublicCollectionData.ts

@@ -1,11 +1,14 @@
-const getPublicCollectionData = async (collectionId: string) => {
+const getPublicCollectionData = async (
+  collectionId: string,
+  setData?: Function
+) => {
   const res = await fetch(
     "/api/public/routes/collections/?collectionId=" + collectionId
   );
 
   const data = await res.json();
 
-  console.log(data);
+  if (setData) setData(data.response);
 
   return data;
 };

pages/collections/index.tsx

@@ -218,6 +218,7 @@ export default function () {
             activeCollection={{
               name: "",
               description: "",
+              color: "#7dd3fc",
               isPublic: false,
               ownerId: session.data?.user.id as number,
               members: [],

pages/public/collections/[id].tsx

@@ -10,15 +10,12 @@ export default function PublicCollections() {
   const [data, setData] = useState<PublicCollectionIncludingLinks>();
 
   useEffect(() => {
-    const setState = async () => {
-      if (router.query.id) {
-        const data = await getPublicCollectionData(router.query.id as string);
-
-        setData(data.response);
-      }
-    };
-
-    setState();
+    if (router.query.id) {
+      getPublicCollectionData(
+        router.query.id as string,
+        (e: PublicCollectionIncludingLinks) => setData(e)
+      );
+    }
 
     // document
     //   .querySelector("body")
@@ -32,7 +29,9 @@ export default function PublicCollections() {
 
   return data ? (
     <div className="max-w-4xl mx-auto p-5 bg">
-      <div className="text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5">
+      <div
+        className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
+      >
         <p className="text-5xl bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold mb-5 capitalize">
           {data.name}
         </p>