From 1ad1cc509eb7fcd9f0c9c0ec4bc23854512a0a97 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Sun, 4 Feb 2024 11:55:19 -0600 Subject: [PATCH] better mobile support, error handling --- .github/workflows/main.yml | 24 +++++++++++- app/listen/[collectionid]/page.tsx | 20 +++++++--- components/Navbar/MobileMenu.tsx | 54 +++++++++++++++++++++++++++ components/Navbar/index.tsx | 19 +--------- mgmt/index.ts | 0 server/controllers/base.controller.ts | 6 ++- server/db/createClient.ts | 13 +++++-- 7 files changed, 107 insertions(+), 29 deletions(-) create mode 100644 components/Navbar/MobileMenu.tsx create mode 100644 mgmt/index.ts diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 36c747d..ceddf2b 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -8,10 +8,23 @@ env: on: push: branches: - - master + # just kidding, these are like, not ready at all + - never + - gonna + - give + - you + - up + + # ... COPILOT JUST RICKROLLED ME + + + # - master + # # temporarily include dev branches + # - mongodb + # - music-streaming jobs: build: - runs-on: ubuntu-latest + runs-on: self-hosted steps: - name: checkout @@ -22,3 +35,10 @@ jobs: run: npm install - name: build check run: npm run build + + deploy: + runs-on: self-hosted + + steps: + - name: deploy service + run: "" diff --git a/app/listen/[collectionid]/page.tsx b/app/listen/[collectionid]/page.tsx index b7b4ceb..6b2e94b 100644 --- a/app/listen/[collectionid]/page.tsx +++ b/app/listen/[collectionid]/page.tsx @@ -2,18 +2,28 @@ import { AudioGallery } from "@/components/Music/AudioGallery"; import NotFound from "@/components/NotFound"; import MusicController from "@/server/controllers/music.controller"; import { S3Service } from "@/server/s3"; +import { TrackWithURL } from "@/server/s3/service"; import { Suspense } from "react"; export default async function ListenByCollectionID({ params }: { params: { collectionid?: string }}) { const { collectionid: id } = params; if (!id) return - const controller = new MusicController(); - const collection = await controller.getByID(id); - if (!collection) return + let collection: Awaited>; + let trackList: Awaited>; + let thumbnail: TrackWithURL | undefined; - const trackList = await S3Service.prepareTrackList(collection.pathtoentry); - const thumbnail = trackList.filter(t => t.Key.includes(".png") || t.Key.includes(".jpg") || t.Key.includes(".jpeg"))[0]; + try { + const controller = new MusicController(); + + collection = await controller.getByID(id); + if (!collection) return + + trackList = await S3Service.prepareTrackList(collection.pathtoentry); + thumbnail = trackList.filter(t => t.Key.includes(".png") || t.Key.includes(".jpg") || t.Key.includes(".jpeg"))[0]; + } catch { + return + } return (
diff --git a/components/Navbar/MobileMenu.tsx b/components/Navbar/MobileMenu.tsx new file mode 100644 index 0000000..b0c1474 --- /dev/null +++ b/components/Navbar/MobileMenu.tsx @@ -0,0 +1,54 @@ +'use client'; +import Link from "next/link"; +import { motion, useAnimate } from "framer-motion"; +import { useCallback, useEffect } from "react"; + +type MobileMenuProps = { + mobileMenuOpen: boolean, + setMobileMenuOpen: (arg0: boolean) => void +} + +export default function MobileMenu({ mobileMenuOpen, setMobileMenuOpen }: MobileMenuProps) { + // const [scope, animate] = useAnimate(); + + // const handleClickout = useCallback((e: MouseEvent) => { + // const target = e.target as HTMLElement; + // if (target.id !== 'mobile-sidebar') return; + + // setMobileMenuOpen(false); + // animate('-16px', '100%') + // }, [setMobileMenuOpen, animate]); + + // useEffect(() => { + // // handle clickout + // document.addEventListener('click', handleClickout) + // return () => document.removeEventListener('click', handleClickout); + // }) + + return ( + setMobileMenuOpen(false)} + className={`md:hidden w-1/3 fixed right-0 top-20 flex flex-col p-8 z-50 rounded-xl justify-end bg-[#131313] bg-opacity-90`}> + + setMobileMenuOpen(false)} passHref href="/" className="w-auto px-2"> +

Home

+ + + setMobileMenuOpen(false)} passHref href="/about" className="w-auto px-2"> +

About

+ + + setMobileMenuOpen(false)} passHref href="/projects" className="w-auto px-2"> +

Projects

+ + + setMobileMenuOpen(false)} passHref href="/contact" className="w-auto px-2"> +

Contact

+ + + + ) +} diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx index 9a587c1..5f724b7 100644 --- a/components/Navbar/index.tsx +++ b/components/Navbar/index.tsx @@ -6,6 +6,7 @@ import { RxActivityLog } from "react-icons/rx"; import { NavbarButton } from '../ui/Button'; import useAudio from '@/hooks/useAudio'; import AudioPlayer from '../Music/AudioPlayer/index'; +import MobileMenu from './MobileMenu'; const SHIFT_INTERVAL = 3000; @@ -52,24 +53,8 @@ export default function Navbar() {
-
setMobileMenuOpen(false)} className={`flex flex-col z-50 rounded-bl-lg justify-end md:hidden fixed top-24 w-[35vw] text-right place-self-end bg-[#131313] ${mobileMenuOpen ? 'translate-x-[65vw]' : 'translate-x-[100vw]'} transition-all duration-500`}> -
- setMobileMenuOpen(false)} passHref href="/" className="w-auto px-2"> -

Home

- - setMobileMenuOpen(false)} passHref href="/about" className="w-auto px-2"> -

About

- - - setMobileMenuOpen(false)} passHref href="/projects" className="w-auto px-2"> -

Projects

- - - setMobileMenuOpen(false)} passHref href="/contact" className="w-auto px-2"> -

Contact

- -
+ ) diff --git a/mgmt/index.ts b/mgmt/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/server/controllers/base.controller.ts b/server/controllers/base.controller.ts index cce08a3..289abac 100644 --- a/server/controllers/base.controller.ts +++ b/server/controllers/base.controller.ts @@ -11,7 +11,7 @@ type ControllerOptions = { } export default abstract class BaseController { - protected client: MongoClient + protected client: MongoClient | null; protected collectionName: string protected parse: FullParserType @@ -22,6 +22,7 @@ export default abstract class BaseController[]>; try { @@ -42,6 +43,7 @@ export default abstract class BaseController>> { + if (!this.client) return null; let result: Maybe>; try { @@ -58,6 +60,8 @@ export default abstract class BaseController>; this.parse(data); diff --git a/server/db/createClient.ts b/server/db/createClient.ts index b03cbd2..1923619 100644 --- a/server/db/createClient.ts +++ b/server/db/createClient.ts @@ -2,8 +2,13 @@ import { env } from "@/env.mjs"; import { MongoClient } from "mongodb"; export function createDBClient() { - return new MongoClient(env.MONGO_URL, { - tls: true, - tlsCertificateKeyFile: process.cwd() + "/certs/mongo_cert.pem", - }); + try { + return new MongoClient(env.MONGO_URL, { + tls: true, + tlsCertificateKeyFile: process.cwd() + "/certs/mongo_cert.pem", + }); + } catch (e) { + console.log(e); + return null; + } }