Added Creators page

lcdborg · Nov 1, 2022 · 829d4c2 · 829d4c2
1 parent ff149a0
commit 829d4c2
Show file tree

Hide file tree

Showing 12 changed files with 317 additions and 121 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_GRAPHQL_URL=https://graphql.lcdb.org/graphql
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v19.0.0
diff --git a/src/layouts/components/UpgradeToProButton.tsx b/src/layouts/components/UpgradeToProButton.tsx
diff --git a/src/navigation/vertical/index.ts b/src/navigation/vertical/index.ts
@@ -28,7 +28,15 @@ const navigation = (): VerticalNavItemsType => {
       title: 'Source Artist Groups',
       icon: AccountOutline,
       path: '/source-artist-groups'
-    }
+    },
+    {
+      sectionTitle: 'Live Music Archive'
+    },
+    {
+      title: 'Creators',
+      icon: AccountOutline,
+      path: '/creators'
+    },
   ]
 }
 

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -22,8 +22,8 @@ class CustomDocument extends Document {
             rel='stylesheet'
             href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'
           />
-          <link rel='apple-touch-icon' sizes='180x180' href='/images/apple-touch-icon.png' />
-          <link rel='shortcut icon' href='/images/favicon.png' />
+          <link rel='apple-touch-icon' sizes='180x180' href='/images/logo.svg' />
+          <link rel='shortcut icon' href='/images/logo.svg' />
         </Head>
         <body>
           <Main />

diff --git a/src/pages/creators.tsx b/src/pages/creators.tsx
@@ -0,0 +1,190 @@
+import Head from 'next/head'
+import Link from 'next/link';
+import React from 'react';
+import { graphql } from '../utils/graphql';
+import { alphabet } from '../utils/pagination';
+import { PaginationControls} from '../utils/pagination';
+import { Buffer } from 'node:buffer';
+import { Card, CardContent, Grid, Typography } from '@mui/material';
+import ListTable from 'src/views/creator/list-table';
+import FromTo from 'src/views/creator/from-to';
+import { useRouter } from 'next/router';
+
+export async function getServerSideProps(context: any) {
+  const standardQuery = `
+    query CreatorList($chr: String = "a", $after: String = "LTE=") {
+      creators (filter: { nameUnprefix_sort: "ASC", name_startswith: $chr, _after: $after }) {
+        totalCount
+        pageInfo {
+          hasPreviousPage
+          hasNextPage
+        }
+        edges {
+          cursor
+          node {
+            id
+            name
+          }
+        }
+      }
+    }
+  `;
+
+  const otherQuery = `
+  query CreatorListOther($after: String = "LTE=") {
+    creators (filter: { nameUnprefix_sort: "ASC", _after: $after }) {
+      totalCount
+      pageInfo {
+        hasPreviousPage
+        hasNextPage
+      }
+      edges {
+        cursor
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+  `;
+
+  const filterQuery = `
+    query CreatorList($filter: String = "a", $after: String = "LTE=") {
+      creators (filter: { nameUnprefix_sort: "ASC", name_contains: $filter, _after: $after }) {
+        totalCount
+        pageInfo {
+          hasPreviousPage
+          hasNextPage
+        }
+        edges {
+          cursor
+          node {
+            id
+            name
+          }
+        }
+      }
+    }
+  `;
+
+  let query = standardQuery;
+  let operationName = '';
+  const chr = context.query.chr || 'a';
+  const page = context.query.page ? Number(context.query.page) : 1;
+  const filter = context.query.filter || '';
+
+  switch (chr) {
+    case 'other':
+      query = otherQuery;
+      operationName = 'CreatorListOther';
+      break;
+    default:
+      break;
+  }
+
+  const variables = {
+    chr: context.query.chr ? context.query.chr : 'a',
+    filter,
+    after: Buffer.from(String((page - 1) * 300 - 1)).toString('base64')
+  };
+
+  if (filter) {
+    query = filterQuery;
+  }
+
+  return {props: {
+    graphql: await graphql(query, variables, operationName),
+    page: page,
+    chr: chr,
+    filter: filter
+  }}
+}
+
+
+function Creators(props: any) {
+  const router = useRouter();
+
+  const applyFilter = async (event: any) => {
+    if (event.keyCode !== 13) {
+      return;
+    }
+
+    // Stop the form from submitting and refreshing the page.
+    event.preventDefault()
+    const query = new URLSearchParams();
+    query.set('filter', event.target.value);
+
+    router.push('/creators?' + query.toString());
+  }
+
+  return (
+    <>
+      <Head>
+        <title>LCDB: Creators</title>
+      </Head>
+
+      <Grid container spacing={6}>
+        <Grid item xs={12} md={12}>
+          <Card sx={{ position: 'relative' }}>
+            <CardContent>
+              <Typography gutterBottom variant="h5" component="div">
+                Creators
+              </Typography>
+
+              <div>
+                {alphabet(true).map((chr, key) => (
+                  <Link
+                    href={{
+                      pathname: 'creators',
+                      query: {chr}
+                    }}
+                    key={key}
+                  ><a className="alphabet">{chr}</a></Link>
+                ))}
+
+                <Link
+                  href={{
+                    pathname: 'creators',
+                    query: {chr: 'other'}
+                  }}
+                ><a className="alphabet">other</a></Link>
+
+                <br />
+
+              <span className="alphabet-link">
+                Filter&nbsp;
+                <input
+                  type="text"
+                  style={{ width: "15em" }}
+                  onKeyDown={applyFilter}
+                  defaultValue={props.filter}
+                />
+              </span>
+
+
+              <br />
+
+              <PaginationControls
+                graphql={props.graphql.data.creators}
+                page={props.page}
+                pathname='/creators'
+                baseQuery={{chr: props.chr}}>
+              </PaginationControls>
+
+              <FromTo graphql={props.graphql} pathname="/creator/"/>
+            </div>
+
+            <hr />
+
+            <ListTable graphql={props.graphql} pathname="/creator/"/>
+
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+    </>
+  );
+}
+
+export default Creators
diff --git a/src/utils/graphql.ts b/src/utils/graphql.ts
@@ -6,8 +6,9 @@ export function graphql(
   variables: any = {},
   operationName = ''
 ) {
+
   return firstValueFrom(
-    fromFetch('https://graphql.lcdb.org/graphql', {
+    fromFetch(String(process.env.NEXT_PUBLIC_GRAPHQL_URL), {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -29,7 +30,7 @@ export function graphql(
       }),
       catchError(err => {
         // Network or other error, handle appropriately
-        console.error(err);
+        console.log(err);
 
         return of({ error: true, message: err.message })
       })

diff --git a/src/views/artist/artist-link.tsx b/src/views/artist/artist-link.tsx
@@ -1,9 +1,7 @@
 import Link from "next/link";
 
-export default function ArtistLink(props: any) {
-  const artist = props.artist;
-
-  const pathname = '/artist/' + props.artist.id;
+export default function CreatorLink(props: any) {
+  const pathname = '/creator/' + props.creator.id;
   let query = {};
 
   if (props.year) {
@@ -14,7 +12,7 @@ export default function ArtistLink(props: any) {
     <Link
       href={{pathname, query}}
     >
-      {artist.name}
+      {props.creator.name}
     </Link>
   );
 }
diff --git a/src/views/creator/creator-link.tsx b/src/views/creator/creator-link.tsx
@@ -0,0 +1,20 @@
+import Link from "next/link";
+
+export default function ArtistLink(props: any) {
+  const artist = props.artist;
+
+  const pathname = '/artist/' + props.artist.id;
+  let query = {};
+
+  if (props.year) {
+    query = {year: props.year};
+  }
+
+  return (
+    <Link
+      href={{pathname, query}}
+    >
+      {artist.name}
+    </Link>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		NEXT_PUBLIC_GRAPHQL_URL=https://graphql.lcdb.org/graphql