update accordion component

pepkit · Sep 11, 2024 · 5a2355d · 5a2355d
1 parent 291bb8d
commit 5a2355d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 85 deletions.
diff --git a/web/src/components/browse/project-accordion.tsx b/web/src/components/browse/project-accordion.tsx
@@ -1,31 +1,63 @@
-import { Editor } from '@monaco-editor/react';
-import { useForm } from 'react-hook-form';
-import { useParams } from 'react-router-dom';
+import { useState } from 'react';
 
-import { PageLayout } from '../components/layout/page-layout';
-import { SchemaHeader } from '../components/schemas/schema-header';
-import { SchemaInterface } from '../components/schemas/schema-interface';
-import { useSession } from '../contexts/session-context';
-import { useSchema } from '../hooks/queries/useSchema';
+import { Markdown } from '../markdown/render';
 
-export function Schema() {
-  const { user } = useSession();
-  const { namespace, schema } = useParams();
-  const { data: schemaData, isFetching: isLoading } = useSchema(namespace, schema);
+import 'bootstrap/dist/css/bootstrap.min.css'
+import "bootstrap/dist/js/bootstrap.bundle.min.js"
 
-  const {} = useForm();
+export const ProjectAccordion = ({ projects }) => {
+  const [openIndex, setOpenIndex] = useState(null);
 
-  const canEdit = (user && (user.login === namespace || user.orgs.includes(namespace || 'NONE'))) || false;
+  // Filter out the 'length' property
+  const projectItems = Object.entries(projects).filter(([key]) => key !== 'length');
+
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true
+    });
+  };
 
   return (
-    <PageLayout title={`${namespace}/${schema} schema`} fullWidth>
-      <SchemaInterface
-        namespace={namespace!}
-        name={schema!}
-        key={schemaData?.schema || 'NONE'}
-        canEdit={canEdit}
-        schemaData={schemaData}
-      />
-    </PageLayout>
+    <div className="accordion" id="projectAccordion">
+      {projectItems.map(([key, project], index) => (
+        <div className="accordion-item shadow-sm" key={key}>
+          <h2 className="accordion-header" id={`heading${key}`}>
+            <button
+              className={`accordion-button py-2 ${index !== 0 ? 'collapsed' : ''}`}
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target={`#collapse${key}`}
+              aria-expanded={index === 0 ? 'true' : 'false'}
+              aria-controls={`collapse${key}`}
+            >
+              <span style={{minWidth: '2.5em'}}>{index + 1}.</span>
+              <span className='w-75'>{project.namespace}/<span className='fw-semibold'>{project.name}</span>:{project.tag}</span>
+              <span style={{marginLeft: '10em', minWidth: '4.5em'}} className='text-center text-sm border border-dark rounded-2 px-2 py-1'>{project.stars_number} Stars</span>
+            </button>
+          </h2>
+          <div
+            id={`collapse${key}`}
+            className={`accordion-collapse collapse ${index === 0 ? 'show' : ''}`}
+            aria-labelledby={`heading${key}`}
+            data-bs-parent="#projectAccordion"
+          >
+            <div className="accordion-body">
+
+              {project.description ? <Markdown>{project.description}</Markdown> : <p className='fst-italic'>No description</p>}
+              <p className='m-0 text-sm'><span className='fw-semibold'>Sample Count:</span> {project.number_of_samples}</p>
+              <p className='m-0 text-sm'><span className='fw-semibold'>Created:</span> {formatDate(project.submission_date)}</p>
+              <p className='m-0 text-sm'><span className='fw-semibold'>Updated:</span> {formatDate(project.last_update_date)}</p>
+
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
   );
-}
+};
diff --git a/web/src/pages/Browse.tsx b/web/src/pages/Browse.tsx
@@ -13,70 +13,10 @@ import { useBiggestNamespace } from '../hooks/queries/useBiggestNamespace';
 import { useNamespaceProjects } from '../hooks/queries/useNamespaceProjects';
 import { LoadingSpinner } from '../components/spinners/loading-spinner';
 import { Markdown } from '../components/markdown/render';
-
-import 'bootstrap/dist/css/bootstrap.min.css'
-import "bootstrap/dist/js/bootstrap.bundle.min.js"
+import { ProjectAccordion } from '../components/browse/project-accordion'
 
 type View = 'namespaces' | 'schemas';
 
-const ProjectAccordion = ({ projects }) => {
-  const [openIndex, setOpenIndex] = useState(null);
-
-  // Filter out the 'length' property
-  const projectItems = Object.entries(projects).filter(([key]) => key !== 'length');
-
-  const formatDate = (dateString) => {
-    const date = new Date(dateString);
-    return date.toLocaleString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true
-    });
-  };
-
-  return (
-    <div className="accordion" id="projectAccordion">
-      {projectItems.map(([key, project], index) => (
-        <div className="accordion-item shadow-sm" key={key}>
-          <h2 className="accordion-header" id={`heading${key}`}>
-            <button
-              className={`accordion-button py-2 ${index !== 0 ? 'collapsed' : ''}`}
-              type="button"
-              data-bs-toggle="collapse"
-              data-bs-target={`#collapse${key}`}
-              aria-expanded={index === 0 ? 'true' : 'false'}
-              aria-controls={`collapse${key}`}
-            >
-              <span style={{minWidth: '2.5em'}}>{index + 1}.</span>
-              <span className='w-75'>{project.namespace}/<span className='fw-semibold'>{project.name}</span>:{project.tag}</span>
-              <span style={{marginLeft: '10em', minWidth: '4.5em'}} className='text-center text-sm border border-dark rounded-2 px-2 py-1'>{project.stars_number} Stars</span>
-            </button>
-          </h2>
-          <div
-            id={`collapse${key}`}
-            className={`accordion-collapse collapse ${index === 0 ? 'show' : ''}`}
-            aria-labelledby={`heading${key}`}
-            data-bs-parent="#projectAccordion"
-          >
-            <div className="accordion-body">
-
-              {project.description ? <Markdown>{project.description}</Markdown> : <p className='fst-italic'>No description</p>}
-              <p className='m-0 text-sm'><span className='fw-semibold'>Sample Count:</span> {project.number_of_samples}</p>
-              <p className='m-0 text-sm'><span className='fw-semibold'>Created:</span> {formatDate(project.submission_date)}</p>
-              <p className='m-0 text-sm'><span className='fw-semibold'>Updated:</span> {formatDate(project.last_update_date)}</p>
-
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-
 const NoSchemas = () => {
   return (
     <div