feat: Migrate mega's home directory to test/ and add null check for org

moon/apps/web/components/CommandMenu/LocalCommandMenu.tsx

@@ -25,6 +25,7 @@ import {
   cn,
   CodeIcon,
   Command,
+  ComponentIcon, //test目录
   desktopJoinCall,
   DismissibleLayer,
   GearIcon,

moon/apps/web/components/InboxItems/OrganizationSwitchHoverCard.tsx

@@ -38,11 +38,11 @@ export function OrganizationSwitchHoverCard({
   const [prefetchOrg, setPrefetchOrg] = useState<string | undefined>(undefined)
   const [subview, setSubview] = useState<'notifications' | 'chat'>('notifications')
   const unreadCounts = useGetUnreadNotificationsCount()
-  const unreadInbox = unreadCounts.data?.home_inbox[organization.slug] || 0
-  const unreadChats = unreadCounts.data?.messages[organization.slug] || 0
+  const unreadInbox = unreadCounts.data?.home_inbox[organization?.slug] || 0
+  const unreadChats = unreadCounts.data?.messages[organization?.slug] || 0
   const sidebarCollapsed = useAtomValue(sidebarCollapsedAtom)
   const isViewingInbox = organization
-    ? organization.slug === scope
+    ? organization?.slug === scope
     : router.pathname.startsWith('/[org]/inbox/[inboxView]')
   const isDisabled = sidebarCollapsed || isViewingInbox || disabled
 
@@ -57,7 +57,7 @@ export function OrganizationSwitchHoverCard({
       disabled={isDisabled}
       onOpenChange={(newVal) => {
         setOpen(newVal)
-        setPrefetchOrg(organization.slug)
+        setPrefetchOrg(organization?.slug)
       }}
     >
       <HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
@@ -67,7 +67,7 @@ export function OrganizationSwitchHoverCard({
           <Link href={`/${scope}/inbox/${defaultInboxView}`} onClick={() => setOpen(false)} className='flex flex-1 p-1'>
             <div className='flex items-center gap-1.5'>
               <UIText weight='font-semibold' className='flex-1'>
-                {organization.name}
+                {organization?.name}
               </UIText>
               {shortcut && <KeyboardShortcut shortcut={shortcut} />}
             </div>

moon/apps/web/components/NavigationSidebar/OrganizationSwitcher.tsx

@@ -45,7 +45,7 @@ export function OrganizationSwitcher({ trigger }: { trigger?: React.ReactNode })
     isLoading: organizationsLoading,
     refetch: refetchOrganizations
   } = useGetOrganizationMemberships()
-  const currentOrganization = memberships?.find((m) => m.organization.slug === scope)?.organization
+  const currentOrganization = memberships?.find((m) => m.organization?.slug === scope)?.organization
   const unreadCounts = useGetUnreadNotificationsCount()
   const otherOrgHasUnread =
     !!unreadCounts.data &&
@@ -143,24 +143,24 @@ export function OrganizationSwitcher({ trigger }: { trigger?: React.ReactNode })
     memberships
       ?.filter((o) => o.id !== currentOrganization?.id)
       .map(({ organization }) => {
-        const unreadCount = unreadCounts.data?.home_inbox[organization.slug] || 0
+        const unreadCount = unreadCounts.data?.home_inbox[organization?.slug] || 0
 
         return {
           type: 'item',
-          label: organization.name,
-          url: `/${organization.slug}`,
+          label: organization?.name,
+          url: `/${organization?.slug}`,
           leftSlot: (
             <Avatar
               size='xs'
-              key={organization.id}
-              name={organization.name}
-              urls={organization.avatar_urls}
+              key={organization?.id}
+              name={organization?.name}
+              urls={organization?.avatar_urls}
               rounded='rounded'
             />
           ),
           rightSlot: (
             <>
-              {organization.slug === COMMUNITY_SLUG && <GlobeIcon />}
+              {organization?.slug === COMMUNITY_SLUG && <GlobeIcon />}
               {unreadCount > 0 && (
                 <span className='ml-1 flex h-5 items-center justify-center self-center rounded-full bg-blue-500 px-2.5 font-mono text-[10px] font-semibold leading-none text-white'>
                   {unreadCount}
@@ -233,10 +233,10 @@ function OrganizationAvatarAndName({
         {organization ? (
           <Avatar
             rounded='rounded'
-            key={organization.id}
+            key={organization?.id}
             size='xs'
-            name={organization.name}
-            urls={organization.avatar_urls}
+            name={organization?.name}
+            urls={organization?.avatar_urls}
           />
         ) : (
           <ReorderHandlesIcon />

moon/apps/web/components/OrgSettings/OrganizationReactions/CustomReactionsPacks.tsx

@@ -46,9 +46,9 @@ function Pack({ pack }: { pack: CustomReactionsPack }) {
           onClick={() => setExpanded(!expanded)}
         />
         <div className='flex items-center gap-3'>
-          <Image src={pack.items[0].file_url} alt={pack.name} width={32} height={32} />
+          <Image src={pack.items[0]?.file_url} alt={pack?.name} width={32} height={32} />
           <div className='flex flex-1 flex-col'>
-            <UIText weight='font-medium'>{pack.name}</UIText>
+            <UIText weight='font-medium'>{pack?.name}</UIText>
             <UIText tertiary>{pack.items.length} emojis</UIText>
           </div>
           <PackButton pack={pack} />

moon/apps/web/components/Sidebar/SidebarOrgSwitcher.tsx

@@ -104,9 +104,9 @@ function OrgSidebarItem({
   const isDesktopApp = useIsDesktopApp()
   const unreadCounts = useGetUnreadNotificationsCount()
 
-  const isSelected = scope === organization.slug
-  const inboxCount = unreadCounts.data?.home_inbox[organization.slug]
-  const messagesCount = unreadCounts.data?.messages[organization.slug]
+  const isSelected = scope === organization?.slug
+  const inboxCount = unreadCounts.data?.home_inbox[organization?.slug]
+  const messagesCount = unreadCounts.data?.messages[organization?.slug]
   const unreadCount = (inboxCount || 0) + (messagesCount || 0)
   const showUnread = unreadCount > 0 && !isSelected
 
@@ -129,22 +129,22 @@ function OrgSidebarItem({
       >
         <span>
           <Link
-            key={organization.id}
+            key={organization?.id}
             className={cn(
               'relative flex gap-2 rounded-[5px] ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-900',
               {
                 'ring-2 ring-black focus:ring-black dark:ring-white/90 dark:focus:ring-white/90': isSelected
               }
             )}
-            href={`/${organization.slug}`}
+            href={`/${organization?.slug}`}
             draggable={false}
           >
             <Avatar
               rounded='rounded-[5px]'
-              key={organization.id}
+              key={organization?.id}
               size='sm'
-              name={organization.name}
-              urls={organization.avatar_urls}
+              name={organization?.name}
+              urls={organization?.avatar_urls}
             />
 
             {showUnread && (

moon/apps/web/components/Sidebar/SidebarTest.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import router from 'next/router'
+
+import { SidebarLink } from './SidebarLink'
+import { useScope } from '@/contexts/scope'
+import { ComponentIcon } from '@gitmono/ui/Icons'
+
+export function SidebarTest() {
+  const { scope } = useScope()
+
+  return (
+   <>
+     <SidebarLink
+        id='test'
+        label='Test'
+        href={`/${scope}/test`}
+        active={router.pathname === '/[org]/test'}
+        leadingAccessory={<ComponentIcon />}
+      />
+   </>
+  )
+}

moon/apps/web/components/Sidebar/index.tsx

@@ -38,6 +38,7 @@ import { useShowOrgSwitcherSidebar } from '@/hooks/useShowOrgSwitcherSidebar'
 import { RecentlyViewedPopover } from './RecentlyViewed/RecentlyViewedPopover'
 import { SidebarGroup } from './SidebarGroup'
 import { SidebarInbox } from './SidebarInbox'
+import { SidebarTest } from './SidebarTest'
 
 export function SidebarContainer() {
   const { scope } = useScope()
@@ -163,6 +164,7 @@ function SidebarContent() {
           <SidebarInbox />
           <SidebarMyWorkItems />
           <SidebarDrafts />
+          <SidebarTest />
         </SidebarGroup>
 
         <SidebarFavoritesGroup />

moon/apps/web/components/TestView/CodeTabe.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import 'github-markdown-css/github-markdown-light.css'
+import { usePathname, useRouter } from 'next/navigation'
+import Markdown from 'react-markdown'
+import { formatDistance, fromUnixTime } from 'date-fns'
+import styles from './CodeTable.module.css'
+import { Space, Table, TableProps } from 'antd/lib'
+import {
+    FolderIcon,
+    DocumentIcon,
+} from '@heroicons/react/20/solid'
+import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, AwaitedReactNode } from 'react'
+
+export interface DataType {
+    oid: string;
+    name: string;
+    content_type: string;
+    message: string;
+    date: number;
+}
+
+const CodeTable = ({ directory, readmeContent}:any) => {
+    const router = useRouter();
+    const pathname = usePathname();
+    let real_path = pathname?.replace("/tree", "");
+    var columns: TableProps<DataType>['columns'] = [
+        {
+            title: 'Name',
+            dataIndex: ['name', 'content_type'],
+            key: 'name',
+            render: (_: any, record: { content_type: string; name: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode> | null | undefined }) => {
+                return <>
+                    <Space>
+                        {record.content_type === "directory" && <FolderIcon className="size-6" />}
+                        {record.content_type === "file" && <DocumentIcon className="size-6" />}
+                        <a>{record.name}</a>
+                    </Space>
+                </>
+            }
+        },
+        {
+            title: 'Message',
+            dataIndex: 'message',
+            key: 'message',
+            render: (text:string) => <a>{text}</a>,
+        },
+        {
+            title: 'Date',
+            dataIndex: 'date',
+            key: 'date',
+            render: (_:any, { date }:any) => (
+                <>
+                    {date && formatDistance(fromUnixTime(date), new Date(), { addSuffix: true })}
+                </>
+            )
+        }
+    ];
+    const handleRowClick = (record: { content_type: string; name: any }) => {
+        if (record.content_type === "file") {
+            const newPath = `/blob/${real_path}/${record.name}`;
+
+            router.push(newPath);
+        } else {
+            var newPath = '';
+
+            if (real_path === '/') {
+                newPath = `/tree/${record.name}`;
+            } else {
+                newPath = `/tree/${real_path}/${record.name}`;
+            }
+            router.push(
+                newPath,
+            );
+        }
+    }
+
+    const handleGoBack = () => {
+        const safePath = real_path?.split('/');
+
+        if (safePath?.length == 1) {
+            router.push('/')
+        } else {
+            router.push(`/tree/${safePath?.slice(0, -1).join('/')}`);
+        }
+    };
+
+    return (
+        <div>
+            <Table style={{ clear: "none" }} rowClassName={styles.dirShowTr}
+                pagination={false} columns={columns}
+                dataSource={directory} 
+                rowKey="name"
+                onRow={(record: { content_type: string; name: any }) => {
+                    return {
+                        onClick: () => { handleRowClick(record) }
+                    };
+                }}
+            />
+            {readmeContent && (
+                <div className={styles.markdownContent}>
+                    <div className="markdown-body">
+                        <Markdown>{readmeContent}</Markdown>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+
+
+export default CodeTable;

moon/apps/web/components/TestView/CodeTable.module.css

@@ -0,0 +1,24 @@
+.fileTableIcon {
+  width: 23px;
+  height: 23px;
+  margin-right: 8px;
+}
+
+.readmeContainer {
+  margin-top: 2rem;
+  margin-left: 1rem;
+}
+
+.markdownContent {
+  margin: 0 auto;
+  margin-top: 5%;
+  border: 1px solid rgba(0, 0, 0, 0.112);
+  padding: 2%;
+  border-radius: 0.5rem;
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+
+}

moon/apps/web/components/TestView/index.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import CodeTable from './CodeTabe';
+import { useEffect, useState } from 'react';
+
+export default function TestView() {
+  const [directory, setDirectory] = useState([]);
+  const [readmeContent, setReadmeContent] = useState("");
+
+  const fetchData = async () => {
+    try {
+      const directory = await getDirectory("/");
+
+      setDirectory(directory);
+      const readmeContent = await getReadmeContent("/", directory);
+
+      setReadmeContent(readmeContent);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <div className='p-3.5 mt-3'>
+      <CodeTable directory={directory} readmeContent={readmeContent} />
+    </div>
+  );
+}
+async function getDirectory(pathname: string) {
+  const res = await fetch(`/api/tree/commit-info?path=${pathname}`);
+  const response = await res.json();
+  const directory = response?.data?.data;
+
+  return directory
+}
+
+async function getReadmeContent(pathname:string, directory:Array) {
+  let readmeContent = '';
+
+  for (const project of directory || []) {
+    if (project.name === 'README.md' && project.content_type === 'file') {
+      const res = await fetch(`/api/blob?path=${pathname}/README.md`);
+      const response = await res.json();
+
+      readmeContent = response.data.data;
+      break;
+    }
+  }
+  return readmeContent
+}

moon/apps/web/components/UserSettings/CalDotComIntegration.tsx

@@ -11,7 +11,7 @@ import { useUpdateCalDotComOrganization } from '@/hooks/useUpdateCalDotComOrgani
 export function CalDotComIntegration() {
   const { data: memberships } = useGetOrganizationMemberships()
   const organizations = memberships?.map((m) => m.organization) || []
-  const organizationOptions: SelectOption[] = organizations.map((o) => ({ label: o.name, value: o.id })) || []
+  const organizationOptions: SelectOption[] = organizations.map((o) => ({ label: o?.name, value: o?.id })) || []
   const { data: calDotComIntegration } = useGetCalDotComIntegration()
   const { mutate: updateCalDotComOrganization } = useUpdateCalDotComOrganization()