Convert to a Next + Redux app

.github/workflows/deploy.yml

@@ -19,10 +19,10 @@ jobs:
 
     env:
       CI: false
-      REACT_APP_AWS_USER_POOL_ID: ${{ secrets.AWS_USER_POOL_ID }}
-      REACT_APP_AWS_REGION: ${{ secrets.AWS_REGION }}
-      REACT_APP_AWS_CLIENT_ID: ${{ secrets.AWS_CLIENT_ID }}
-      REACT_APP_AWS_IDENTITY_POOL_ID: ${{ secrets.AWS_IDENTITY_POOL_ID }}
-      REACT_APP_LAST_FM_KEY: ${{ secrets.LAST_FM_KEY }}
-      REACT_APP_DISCOGS_CONSUMER_KEY: ${{ secrets.DISCOGS_CONSUMER_KEY }}
-      REACT_APP_DISCOGS_CONSUMER_SECRET: ${{ secrets.DISCOGS_CONSUMER_SECRET }}
+      NEXT_PUBLIC_AWS_USER_POOL_ID: ${{ secrets.AWS_USER_POOL_ID }}
+      NEXT_PUBLIC_AWS_REGION: ${{ secrets.AWS_REGION }}
+      NEXT_PUBLIC_AWS_CLIENT_ID: ${{ secrets.AWS_CLIENT_ID }}
+      NEXT_PUBLIC_AWS_IDENTITY_POOL_ID: ${{ secrets.AWS_IDENTITY_POOL_ID }}
+      NEXT_PUBLIC_LAST_FM_KEY: ${{ secrets.LAST_FM_KEY }}
+      NEXT_PUBLIC_DISCOGS_CONSUMER_KEY: ${{ secrets.DISCOGS_CONSUMER_KEY }}
+      NEXT_PUBLIC_DISCOGS_CONSUMER_SECRET: ${{ secrets.DISCOGS_CONSUMER_SECRET }}

.gitignore

@@ -4,30 +4,33 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
-/dist
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# Environment Variables
-.env
-.env.build
+# local env files
+.env*.local
+
+# vercel
 .vercel
 
-# Docker local
-docker-compose.yml
-```
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -2,7 +2,6 @@
 
 [See the site in action here!](https://wxyc.github.io/dj-site/)
 
-![Simplified Map of WXYC Card Catalog Frontend](https://dj.wxyc.org/img/FrontendMap.png)
 
 ## Description
 The WXYC Card Catalog, Revised is a React-based revision of the original WXYC card catalog and flowsheet. This repository showcases an improved version of the existing catalog and flowsheet, while maintaining the classic theme and preserving the original look. Notably, the revised version is optimized for performance, resulting in faster loading times.
@@ -14,7 +13,7 @@ The WXYC Card Catalog, Revised is a React-based revision of the original WXYC ca
 - Mail Bin: a digital mail bin is available on every account, so DJs can add to the flowsheet directly from their bin without having to type during their sets.
 
 ## Deployment
-The application is deployed using github pages. In order to deploy to the gh-pages branch, run `npm run deploy`. If you wish to add a commit message to the branch, use `npm run deploy -- -m "YOUR_MESSAGE_HERE"`.
+TBD...
 
 ## API Integration
 The revised catalog leverages services defined in `api-service.js`, which utilizes the popular Axios library to communicate with an AWS API Gateway. This integration allows seamless communication between the front-end application and the API endpoints, enabling data retrieval and manipulation.
@@ -29,7 +28,7 @@ The revised catalog leverages services defined in `api-service.js`, which utiliz
 1. Clone the repository: `git clone https://github.com/WXYC/dj-site.git`
 2. Navigate to the project directory: `cd dj-site`
 3. Install dependencies: `npm install`
-4. Run the application: `npm start`
+4. Run the application: `npm run dev`
 5. Access the application locally: Open your web browser and visit `http://localhost:3000`
 
 ## Contributing
@@ -45,4 +44,4 @@ Contributions to the WXYC Card Catalog, Revised are welcome! If you would like t
 The WXYC Card Catalog, Revised is released under the [MIT License](LICENSE). Feel free to use, modify, and distribute the code as per the terms of this license.
 
 ## Acknowledgments
-We would like to express our gratitude to the contributors and maintainers of the original WXYC Card Catalog for their valuable work, which served as the foundation for this revised version. In particular, Tim Ross/Tubafrenzy, who developed the original flowsheet site and maintained the database for years during decades when it was much more difficult to maintain and develop a site like this one.
+We would like to express our gratitude to the contributors and maintainers of the original WXYC Card Catalog for their valuable work, which served as the foundation for this revised version. In particular, Tim Ross/Tubafrenzy, who developed the original flowsheet site and maintained the database for years during decades when it was much more difficult to maintain and develop a site like this one.

app/api/identity-count/route.ts

@@ -0,0 +1,13 @@
+/* Core */
+import { useDispatch, verifySession } from "@/lib/redux";
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request, res: Response) {
+  const body = await req.json();
+  const { amount = 1 } = body;
+
+  // simulate IO latency
+  await new Promise((r) => setTimeout(r, 500));
+
+  return NextResponse.json({ data: amount });
+}

app/classic/artist/page.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+const ClassicArtistPage = () => {
+    return (
+        <div id="searchResultsPanel">
+
+	<table cellPadding="10" cellSpacing="1" border={0} style = {{ width: "100%" }}><tbody><tr><td>
+      </td></tr><tr className="artistCardHeader" style = {{ background: "#CCCCCC" }}>
+	    <th style = {{ width: "20%" }} className="label">
+          <b>Rock&nbsp;ME 156</b>
+	    </th>
+        <th style = {{ width: "60%" }} align="center" className="label"><b>Melkbelly</b></th>
+        <th style = {{ width: "20%" }} align="right" className="label"><b># of releases: 1</b></th>
+      </tr>
+    </tbody></table>
+
+
+    <table align="center" cellPadding="10" cellSpacing="1" border={0} style = {{ width: "100%" }}>
+      <tbody><tr className="searchResultsHeader" style = {{ background: "#CCCCCC" }}>
+        <th align="left" style = {{ width: "15%" }} className="label sortFieldHighlight" id="libcodeHeader">Library Code</th>
+        <th align="left" style = {{ width: "28%" }} className="label">Artist</th>
+        <th align="left" style = {{ width: "35%" }} className="label" id="titleHeader">Title of Release</th>
+        <th align="left" style = {{ width: "15%" }} className="label" id="formatHeader">Format</th>
+        <th align="center" style = {{ width: "7%" }} className="label">Comment(s)</th> 
+      </tr>
+
+        <tr style = {{ background: "#F3F3F3" }}>
+          <td className="text">Rock
+            ME 156/
+            1
+          </td>
+          <td className="text">Melkbelly</td>
+          <td className="text">Pith</td>
+          <td className="text">cd</td>
+          <td align="center" className="text">
+    	  <a href="comment?objectType=release&amp;ID=68894">
+
+    	  <img src="/img/commentIcon.jpg" title="Make a comment about this release" />
+
+    	  </a></td>
+        </tr>	
+
+    </tbody></table>
+</div>
+    );
+}
+
+export default ClassicArtistPage;