Project list page use shared components

studiorack · Sep 22, 2024 · e3fdffd · e3fdffd
1 parent a474d9a
commit e3fdffd
Show file tree

Hide file tree

Showing 11 changed files with 219 additions and 193 deletions.
diff --git a/renderer/components/card.tsx b/renderer/components/card.tsx
@@ -1,22 +1,25 @@
 import styles from '../styles/components/card.module.css';
 import Link from 'next/link';
 import { getBasePath } from '../lib/path';
-import { imageError } from '../lib/image';
 import { pluginFileUrl } from '@studiorack/core';
 
 type CardProps = {
   section: string;
-  plugin: any;
-  pluginIndex: number;
+  item: any;
+  index: number;
 };
 
-const Card = ({ section, plugin, pluginIndex }: CardProps) => (
-  <Link href={`/${section}/[userId]/[pluginId]`} as={`/${section}/${plugin.id}`} className={styles.cardLink}>
+const Card = ({ section, item, index }: CardProps) => (
+  <Link
+    href={`/${section}/[userId]/[${section === 'projects' ? 'projectId' : 'pluginId'}]`}
+    as={`/${section}/${item.id}`}
+    className={styles.cardLink}
+  >
     <div className={styles.card}>
       <div className={styles.cardDetails}>
         <div className={styles.cardHead}>
           <h4 className={styles.cardTitle}>
-            {plugin.name} <span className={styles.cardVersion}>v{plugin.version}</span>
+            {item.name} <span className={styles.cardVersion}>v{item.version}</span>
           </h4>
           <span className={styles.cardButton}>
             <img
@@ -29,22 +32,16 @@ const Card = ({ section, plugin, pluginIndex }: CardProps) => (
         </div>
         <ul className={styles.cardTags}>
           <img className={styles.cardIcon} src={`${getBasePath()}/images/icon-tag.svg`} alt="Tags" loading="lazy" />
-          {plugin.tags.map((tag: string, tagIndex: number) => (
-            <li className={styles.cardTag} key={`${tag}-${tagIndex}-${pluginIndex}`}>
+          {item.tags.map((tag: string, tagIndex: number) => (
+            <li className={styles.cardTag} key={`${tag}-${tagIndex}-${index}`}>
               {tag}
-              {tagIndex !== plugin.tags.length - 1 ? ',' : ''}
+              {tagIndex !== item.tags.length - 1 ? ',' : ''}
             </li>
           ))}
         </ul>
       </div>
-      {plugin.files.image ? (
-        <img
-          className={styles.cardImage}
-          src={pluginFileUrl(plugin, 'image')}
-          alt={plugin.name}
-          onError={imageError}
-          loading="lazy"
-        />
+      {item.files.image ? (
+        <img className={styles.cardImage} src={pluginFileUrl(item, 'image')} alt={item.name} loading="lazy" />
       ) : (
         ''
       )}

diff --git a/renderer/components/filters.tsx b/renderer/components/filters.tsx
@@ -10,7 +10,7 @@ type FiltersProps = {
 
 const Filters = ({ section }: FiltersProps) => {
   const router = useRouter();
-  const search: string = router.query['search'] as string;
+  const search: string = (router.query['search'] as string) || '';
 
   const onSearch = (event: ChangeEvent) => {
     const el: HTMLInputElement = event.target as HTMLInputElement;

diff --git a/renderer/components/list.tsx b/renderer/components/list.tsx
@@ -1,28 +1,38 @@
 import styles from '../styles/components/list.module.css';
-import { PluginVersion, PluginVersionLocal, ProjectVersion, ProjectVersionLocal } from '@studiorack/core';
+import {
+  PluginVersion,
+  PluginVersionLocal,
+  PluginTypes,
+  ProjectTypes,
+  ProjectVersion,
+  ProjectVersionLocal,
+} from '@studiorack/core';
 import Header from './header';
 import Card from './card';
 import Filters from './filters';
 import Crumb from './crumb';
+import Tabs from './tabs';
 
 type ListProps = {
   filters?: boolean;
-  plugins: PluginVersion[] | PluginVersionLocal[] | ProjectVersion[] | ProjectVersionLocal[];
+  items: ListItem[];
   type: string;
+  tabs?: PluginTypes | ProjectTypes;
   title: string;
 };
 
-const List = ({ filters = true, plugins, type, title }: ListProps) => (
+type ListItem = PluginVersion | PluginVersionLocal | ProjectVersion | ProjectVersionLocal;
+
+const List = ({ filters = true, items, type, tabs, title }: ListProps) => (
   <section className={styles.list}>
     <Crumb items={[type]}></Crumb>
-    <Header title={title} count={plugins.length} />
+    <Header title={title} count={items.length} />
     {filters ? <Filters section={type} /> : ''}
+    {tabs ? <Tabs items={tabs} /> : ''}
     <div className={styles.listGrid}>
-      {plugins.map(
-        (plugin: PluginVersion | PluginVersionLocal | ProjectVersion | ProjectVersionLocal, pluginIndex: number) => (
-          <Card section={type} plugin={plugin} pluginIndex={pluginIndex} key={`${plugin.id}-${pluginIndex}`}></Card>
-        ),
-      )}
+      {items.map((item: ListItem, index: number) => (
+        <Card section={type} item={item} index={index} key={`${item.id}-${index}`}></Card>
+      ))}
     </div>
   </section>
 );

diff --git a/renderer/components/tabs.tsx b/renderer/components/tabs.tsx
@@ -0,0 +1,71 @@
+import styles from '../styles/components/tabs.module.css';
+import { PluginType, PluginTypes, ProjectType, ProjectTypes } from '@studiorack/core';
+import { useRouter } from 'next/router';
+import { ChangeEvent } from 'react';
+
+type TabsProps = {
+  items: PluginTypes | ProjectTypes;
+};
+
+type TabsItem = PluginType | ProjectType;
+type TabsKey = keyof PluginTypes & keyof ProjectTypes;
+
+const Tabs = ({ items }: TabsProps) => {
+  const router = useRouter();
+  let category: string = (router.query['category'] as string) || 'all';
+  const search: string = (router.query['search'] as string) || '';
+
+  const isSelected = (path: string) => {
+    return category === path ? 'selected' : '';
+  };
+
+  const onSearch = (event: ChangeEvent) => {
+    const el: HTMLInputElement = event.target as HTMLInputElement;
+    router.query['search'] = el.value ? el.value.toLowerCase() : '';
+    router.push({
+      pathname: router.pathname,
+      query: router.query,
+    });
+  };
+
+  const selectCategory = (event: any) => {
+    category = (event.target as HTMLTextAreaElement).getAttribute('data-category') || '';
+    router.query['category'] = category || '';
+    router.push({
+      pathname: router.pathname,
+      query: router.query,
+    });
+  };
+
+  return (
+    <div className={styles.tabs}>
+      <ul className={styles.tabsCategory}>
+        <li>
+          <a data-category="all" onClick={selectCategory} className={isSelected('all')}>
+            All
+          </a>
+        </li>
+        {Object.keys(items).map((key: string, index: number) => (
+          <li key={`${key}-${index}`}>
+            <a data-category={key} onClick={selectCategory} className={isSelected(key)}>
+              {(items[key as TabsKey] as TabsItem).name}
+            </a>
+          </li>
+        ))}
+        <li>
+          <input
+            className={styles.tabsSearch}
+            placeholder="Keyword"
+            type="search"
+            id="search"
+            name="search"
+            value={search}
+            onChange={onSearch}
+          />
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Tabs;
diff --git a/renderer/lib/project.ts b/renderer/lib/project.ts
@@ -1,23 +1,19 @@
-import { ProjectTypes, ProjectVersionLocal } from '@studiorack/core';
+import { ProjectTypes, ProjectVersion } from '@studiorack/core';
+import { NextRouter } from 'next/router';
 
-export function filterProjects(
-  category: string,
-  projects: ProjectVersionLocal[],
-  projectTypes: ProjectTypes,
-  query: string,
-): ProjectVersionLocal[] {
-  console.log('filterProjects', category, projectTypes, query);
-  return projects.filter((project: ProjectVersionLocal) => {
+export function filterProjects(projectTypes: ProjectTypes, projects: ProjectVersion[], router: NextRouter) {
+  const category: string = (router.query['category'] as string) || 'all';
+  const search: string = router.query['search'] as string;
+  return projects.filter((project: ProjectVersion) => {
+    if (category !== 'all' && project.type?.ext !== projectTypes[category as keyof ProjectTypes]?.ext) return false;
     if (
-      (category === 'all' || project.type?.ext === projectTypes[category as keyof ProjectTypes]?.ext) &&
-      (project.author.toLowerCase().indexOf(query) !== -1 ||
-        project.id?.toLowerCase().indexOf(query) !== -1 ||
-        project.name.toLowerCase().indexOf(query) !== -1 ||
-        project.description.toLowerCase().indexOf(query) !== -1 ||
-        project.tags.includes(query))
-    ) {
-      return project;
-    }
-    return false;
+      search &&
+      project.id?.toLowerCase().indexOf(search.toLowerCase()) === -1 &&
+      project.name?.toLowerCase().indexOf(search.toLowerCase()) === -1 &&
+      project.description?.toLowerCase().indexOf(search.toLowerCase()) === -1 &&
+      project.tags?.indexOf(search.toLowerCase()) === -1
+    )
+      return false;
+    return project;
   });
 }
diff --git a/renderer/pages/effects/[userId]/index.tsx b/renderer/pages/effects/[userId]/index.tsx
@@ -34,7 +34,7 @@ class PluginList extends Component<
         <Head>
           <title>{pageTitle(['Effects', this.state.userId])}</title>
         </Head>
-        <List filters={false} plugins={this.state.pluginsFiltered} type="effects" title={this.state.userId} />
+        <List items={this.state.pluginsFiltered} type="effects" title={this.state.userId} filters={false} />
       </Layout>
     );
   }

diff --git a/renderer/pages/effects/index.tsx b/renderer/pages/effects/index.tsx
@@ -22,7 +22,7 @@ const Effects = ({ plugins }: EffectsProps) => {
       <Head>
         <title>{pageTitle(['Effects'])}</title>
       </Head>
-      <List plugins={pluginsFiltered} type="effects" title="Effects" />
+      <List items={pluginsFiltered} type="effects" title="Effects" />
     </Layout>
   );
 };

diff --git a/renderer/pages/instruments/[userId]/index.tsx b/renderer/pages/instruments/[userId]/index.tsx
@@ -34,7 +34,7 @@ class PluginList extends Component<
         <Head>
           <title>{pageTitle(['Instruments', this.state.userId])}</title>
         </Head>
-        <List filters={false} plugins={this.state.pluginsFiltered} type="instruments" title={this.state.userId} />
+        <List items={this.state.pluginsFiltered} type="instruments" title={this.state.userId} filters={false} />
       </Layout>
     );
   }

diff --git a/renderer/pages/instruments/index.tsx b/renderer/pages/instruments/index.tsx
@@ -22,7 +22,7 @@ const Instruments = ({ plugins }: InstrumentsProps) => {
       <Head>
         <title>{pageTitle(['Instruments'])}</title>
       </Head>
-      <List plugins={pluginsFiltered} type="instruments" title="Instruments" />
+      <List items={pluginsFiltered} type="instruments" title="Instruments" />
     </Layout>
   );
 };