Update Services and Misc #54

kevenleone · Oct 1, 2023 · 66897f8 · 66897f8
1 parent f2eab14
commit 66897f8
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 32 deletions.
diff --git a/apps/mdreader/app/components/blurhash-fallback/index.tsx b/apps/mdreader/app/components/blurhash-fallback/index.tsx
@@ -6,10 +6,12 @@ type BlurhashFallbackProps = {
   blurhash?: string;
   description: string;
   src: string;
+  blurHashProps: Partial<typeof Blurhash.defaultProps>
 };
 
 const BlurhashFallback: React.FC<BlurhashFallbackProps> = ({
   blurhash,
+  blurHashProps,
   description,
   src,
 }) => {
@@ -42,6 +44,7 @@ const BlurhashFallback: React.FC<BlurhashFallbackProps> = ({
             resolutionX={32}
             resolutionY={32}
             width={286}
+            {...blurHashProps}
           />
         </div>
       )}

diff --git a/apps/mdreader/app/components/empty-state/index.tsx b/apps/mdreader/app/components/empty-state/index.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+type EmptyStateProps = {
+  children?: ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const EmptyState: React.FC<EmptyStateProps> = ({ children, ...props }) => (
+  <div {...props}>
+    <div className="flex justify-center">
+      <img src="/empty-state.svg" />
+    </div>
+
+    <div className="text-center flex flex-col justify-center gap-3">
+      <h1 className="text-3xl">It's empty in here</h1>
+
+      <p className="text-gray-600 dark:text-gray-400 flex-wrap">{children}</p>
+    </div>
+  </div>
+);
+
+export default EmptyState;
diff --git a/apps/mdreader/app/components/layout/index.tsx b/apps/mdreader/app/components/layout/index.tsx
@@ -2,7 +2,7 @@ import { useNavigate, Link } from '@remix-run/react';
 import { Button, Layout as LayoutPage } from '@mdreader/interface';
 import { Github } from 'lucide-react';
 import { SupabaseClient } from '@supabase/auth-helpers-remix';
-import { Suspense, useState } from 'react';
+import { useState } from 'react';
 import { useTheme, Theme } from 'remix-themes';
 
 import { ConfirmDialog } from '../../components/confirm-dialog/ConfirmDialog';

diff --git a/apps/mdreader/app/routes/profile.($user)._index.tsx b/apps/mdreader/app/routes/profile.($user)._index.tsx
@@ -12,6 +12,7 @@ import { useFolders } from '~/hooks/useFolders';
 import useSession from '~/hooks/useSession';
 import useUserId from '~/hooks/useUserId';
 import { Folder as IFolder } from '~/types';
+import EmptyState from '~/components/empty-state';
 
 const colors = [
   'from-[#D8B4FE] to-[#818CF8]',
@@ -51,6 +52,8 @@ const MyProfile = () => {
   const articles = articlesData?.data ?? [];
   const folders = foldersData?.data ?? [];
 
+  const isContentValidating =
+    articlesProps.isValidating || folderProps.isValidating;
   const isContentLoading = articlesProps.isLoading || folderProps.isLoading;
 
   const { confirmDialogProps, panelProps, items } = useFolderAndArticleActions({
@@ -109,32 +112,20 @@ const MyProfile = () => {
           <List.Item Icon={Folder} name=".." href={previousFolder} />
         )}
 
-        {!isContentLoading && !items.length && (
-          <div className="mt-8">
-            <div className="flex justify-center">
-              <img src="/empty-state.svg" />
-            </div>
-
-            <div className="text-center flex flex-col justify-center gap-3">
-              <h1 className="text-3xl">It's empty in here</h1>
-
-              <p className="text-gray-600 dark:text-gray-400 flex-wrap">
-                {isMyProfile ? (
-                  <>
-                    Get started by adding content to this folder.
-                    <p className="mb-4">
-                      You can add articles and other folders here.
-                    </p>
-                    <Panel {...panelProps} />
-                  </>
-                ) : (
-                  <>
-                    Oops... looks like the user forgot to add content in here :/
-                  </>
-                )}
-              </p>
-            </div>
-          </div>
+        {!isContentValidating && !items.length && (
+          <EmptyState className="mt-8">
+            {isMyProfile ? (
+              <>
+                Get started by adding content to this folder.
+                <p className="mb-4">
+                  You can add articles and other folders here.
+                </p>
+                <Panel {...panelProps} />
+              </>
+            ) : (
+              <>Oops... looks like the user forgot to add content in here :/</>
+            )}
+          </EmptyState>
         )}
 
         {isContentLoading

diff --git a/apps/mdreader/app/schema/index.ts b/apps/mdreader/app/schema/index.ts
@@ -48,9 +48,10 @@ export const folderSchema = z
 export const knowledgeSchema = z
   .object({
     blurhash: z.string().optional(),
-    description: z.string().min(15).max(250),
+    description: z.string().min(5).max(250),
     id: z.number().optional(),
     image: z.string().optional(),
+    tags: z.array(z.string()),
     knowledge_group_id: z.number().optional(),
     slug: z.string().optional(),
     url: z.string().url(),
@@ -64,7 +65,7 @@ export const knowledgeGroupSchema = z
   .object({
     description: z.string().max(250),
     id: z.number().optional(),
-    image: z.string().optional(),
+    image: z.string().optional().nullable(),
     name: z.string().min(3).max(50),
     private: z.boolean().default(false),
     slug: z.string().optional(),

diff --git a/apps/mdreader/app/services/KnowledgeGroupUserService.ts b/apps/mdreader/app/services/KnowledgeGroupUserService.ts
@@ -0,0 +1,19 @@
+import { KnowledgeGroupUser } from '~/types';
+import SupabaseService, { SupabaseServiceConstructor } from './SupabaseService';
+
+export class KnowledgeGroupUserService extends SupabaseService<
+  KnowledgeGroupUser,
+  {
+    id?: number;
+    knowledge_group_id: number;
+    role: 'moderator' | 'user';
+    user_id: string;
+  }
+> {
+  constructor(props: Omit<SupabaseServiceConstructor, 'table'>) {
+    super({
+      ...props,
+      table: 'knowledge_group_users',
+    });
+  }
+}
diff --git a/apps/mdreader/app/types.ts b/apps/mdreader/app/types.ts
@@ -212,7 +212,7 @@ export interface KnowledgeGroup {
   image: string;
   knowledge_group_users: KnowledgeGroupUser[];
   name: string;
-  owner: string;
+  owner: Profile;
   private: boolean;
   slug: string;
 }

diff --git a/apps/mdreader/app/utils/blurhash.ts b/apps/mdreader/app/utils/blurhash.ts
@@ -3,10 +3,13 @@ import { encode } from 'blurhash';
 const getImageByURL = async (src: string): Promise<HTMLImageElement> =>
   new Promise((resolve, reject) => {
     const img = new Image();
-    img.crossOrigin = 'anonymous';
     img.src = src;
     img.onload = () => resolve(img);
-    img.onerror = (...args) => reject(args);
+    img.onerror = (...args) => {
+      console.log('Error...', args);
+      reject(args);
+    };
+    img.crossOrigin = 'anonymous';
   });
 
 const getImageData = (image: HTMLImageElement) => {