add prettier lint rule
This commit is contained in:
Brandon Egger
@ -1,35 +1,35 @@
|
||||
import { type InferGetStaticPropsType, type GetStaticPropsContext } from "next";
|
||||
import { GlobeAltIcon, DocumentIcon } from '@heroicons/react/24/solid';
|
||||
import { createProxySSGHelpers } from '@trpc/react-query/ssg';
|
||||
import { GlobeAltIcon, DocumentIcon } from "@heroicons/react/24/solid";
|
||||
import { createProxySSGHelpers } from "@trpc/react-query/ssg";
|
||||
import { appRouter } from "~/server/api/root";
|
||||
import { prisma } from "~/server/db";
|
||||
import { api } from "~/utils/api";
|
||||
import { ResourceDescription, ResourceInfo } from "~/components/ResourceTable";
|
||||
import { type PlatformLink } from "@prisma/client";
|
||||
import Image from 'next/image';
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import Footer from "~/components/Footer";
|
||||
import Header from "~/components/Header";
|
||||
|
||||
export const getStaticPaths = async () => {
|
||||
const resources = (await prisma.auditoryResource.findMany({
|
||||
const resources = await prisma.auditoryResource.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
}
|
||||
}));
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
paths: resources.map((resource) => ({
|
||||
params: {
|
||||
id: resource.id,
|
||||
}
|
||||
},
|
||||
})),
|
||||
fallback: 'blocking',
|
||||
}
|
||||
fallback: "blocking",
|
||||
};
|
||||
};
|
||||
|
||||
export async function getStaticProps(
|
||||
context: GetStaticPropsContext<{ id: string }>,
|
||||
context: GetStaticPropsContext<{ id: string }>
|
||||
) {
|
||||
const ssg = createProxySSGHelpers({
|
||||
router: appRouter,
|
||||
@ -40,7 +40,7 @@ export async function getStaticProps(
|
||||
});
|
||||
const id = context.params?.id as string;
|
||||
|
||||
await ssg.auditoryResource.byId.prefetch({id});
|
||||
await ssg.auditoryResource.byId.prefetch({ id });
|
||||
|
||||
return {
|
||||
props: {
|
||||
@ -51,97 +51,120 @@ export async function getStaticProps(
|
||||
};
|
||||
}
|
||||
|
||||
const PlatformLinkButton = ({platformLink}: {platformLink: PlatformLink}) => {
|
||||
const PlatformLinkButton = ({
|
||||
platformLink,
|
||||
}: {
|
||||
platformLink: PlatformLink;
|
||||
}) => {
|
||||
const Inner = () => {
|
||||
switch (platformLink.platform) {
|
||||
case "APP_ANDROID": {
|
||||
return (
|
||||
<Image className="w-full" src={`/google-play-badge.png`} alt={`Download on the Apple AppStore`} width={512} height={216}/>
|
||||
)
|
||||
<Image
|
||||
className="w-full"
|
||||
src={`/google-play-badge.png`}
|
||||
alt={`Download on the Apple AppStore`}
|
||||
width={512}
|
||||
height={216}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case "APP_IOS": {
|
||||
return (
|
||||
<Image className="w-full" src={`/app-store-badge.png`} alt={`Download on the Apple AppStore`} width={512} height={216}/>
|
||||
)
|
||||
<Image
|
||||
className="w-full"
|
||||
src={`/app-store-badge.png`}
|
||||
alt={`Download on the Apple AppStore`}
|
||||
width={512}
|
||||
height={216}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case "PDF": {
|
||||
return (
|
||||
<div className="hover:bg-amber-200 bg-amber-300 border-2 px-2 h-16 align-middle border-neutral-900 rounded-lg flex flex-row space-x-2">
|
||||
<div className="flex h-16 flex-row space-x-2 rounded-lg border-2 border-neutral-900 bg-amber-300 px-2 align-middle hover:bg-amber-200">
|
||||
<DocumentIcon className="w-6" />
|
||||
<span className="font-bold text-sm my-auto">
|
||||
Document
|
||||
</span>
|
||||
<span className="my-auto text-sm font-bold">Document</span>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
case "WEBSITE": {
|
||||
return (
|
||||
<div className="hover:bg-amber-200 bg-amber-300 border-2 px-2 h-14 align-middle border-neutral-900 rounded-lg flex flex-row space-x-2">
|
||||
<div className="flex h-14 flex-row space-x-2 rounded-lg border-2 border-neutral-900 bg-amber-300 px-2 align-middle hover:bg-amber-200">
|
||||
<GlobeAltIcon className="w-6" />
|
||||
<span className="font-bold text-sm my-auto">
|
||||
Website
|
||||
</span>
|
||||
<span className="my-auto text-sm font-bold">Website</span>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Link href={platformLink.link} target="_blank" rel="noopener noreferrer">
|
||||
<Inner />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const DownloadButtons = ({platformLinks}: {platformLinks: PlatformLink[]}) => {
|
||||
const DownloadButtons = ({
|
||||
platformLinks,
|
||||
}: {
|
||||
platformLinks: PlatformLink[];
|
||||
}) => {
|
||||
const buttons = platformLinks.map((paltformLink, index) => {
|
||||
return (
|
||||
<PlatformLinkButton key={index} platformLink={paltformLink} />
|
||||
)
|
||||
return <PlatformLinkButton key={index} platformLink={paltformLink} />;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="w-48 mx-auto flex flex-col space-y-2">
|
||||
{buttons}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ResourceViewPage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
|
||||
return <div className="mx-auto flex w-48 flex-col space-y-2">{buttons}</div>;
|
||||
};
|
||||
|
||||
const ResourceViewPage = (
|
||||
props: InferGetStaticPropsType<typeof getStaticProps>
|
||||
) => {
|
||||
const { id } = props;
|
||||
const resourceQuery = api.auditoryResource.byId.useQuery({ id });
|
||||
|
||||
if (!resourceQuery.data) {
|
||||
return <>
|
||||
</>
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return <>
|
||||
<div className="min-h-screen">
|
||||
<Header />
|
||||
<main className="mb-12">
|
||||
<div className="flex py-4 flex-col flex-col-reverse sm:flex-row divide-x max-w-2xl mx-auto">
|
||||
<div className="text-lg flex flex-col justify-end font-bold my-5 mr-4">
|
||||
<div className="mx-4">
|
||||
<h1 className="border-b mb-2 border-neutral-400">Links</h1>
|
||||
<DownloadButtons platformLinks={resourceQuery.data.platform_links} />
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen">
|
||||
<Header />
|
||||
<main className="mb-12">
|
||||
<div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
|
||||
<div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
|
||||
<div className="mx-4">
|
||||
<h1 className="mb-2 border-b border-neutral-400">Links</h1>
|
||||
<DownloadButtons
|
||||
platformLinks={resourceQuery.data.platform_links}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="justify-left flex flex-col pb-5">
|
||||
<ResourceInfo resource={resourceQuery.data} />
|
||||
<div className="mx-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
|
||||
<ResourceDescription
|
||||
manufacturer={resourceQuery.data.manufacturer}
|
||||
description={resourceQuery.data.description}
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-4 mt-4 mr-auto rounded-lg border-2 border-neutral-900 bg-neutral-600">
|
||||
<span className="px-2 py-2 text-sm text-neutral-200">
|
||||
Ages {resourceQuery.data.ages.min}
|
||||
{resourceQuery.data.ages.max >= 100
|
||||
? "+"
|
||||
: `-${resourceQuery.data.ages.max}`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex pb-5 flex-col justify-left">
|
||||
<ResourceInfo resource={resourceQuery.data} />
|
||||
<div className="mx-4 text-left border border-neutral-400 rounded-xl overflow-hidden bg-neutral-200 shadow">
|
||||
<ResourceDescription manufacturer={resourceQuery.data.manufacturer} description={resourceQuery.data.description} />
|
||||
</div>
|
||||
<div className="ml-4 mt-4 mr-auto border-2 border-neutral-900 rounded-lg bg-neutral-600">
|
||||
<span className="text-neutral-200 text-sm px-2 py-2">Ages {resourceQuery.data.ages.min}{resourceQuery.data.ages.max >= 100 ? "+" : `-${resourceQuery.data.ages.max}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer/>
|
||||
</div>
|
||||
</>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResourceViewPage
|
||||
export default ResourceViewPage;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { LinkIcon } from '@heroicons/react/20/solid';
|
||||
import { LinkIcon } from "@heroicons/react/20/solid";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import ResourceTable from "~/components/ResourceTable";
|
||||
@ -8,22 +8,22 @@ import Footer from "~/components/Footer";
|
||||
import Header from "~/components/Header";
|
||||
|
||||
const Resources = () => {
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
|
||||
const queryData = parseQueryData(router.query);
|
||||
const currentPage = queryData.page;
|
||||
|
||||
const resourceQuery = api.auditoryResource.search.useQuery({
|
||||
skip: (queryData.page - 1) * queryData.perPage,
|
||||
take: queryData.perPage,
|
||||
ages: queryData.age,
|
||||
platforms: queryData.platforms,
|
||||
skill_levels: queryData.skill_levels,
|
||||
skills: queryData.skills,
|
||||
skip: (queryData.page - 1) * queryData.perPage,
|
||||
take: queryData.perPage,
|
||||
ages: queryData.age,
|
||||
platforms: queryData.platforms,
|
||||
skill_levels: queryData.skill_levels,
|
||||
skills: queryData.skills,
|
||||
});
|
||||
|
||||
|
||||
if (!resourceQuery.data) {
|
||||
return <></>
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);
|
||||
@ -31,24 +31,35 @@ const Resources = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main className="my-6 md:px-4 max-w-6xl mx-auto">
|
||||
<div className="sm:mb-4 mb-2 sm:p-4 p-2 space-y-2">
|
||||
<main className="my-6 mx-auto max-w-6xl md:px-4">
|
||||
<div className="mb-2 space-y-2 p-2 sm:mb-4 sm:p-4">
|
||||
<h1 className="text-3xl font-bold">All Resources</h1>
|
||||
<div className="">
|
||||
<p className="inline">Fill out the </p>
|
||||
<Link href="/resources/search"
|
||||
className="hover:bg-neutral-900 hover:text-white inline rounded-lg bg-neutral-200 border border-neutral-800 px-2 py-[4px]">
|
||||
<Link
|
||||
href="/resources/search"
|
||||
className="inline rounded-lg border border-neutral-800 bg-neutral-200 px-2 py-[4px] hover:bg-neutral-900 hover:text-white"
|
||||
>
|
||||
search form
|
||||
<LinkIcon className="w-4 inline" />
|
||||
<LinkIcon className="inline w-4" />
|
||||
</Link>
|
||||
<p className="inline"> for a list of auditory training resource recommendations.</p>
|
||||
<p className="inline">
|
||||
{" "}
|
||||
for a list of auditory training resource recommendations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ResourceTable resourcesPerPage={queryData.perPage} resources={resourceQuery.data.resources} totalPages={totalPages} query={router.query} currentPage={currentPage} />
|
||||
<ResourceTable
|
||||
resourcesPerPage={queryData.perPage}
|
||||
resources={resourceQuery.data.resources}
|
||||
totalPages={totalPages}
|
||||
query={router.query}
|
||||
currentPage={currentPage}
|
||||
/>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Resources;
|
||||
export default Resources;
|
||||
|
||||
@ -1,121 +1,127 @@
|
||||
import Footer from "~/components/Footer";
|
||||
import Header from "~/components/Header";
|
||||
import { GuidedSearch, type Question, type QuestionTypes } from "~/components/Search";
|
||||
import {
|
||||
GuidedSearch,
|
||||
type Question,
|
||||
type QuestionTypes,
|
||||
} from "~/components/Search";
|
||||
|
||||
const questions: Question<QuestionTypes>[] = [
|
||||
{
|
||||
for: "ages",
|
||||
header: "Age of Patient",
|
||||
question: "How old is the patient?",
|
||||
maxSelect: 1,
|
||||
optional: true,
|
||||
options: [
|
||||
{
|
||||
label: "Child (0-10)",
|
||||
value: "0-9",
|
||||
},
|
||||
{
|
||||
label: "Teen (10-20)",
|
||||
value: "10-20",
|
||||
},
|
||||
{
|
||||
label: "Adult (21+)",
|
||||
value: "21-100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
for: "platforms",
|
||||
header: "Desired Platforms",
|
||||
question: "What platform(s) does the resource need to be on?",
|
||||
optional: true,
|
||||
options: [
|
||||
{
|
||||
label: "Apple (iOS)",
|
||||
value: "APP_IOS",
|
||||
},
|
||||
{
|
||||
label: "Android",
|
||||
value: "APP_ANDROID",
|
||||
},
|
||||
{
|
||||
label: "Web-Based",
|
||||
value: "WEBSITE",
|
||||
},
|
||||
{
|
||||
label: "PDF (printable)",
|
||||
value: "PDF",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
for: "skills",
|
||||
header: "Skills Practiced",
|
||||
question: "What skill(s) would you like the resource to cover?",
|
||||
optional: true,
|
||||
options: [
|
||||
{
|
||||
label: "Phonemes",
|
||||
value: "PHONEMES",
|
||||
},
|
||||
{
|
||||
label: "Words",
|
||||
value: "WORDS",
|
||||
},
|
||||
{
|
||||
label: "Sentence",
|
||||
value: "SENTENCES",
|
||||
},
|
||||
{
|
||||
label: "Discourse/Complex",
|
||||
value: "DISCOURSE",
|
||||
},
|
||||
{
|
||||
label: "Music",
|
||||
value: "MUSIC",
|
||||
},
|
||||
{
|
||||
label: "Environmental Sounds",
|
||||
value: "ENVIRONMENT",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
for: "skill_levels",
|
||||
header: "Skill Level",
|
||||
question: "What skill level(s) should the resource have?",
|
||||
optional: true,
|
||||
options: [
|
||||
{
|
||||
label: "Beginner",
|
||||
value: "BEGINNER",
|
||||
},
|
||||
{
|
||||
label: "Intermediate",
|
||||
value: "INTERMEDIATE",
|
||||
},
|
||||
{
|
||||
label: "Advanced",
|
||||
value: "ADVANCED",
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
{
|
||||
for: "ages",
|
||||
header: "Age of Patient",
|
||||
question: "How old is the patient?",
|
||||
maxSelect: 1,
|
||||
optional: true,
|
||||
options: [
|
||||
{
|
||||
label: "Child (0-10)",
|
||||
value: "0-9",
|
||||
},
|
||||
{
|
||||
label: "Teen (10-20)",
|
||||
value: "10-20",
|
||||
},
|
||||
{
|
||||
label: "Adult (21+)",
|
||||
value: "21-100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
for: "platforms",
|
||||
header: "Desired Platforms",
|
||||
question: "What platform(s) does the resource need to be on?",
|
||||
optional: true,
|
||||
options: [
|
||||
{
|
||||
label: "Apple (iOS)",
|
||||
value: "APP_IOS",
|
||||
},
|
||||
{
|
||||
label: "Android",
|
||||
value: "APP_ANDROID",
|
||||
},
|
||||
{
|
||||
label: "Web-Based",
|
||||
value: "WEBSITE",
|
||||
},
|
||||
{
|
||||
label: "PDF (printable)",
|
||||
value: "PDF",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
for: "skills",
|
||||
header: "Skills Practiced",
|
||||
question: "What skill(s) would you like the resource to cover?",
|
||||
optional: true,
|
||||
options: [
|
||||
{
|
||||
label: "Phonemes",
|
||||
value: "PHONEMES",
|
||||
},
|
||||
{
|
||||
label: "Words",
|
||||
value: "WORDS",
|
||||
},
|
||||
{
|
||||
label: "Sentence",
|
||||
value: "SENTENCES",
|
||||
},
|
||||
{
|
||||
label: "Discourse/Complex",
|
||||
value: "DISCOURSE",
|
||||
},
|
||||
{
|
||||
label: "Music",
|
||||
value: "MUSIC",
|
||||
},
|
||||
{
|
||||
label: "Environmental Sounds",
|
||||
value: "ENVIRONMENT",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
for: "skill_levels",
|
||||
header: "Skill Level",
|
||||
question: "What skill level(s) should the resource have?",
|
||||
optional: true,
|
||||
options: [
|
||||
{
|
||||
label: "Beginner",
|
||||
value: "BEGINNER",
|
||||
},
|
||||
{
|
||||
label: "Intermediate",
|
||||
value: "INTERMEDIATE",
|
||||
},
|
||||
{
|
||||
label: "Advanced",
|
||||
value: "ADVANCED",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const SearchPage = () => {
|
||||
return <>
|
||||
<div className="max-h-screen overflow-y-scroll snap snap-y snap-mandatory">
|
||||
<div className="snap-start snap-always">
|
||||
<Header />
|
||||
</div>
|
||||
<div className="snap-center snap-always w-full max-w-xl mx-auto mt-4 mb-4 rounded-xl overflow-hidden border border-neutral-400 bg-neutral-200 drop-shadow-md">
|
||||
<GuidedSearch questions={questions} />
|
||||
</div>
|
||||
<div className="snap-end snap-always">
|
||||
<Footer />
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<div className="snap max-h-screen snap-y snap-mandatory overflow-y-scroll">
|
||||
<div className="snap-start snap-always">
|
||||
<Header />
|
||||
</div>
|
||||
<div className="mx-auto mt-4 mb-4 w-full max-w-xl snap-center snap-always overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 drop-shadow-md">
|
||||
<GuidedSearch questions={questions} />
|
||||
</div>
|
||||
<div className="snap-end snap-always">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchPage
|
||||
export default SearchPage;
|
||||
|
||||
Reference in New Issue
Block a user