From 192c594d4f9f3831afbf767933faf8730d6bcb90 Mon Sep 17 00:00:00 2001 From: Brandon Egger Date: Tue, 18 Apr 2023 23:57:57 -0500 Subject: [PATCH] add prettier lint rule --- .eslintrc.cjs | 4 +- package-lock.json | 84 +++ package.json | 3 + src/components/Footer.tsx | 267 ++++---- src/components/Header.tsx | 208 ++++--- src/components/ResourceTable.tsx | 639 +++++++++++--------- src/components/Search.tsx | 563 ++++++++++------- src/env.mjs | 6 +- src/middleware.ts | 4 +- src/pages/_app.tsx | 5 +- src/pages/about.tsx | 211 ++++--- src/pages/api/trpc/[trpc].ts | 2 +- src/pages/contact.tsx | 15 +- src/pages/index.tsx | 171 ++++-- src/pages/resources/[id].tsx | 157 +++-- src/pages/resources/index.tsx | 49 +- src/pages/resources/search.tsx | 230 +++---- src/server/api/routers/auditoryResources.ts | 61 +- src/utils/enumWordLut.ts | 76 +-- src/utils/parseSearchForm.ts | 111 ++-- 20 files changed, 1684 insertions(+), 1182 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 10756b8..c3ed186 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -4,6 +4,7 @@ const config = { { extends: [ "plugin:@typescript-eslint/recommended-requiring-type-checking", + "prettier", ], files: ["*.ts", "*.tsx"], parserOptions: { @@ -15,9 +16,10 @@ const config = { parserOptions: { project: "./tsconfig.json", }, - plugins: ["@typescript-eslint"], + plugins: ["@typescript-eslint", "prettier"], extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"], rules: { + "prettier/prettier": ["error"], "@typescript-eslint/consistent-type-imports": [ "warn", { diff --git a/package-lock.json b/package-lock.json index a3829e1..da669ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,8 @@ "autoprefixer": "^10.4.7", "eslint": "^8.34.0", "eslint-config-next": "^13.2.1", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-prettier": "^4.2.1", "postcss": "^8.4.14", "prettier": "^2.8.1", "prettier-plugin-tailwindcss": "^0.2.1", @@ -1803,6 +1805,18 @@ } } }, + "node_modules/eslint-config-prettier": { + "version": "8.8.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz", + "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==", + "dev": true, + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-import-resolver-node": { "version": "0.3.7", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz", @@ -2003,6 +2017,27 @@ "semver": "bin/semver.js" } }, + "node_modules/eslint-plugin-prettier": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz", + "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==", + "dev": true, + "dependencies": { + "prettier-linter-helpers": "^1.0.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "eslint": ">=7.28.0", + "prettier": ">=2.0.0" + }, + "peerDependenciesMeta": { + "eslint-config-prettier": { + "optional": true + } + } + }, "node_modules/eslint-plugin-react": { "version": "7.32.2", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz", @@ -2191,6 +2226,12 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, + "node_modules/fast-diff": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", + "dev": true + }, "node_modules/fast-glob": { "version": "3.2.12", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", @@ -3874,6 +3915,18 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "dependencies": { + "fast-diff": "^1.1.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/prettier-plugin-tailwindcss": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.4.tgz", @@ -6092,6 +6145,13 @@ "eslint-plugin-react-hooks": "^4.5.0" } }, + "eslint-config-prettier": { + "version": "8.8.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz", + "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==", + "dev": true, + "requires": {} + }, "eslint-import-resolver-node": { "version": "0.3.7", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz", @@ -6251,6 +6311,15 @@ } } }, + "eslint-plugin-prettier": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz", + "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==", + "dev": true, + "requires": { + "prettier-linter-helpers": "^1.0.0" + } + }, "eslint-plugin-react": { "version": "7.32.2", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz", @@ -6380,6 +6449,12 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, + "fast-diff": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", + "dev": true + }, "fast-glob": { "version": "3.2.12", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", @@ -7531,6 +7606,15 @@ "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==", "dev": true }, + "prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "requires": { + "fast-diff": "^1.1.2" + } + }, "prettier-plugin-tailwindcss": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.4.tgz", diff --git a/package.json b/package.json index 38c3738..d5aea56 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "dev": "next dev", "postinstall": "prisma generate", "lint": "next lint", + "format": "next lint --fix", "start": "next start", "mongo:start": "docker run --rm -d -p 27017:27017 -h $(hostname) --name uiowa_atr_mongo mongo:4.4.3 --replSet=test && sleep 4 && docker exec uiowa_atr_mongo mongo --eval \"rs.initiate();\"" }, @@ -42,6 +43,8 @@ "autoprefixer": "^10.4.7", "eslint": "^8.34.0", "eslint-config-next": "^13.2.1", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-prettier": "^4.2.1", "postcss": "^8.4.14", "prettier": "^2.8.1", "prettier-plugin-tailwindcss": "^0.2.1", diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index dc84cb8..7fc0738 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,140 +1,173 @@ import { type NextPage } from "next/types"; -import Image from 'next/image'; +import Image from "next/image"; interface QuickLink { - label: string, - href: string, + label: string; + href: string; } const links: QuickLink[] = [ - { - label: "Communication Sciences and Disorders", - href: "https://csd.uiowa.edu/", - }, - { - label: "Wendell Johnson", - href: "https://www.facilities.uiowa.edu/named-building/wendell-johnson-speech-and-hearing-center", - } -] + { + label: "Communication Sciences and Disorders", + href: "https://csd.uiowa.edu/", + }, + { + label: "Wendell Johnson", + href: "https://www.facilities.uiowa.edu/named-building/wendell-johnson-speech-and-hearing-center", + }, +]; -const QuickLink = ({label, href}: QuickLink) => { - return ( - - external link - {label} - - ) +const QuickLink = ({ label, href }: QuickLink) => { + return ( + + external link + {label} + + ); }; interface ContactInfo { - name: string, - title: string, - email?: string, - phone?: string, + name: string; + title: string; + email?: string; + phone?: string; } const contacts: ContactInfo[] = [ - { - name: "Olivia Adamson", - title: "Audiology Graduate Student Clinician", - email: "olivia-adamson@uiowa.edu", - }, - { - name: "Eun Kyung (Julie) Jeon", - title: "Clinical Assistant Professor", - email: "eunkyung-jeon@uiowa.edu", - phone: "3194671476" - } -] + { + name: "Olivia Adamson", + title: "Audiology Graduate Student Clinician", + email: "olivia-adamson@uiowa.edu", + }, + { + name: "Eun Kyung (Julie) Jeon", + title: "Clinical Assistant Professor", + email: "eunkyung-jeon@uiowa.edu", + phone: "3194671476", + }, +]; -const ContactInfo = ({name, title, email, phone}: ContactInfo) => { - return ( -
-

{name}

-

{title}

- { email ? -
- email -

{email}

-
- : undefined} - { phone ? -
- phone -

{phone}

-
- : undefined} +const ContactInfo = ({ name, title, email, phone }: ContactInfo) => { + return ( +
+

{name}

+

{title}

+ {email ? ( +
+ email +

{email}

- ) -} + ) : undefined} + {phone ? ( +
+ phone +

{phone}

+
+ ) : undefined} +
+ ); +}; -const FooterLabeledSection = ({title, children}: { - title: string, - children: JSX.Element[] | JSX.Element, +const FooterLabeledSection = ({ + title, + children, +}: { + title: string; + children: JSX.Element[] | JSX.Element; }) => { - return ( -
-

{title}

- {children} -
- ) -} + return ( +
+

{title}

+ {children} +
+ ); +}; const Footer: NextPage = () => { - return ( -
- {/** yellow stripe */} -
+ return ( +
+ {/** yellow stripe */} +
- {/** Main footer area */} -
- {/** Wendell Johnson Info */} -
- University of Iowa logo -
-
-

Communication Sciences and Disorders

-

College of Liberal Arts and Sciences

-
-
-

Wendell Johnson Speech and Hearing Center

-

250 Hawkins Dr

-

Iowa City, IA 52242

-
-
-

- Site Designed and Built by - Brandon Egger - -

-
-
-
- - {/** Header and tabs */} -
- -
- {links.map((quickLink, index) => { - return ( - - ) - })} -
- - -
- {contacts.map((contactInfo, index) => { - return ( - - ) - })} -
- -
-
+ {/** Main footer area */} +
+ {/** Wendell Johnson Info */} +
+ University of Iowa logo +
+
+

+ Communication Sciences and Disorders +

+

+ College of Liberal Arts and Sciences +

+
+
+

+ Wendell Johnson Speech and Hearing Center +

+

250 Hawkins Dr

+

Iowa City, IA 52242

+
+
+

+ Site Designed and Built by{" "} + + Brandon Egger + +

+
+
- ) -} + + {/** Header and tabs */} +
+ +
+ {links.map((quickLink, index) => { + return ; + })} +
+ + +
+ {contacts.map((contactInfo, index) => { + return ; + })} +
+ +
+
+
+ ); +}; export default Footer; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 879cfcb..0e28148 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,101 +1,141 @@ import { type NextPage } from "next"; -import Image from 'next/image'; +import Image from "next/image"; import Link from "next/link"; -import { ChevronDownIcon } from '@heroicons/react/24/outline'; +import { ChevronDownIcon } from "@heroicons/react/24/outline"; interface DropdownOption { - label: string; - href: string; + label: string; + href: string; } interface NavBarLinkProps { - href: string; - label: string; - dropdown?: DropdownOption[]; + href: string; + label: string; + dropdown?: DropdownOption[]; } -const NavBarLink = ({href, label, dropdown}: NavBarLinkProps) => { - const DropDown = ({dropdownOptions}: {dropdownOptions: DropdownOption[]}) => { - const options = dropdownOptions.map((dropdownOption, index) => { - return ( - - {dropdownOption.label} - - ) - }); - - return ( -
- {options} -
- ) - } +const NavBarLink = ({ href, label, dropdown }: NavBarLinkProps) => { + const DropDown = ({ + dropdownOptions, + }: { + dropdownOptions: DropdownOption[]; + }) => { + const options = dropdownOptions.map((dropdownOption, index) => { + return ( + + + {dropdownOption.label} + + + ); + }); return ( -
  • - -
    -
    - {label} -
    - {dropdown ? : <>} -
    - - {dropdown && dropdown.length > 0 ? : <>} -
    • +
    + {options} +
    ); -} + }; -const NavBar = () => { - const resourcesDropDown: DropdownOption[] = [ - { - label: "search", - href: "/resources/search", - }, - { - label: "view all", - href: "/resources" + return ( +
  • + -
  • - - - -
    • - - ) -} - -const Header: NextPage = () => { - return <> -
    -
    - Ear listening -
    -
    -

    Center for Auditory Training Resources

    -
    + > +
    +
    + + {label} + +
    + {dropdown ? : <>}
    - - + + {dropdown && dropdown.length > 0 ? ( + + ) : ( + <> + )} + + ); }; -export default Header; \ No newline at end of file +const NavBar = () => { + const resourcesDropDown: DropdownOption[] = [ + { + label: "search", + href: "/resources/search", + }, + { + label: "view all", + href: "/resources", + }, + ]; + + return ( + + ); +}; + +const Header: NextPage = () => { + return ( + <> +
    +
    + Ear listening +
    +
    +

    + Center for Auditory Training Resources +

    +
    +
    + + + ); +}; + +export default Header; diff --git a/src/components/ResourceTable.tsx b/src/components/ResourceTable.tsx index 6e03b39..cd40624 100644 --- a/src/components/ResourceTable.tsx +++ b/src/components/ResourceTable.tsx @@ -1,297 +1,386 @@ -import { type PlatformLink, type PaymentType, type AuditoryResource, type Skill, type SkillLevel, type Manufacturer } from '@prisma/client'; -import { CurrencyDollarIcon, ArrowPathRoundedSquareIcon } from '@heroicons/react/24/solid'; -import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline'; -import Image from 'next/image'; -import Link from 'next/link'; -import { translateEnumPlatform, translateEnumSkill } from '~/utils/enumWordLut'; -import { type ChangeEvent } from 'react'; -import { ChevronDownIcon } from '@heroicons/react/24/outline'; -import { type ParsedUrlQuery, type ParsedUrlQueryInput } from 'querystring'; -import { useRouter } from 'next/router'; +import { + type PlatformLink, + type PaymentType, + type AuditoryResource, + type Skill, + type SkillLevel, + type Manufacturer, +} from "@prisma/client"; +import { + CurrencyDollarIcon, + ArrowPathRoundedSquareIcon, +} from "@heroicons/react/24/solid"; +import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline"; +import Image from "next/image"; +import Link from "next/link"; +import { translateEnumPlatform, translateEnumSkill } from "~/utils/enumWordLut"; +import { type ChangeEvent } from "react"; +import { ChevronDownIcon } from "@heroicons/react/24/outline"; +import { type ParsedUrlQuery, type ParsedUrlQueryInput } from "querystring"; +import { useRouter } from "next/router"; -export const ResourceInfo = ({resource, showMoreInfo}: {resource: AuditoryResource, showMoreInfo?: boolean}) => { - const PriceIcons = ({type}: {type: PaymentType}) => { - switch(type) { - case "FREE": { - return ( -
    - - free - -
    - ) - } - case "SUBSCRIPTION_MONTHLY": { -
    - - -
    - } - case "SUBSCRIPTION_WEEKLY": { - return ( -
    - - -
    - ) - } - } - } - - const PlatformInfo = ({platformLinks}: {platformLinks: PlatformLink[]}) => { - const platformsStr = platformLinks.map((platformLink) => { - return translateEnumPlatform(platformLink.platform); - }).join(', '); - +export const ResourceInfo = ({ + resource, + showMoreInfo, +}: { + resource: AuditoryResource; + showMoreInfo?: boolean; +}) => { + const PriceIcons = ({ type }: { type: PaymentType }) => { + switch (type) { + case "FREE": { return ( -

    {platformsStr}

    - ) +
    + + free + +
    + ); + } + case "SUBSCRIPTION_MONTHLY": { +
    + + +
    ; + } + case "SUBSCRIPTION_WEEKLY": { + return ( +
    + + +
    + ); + } } - - return ( -
    -
    - {showMoreInfo ? - -
    - {`${resource.name} - - more info - -
    - - : -
    - {`${resource.name} -
    - } -
    -
    -
    -

    {resource.manufacturer?.name}

    -

    {resource.name}

    - - -
    + }; + + const PlatformInfo = ({ + platformLinks, + }: { + platformLinks: PlatformLink[]; + }) => { + const platformsStr = platformLinks + .map((platformLink) => { + return translateEnumPlatform(platformLink.platform); + }) + .join(", "); + + return

    {platformsStr}

    ; + }; + + return ( +
    +
    + {showMoreInfo ? ( + +
    + {`${resource.name} + + more info +
    + + ) : ( +
    + {`${resource.name} +
    + )} +
    +
    +
    +

    + {resource.manufacturer?.name} +

    +

    {resource.name}

    + +
    - ) -} +
    +
    + ); +}; -export const ResourceDescription = ({manufacturer, description}: {manufacturer: null | Manufacturer, description: string}) => { - return ( -
    - { manufacturer?.required ? -
    -

    IMPORTANT

    -

    - This resource requires the patient to have a {manufacturer.name} device -

    -
    - : undefined} -
    -

    {description}

    -
    +export const ResourceDescription = ({ + manufacturer, + description, +}: { + manufacturer: null | Manufacturer; + description: string; +}) => { + return ( +
    + {manufacturer?.required ? ( +
    +

    IMPORTANT

    +

    + This resource requires the patient to have a {manufacturer.name}{" "} + device +

    - ) -} + ) : undefined} +
    +

    {description}

    +
    +
    + ); +}; -const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { - const ResourceSkills = ({skills, skillLevels}: {skills: Skill[], skillLevels: SkillLevel[]}) => { - const SkillRanking = ({skillLevels}: {skillLevels: SkillLevel[]}) => { - return ( -
    - {skillLevels.includes('BEGINNER') ? -
    -

    Beginner

    -
    : undefined - } - {skillLevels.includes('INTERMEDIATE') ? -
    -

    Intermediate

    -
    : undefined - } - {skillLevels.includes('ADVANCED') ? -
    -

    Advanced

    -
    : undefined - } -
    - ) - } - - const Skill = ({label}: {label:string}) => { - return ( -
  • - -
    -

    {label}

    -
    -
    • - ) - } - - const skillsComponents = skills.map((skill, index) => { - return - }); - - return ( -
    - { skillsComponents.length > 0 ? -
    -
      - {skillsComponents} -
    -
    : <> - } - -
    - ) - } - - return ( - - - - - - - - - - - - ) -} - -interface PagesNavigationProps { - query?: ParsedUrlQuery; - currentPage: number; - pageCount: number; - resultsPerPage: number; -} - -const PagesNavigation = ({query, currentPage, pageCount, resultsPerPage}: PagesNavigationProps) => { - const router = useRouter(); - const PageButton = ({number}: {number: number}) => { - const redirectQueryData: ParsedUrlQueryInput = {...query}; - redirectQueryData.page = number; - - return ( -
  • - - {number} - -
    • - ) - } - - const pages = Array.from(Array(pageCount).keys()).map((pageNumber) => { +const ResourceEntry = ({ resource }: { resource: AuditoryResource }) => { + const ResourceSkills = ({ + skills, + skillLevels, + }: { + skills: Skill[]; + skillLevels: SkillLevel[]; + }) => { + const SkillRanking = ({ skillLevels }: { skillLevels: SkillLevel[] }) => { return ( - - ) +
    + {skillLevels.includes("BEGINNER") ? ( +
    +

    + Beginner +

    +
    + ) : undefined} + {skillLevels.includes("INTERMEDIATE") ? ( +
    +

    + Intermediate +

    +
    + ) : undefined} + {skillLevels.includes("ADVANCED") ? ( +
    +

    + Advanced +

    +
    + ) : undefined} +
    + ); + }; + + const Skill = ({ label }: { label: string }) => { + return ( +
  • + +
    +

    {label}

    +
    +
    • + ); + }; + + const skillsComponents = skills.map((skill, index) => { + return ; }); - const handleChange = (event: ChangeEvent) => { - if (!query) { - router.push({ - pathname: '/resources', - query: { - perPage: event.target.value, - } - }).catch((reason) => { - console.error(reason); - }); - - return; - } - - query['perPage'] = event.target.value; - router.push({ - pathname: '/resources', - query: { - ...query, - } - }).catch((reason) => { - console.error(reason); - }); - }; - return ( -
    -
    -
    - -
    - -
    -
    -
    -

    Results Per Page

    -
    -
    -
      - {pages} -
    +
    + {skillsComponents.length > 0 ? ( +
    +
      {skillsComponents}
    +
    + ) : ( + <> + )} +
    - ) - } + ); + }; -const ResourceTable = ({resources, resourcesPerPage, currentPage, totalPages, query}: { - resources: AuditoryResource[], - resourcesPerPage: number, - currentPage: number, - totalPages: number, - query: ParsedUrlQuery + return ( + + + + + + + + + + + + ); +}; + +interface PagesNavigationProps { + query?: ParsedUrlQuery; + currentPage: number; + pageCount: number; + resultsPerPage: number; +} + +const PagesNavigation = ({ + query, + currentPage, + pageCount, + resultsPerPage, +}: PagesNavigationProps) => { + const router = useRouter(); + const PageButton = ({ number }: { number: number }) => { + const redirectQueryData: ParsedUrlQueryInput = { ...query }; + redirectQueryData.page = number; + + return ( +
  • + + {number} + +
    • + ); + }; + + const pages = Array.from(Array(pageCount).keys()).map((pageNumber) => { + return ; + }); + + const handleChange = (event: ChangeEvent) => { + if (!query) { + router + .push({ + pathname: "/resources", + query: { + perPage: event.target.value, + }, + }) + .catch((reason) => { + console.error(reason); + }); + + return; + } + + query["perPage"] = event.target.value; + router + .push({ + pathname: "/resources", + query: { + ...query, + }, + }) + .catch((reason) => { + console.error(reason); + }); + }; + + return ( +
    +
    +
    + +
    + +
    +
    +
    +

    Results Per Page

    +
    +
    +
      + {pages} +
    +
    + ); +}; + +const ResourceTable = ({ + resources, + resourcesPerPage, + currentPage, + totalPages, + query, +}: { + resources: AuditoryResource[]; + resourcesPerPage: number; + currentPage: number; + totalPages: number; + query: ParsedUrlQuery; }) => { - const resourceElements = resources.map((resource, index) => { - return (); + const resourceElements = + resources.map((resource, index) => { + return ; }) ?? []; - return( + return (
    -
    - - - - - - - - - - - {resourceElements} - -
    - - Resource - - - - Skills - - - - Description - -
    - {(resources && resources.length > 4) ? - - : undefined} -
    +
    + + + + + + + + + + + {resourceElements} + +
    + + Resource + + + + Skills + + + + Description + +
    + {resources && resources.length > 4 ? ( + + ) : undefined} +
    - ); + ); }; export default ResourceTable; diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 1e76b6b..389ff55 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -1,274 +1,383 @@ -import { type PaymentType, type Platform, type Skill, type SkillLevel } from "@prisma/client" +import { + type PaymentType, + type Platform, + type Skill, + type SkillLevel, +} from "@prisma/client"; import { type Dispatch, type SetStateAction, useState, useEffect } from "react"; -export type QuestionTypes = Platform | Skill | SkillLevel | PaymentType | string; +export type QuestionTypes = + | Platform + | Skill + | SkillLevel + | PaymentType + | string; export interface Option { - label: string, - value: T, + label: string; + value: T; } export interface Question { - for: string, - header: string, - question: string, - maxSelect?: number, - optional: true, - options: Option[] + for: string; + header: string; + question: string; + maxSelect?: number; + optional: true; + options: Option[]; } -const GreetingPage = ({updatePage}: { - updatePage: (pageNumber: number) => void, +const GreetingPage = ({ + updatePage, +}: { + updatePage: (pageNumber: number) => void; }) => { - const getStartedClick = () => { - updatePage(1); - } + const getStartedClick = () => { + updatePage(1); + }; - return ( -
    -

    Welcome to the auditory training resource search tool!

    -

    We will ask a few questions about the patient and then recommend the best auditory training resources based on your answers!

    - -
    - ) -} + return ( +
    +

    + Welcome to the auditory training resource search tool! +

    +

    + We will ask a few questions about the patient and then recommend the + best auditory training resources based on your answers! +

    + +
    + ); +}; /** * Single question component for a guided search */ -const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateFormData, dontCareData, setDontCareData}: { - isLastPage: boolean, - page: number, - question: Question, - updatePage: (pageNumber: number) => void, - formData: Record, - updateFormData: Dispatch>>, - dontCareData: Record, - setDontCareData: Dispatch>>, - +const QuestionPage = ({ + isLastPage, + page, + question, + updatePage, + formData, + updateFormData, + dontCareData, + setDontCareData, +}: { + isLastPage: boolean; + page: number; + question: Question; + updatePage: (pageNumber: number) => void; + formData: Record; + updateFormData: Dispatch>>; + dontCareData: Record; + setDontCareData: Dispatch>>; }) => { - const dontCare = dontCareData[question.for] ?? false; + const dontCare = dontCareData[question.for] ?? false; - const OptionToggle = ({option}: {option: Option}) => { - const selected = formData[question.for]?.includes(option.value) ?? false; - - const handleToggle = () => { - const newFormData = { - ...formData - }; + const OptionToggle = ({ option }: { option: Option }) => { + const selected = formData[question.for]?.includes(option.value) ?? false; - if (!newFormData[question.for]) { - newFormData[question.for] = [option.value]; - } else if (newFormData[question.for]?.includes(option.value)) { - newFormData[question.for] = newFormData[question.for]?.filter(function(item) { - return item !== option.value - }) ?? []; - } else { - newFormData[question.for] = [...newFormData[question.for] ?? [], option.value]; - } + const handleToggle = () => { + const newFormData = { + ...formData, + }; - updateFormData(newFormData); - } + if (!newFormData[question.for]) { + newFormData[question.for] = [option.value]; + } else if (newFormData[question.for]?.includes(option.value)) { + newFormData[question.for] = + newFormData[question.for]?.filter(function (item) { + return item !== option.value; + }) ?? []; + } else { + newFormData[question.for] = [ + ...(newFormData[question.for] ?? []), + option.value, + ]; + } - if (dontCare) { - return ( - - ) - } - - return ( - - ) - } - - useEffect(() => { - if (!formData[question.for]) { - const newFormData = {...formData}; - newFormData[question.for] = []; - - updateFormData(newFormData); - } - }); - - const dontCareToggle = () => { - if (formData[question.for]) { - const newFormData = { - ...formData - }; - - newFormData[question.for] = []; - updateFormData(newFormData); - } - - const newDontCareData = { - ...dontCareData - } - - newDontCareData[question.for] = !dontCare; - setDontCareData(newDontCareData); - } - - const nextClick = () => { - updatePage(page + 1); - } - - const backClick = () => { - updatePage(page - 1); - } - - const AdvanceButtons = () => { - return ( -
    - {!isLastPage ? -
    - - -
    - : -
    - - -
    - } -
    - ) + updateFormData(newFormData); }; - return ( -
    -
    -

    {question.header}

    -

    {question.question}

    -

    Select all that apply from below

    -
    + if (dontCare) { + return ( + + ); + } -
    - {question.options.map((option, index) => { - return ( - - ); - })} -
    - {question.optional ? - - : undefined} -
    - -
    -
    - ) -} + return ( + + ); + }; + + useEffect(() => { + if (!formData[question.for]) { + const newFormData = { ...formData }; + newFormData[question.for] = []; + + updateFormData(newFormData); + } + }); + + const dontCareToggle = () => { + if (formData[question.for]) { + const newFormData = { + ...formData, + }; + + newFormData[question.for] = []; + updateFormData(newFormData); + } + + const newDontCareData = { + ...dontCareData, + }; + + newDontCareData[question.for] = !dontCare; + setDontCareData(newDontCareData); + }; + + const nextClick = () => { + updatePage(page + 1); + }; + + const backClick = () => { + updatePage(page - 1); + }; + + const AdvanceButtons = () => { + return ( +
    + {!isLastPage ? ( +
    + + +
    + ) : ( +
    + + +
    + )} +
    + ); + }; + + return ( +
    +
    +

    {question.header}

    +

    + {question.question} +

    +

    + Select all that apply from below +

    +
    + +
    + {question.options.map((option, index) => { + return ; + })} +
    + {question.optional ? ( + + ) : undefined} +
    + +
    +
    + ); +}; /** * Wrapper for last and current page to enable the transition animation */ -const PageTransition = ({backwards, lastPage, currentPage}: { - backwards: boolean, - lastPage: JSX.Element | null, - currentPage: JSX.Element, +const PageTransition = ({ + backwards, + lastPage, + currentPage, +}: { + backwards: boolean; + lastPage: JSX.Element | null; + currentPage: JSX.Element; }) => { - return ( -
    -
    - {currentPage} -
    + return ( +
    +
    + {currentPage} +
    - {/** last page */} -
    - {lastPage} -
    -
    - ); + {/** last page */} +
    + {lastPage} +
    +
    + ); }; /** * Main guided search component. * Page 0 = greeting page. */ -const GuidedSearch = ({questions}: { - questions: Question[], +const GuidedSearch = ({ + questions, +}: { + questions: Question[]; }) => { - const [page, setPage] = useState(0); - const [formData, setFormData] = useState<(Record)>({}); - const [dontCareData, setDoneCareData] = useState<(Record)>({}); - const [previousPage, setPreviousPage] = useState(undefined); + const [page, setPage] = useState(0); + const [formData, setFormData] = useState>({}); + const [dontCareData, setDoneCareData] = useState>({}); + const [previousPage, setPreviousPage] = useState( + undefined + ); - const updatePage = (pageNumber: number) => { - setPreviousPage(page); - setPage(pageNumber); - }; + const updatePage = (pageNumber: number) => { + setPreviousPage(page); + setPage(pageNumber); + }; - const SearchPage = ({pageNumber}: { - pageNumber?: number, - }) => { - if (pageNumber === undefined) { - return null; - } - - if (pageNumber === 0) { - return ( - - ); - } - - const question = questions[pageNumber-1]; - if (!question) { - return null; - } - - const isLastPage = pageNumber === questions.length - - return ( - - ); + const SearchPage = ({ pageNumber }: { pageNumber?: number }) => { + if (pageNumber === undefined) { + return null; } - /** - * Renders the hidden html form selectors - */ - const HTMLQuestion = ({question}: {question: Question}) => { - return ( - - ); + if (pageNumber === 0) { + return ; } - const lastPage = ; - const currentPage = ; - const backwards = (previousPage ?? -1) >= page; + const question = questions[pageNumber - 1]; + if (!question) { + return null; + } + + const isLastPage = pageNumber === questions.length; return ( -
    -
    -

    Search

    -
    + + ); + }; - + /** + * Renders the hidden html form selectors + */ + const HTMLQuestion = ({ + question, + }: { + question: Question; + }) => { + return ( + + ); + }; - {/** Hidden html */} -
    - {questions.map((question, index) => { - return - })} - -
    - ) -} + const lastPage = ; + const currentPage = ; + const backwards = (previousPage ?? -1) >= page; -export { - GuidedSearch, -} + return ( +
    +
    +

    Search

    +
    + + + + {/** Hidden html */} +
    + {questions.map((question, index) => { + return ; + })} + +
    + ); +}; + +export { GuidedSearch }; diff --git a/src/env.mjs b/src/env.mjs index fcad3ec..63b4be4 100644 --- a/src/env.mjs +++ b/src/env.mjs @@ -16,7 +16,7 @@ const server = z.object({ // Since NextAuth.js automatically uses the VERCEL_URL if present. (str) => process.env.VERCEL_URL ?? str, // VERCEL_URL doesn't include `https` so it cant be validated as a URL - process.env.VERCEL ? z.string().min(1) : z.string().url(), + process.env.VERCEL ? z.string().min(1) : z.string().url() ), // Add `.min(1) on ID and SECRET if you want to make sure they're not empty DISCORD_CLIENT_ID: z.string(), @@ -70,7 +70,7 @@ if (!!process.env.SKIP_ENV_VALIDATION == false) { if (parsed.success === false) { console.error( "❌ Invalid environment variables:", - parsed.error.flatten().fieldErrors, + parsed.error.flatten().fieldErrors ); throw new Error("Invalid environment variables"); } @@ -84,7 +84,7 @@ if (!!process.env.SKIP_ENV_VALIDATION == false) { throw new Error( process.env.NODE_ENV === "production" ? "❌ Attempted to access a server-side environment variable on the client" - : `❌ Attempted to access server-side environment variable '${prop}' on the client`, + : `❌ Attempted to access server-side environment variable '${prop}' on the client` ); return target[/** @type {keyof typeof target} */ (prop)]; }, diff --git a/src/middleware.ts b/src/middleware.ts index 160ff6b..11ea8f6 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -1,3 +1,3 @@ -import sslRedirect from 'next-ssl-redirect-middleware'; +import sslRedirect from "next-ssl-redirect-middleware"; -export default sslRedirect({}); \ No newline at end of file +export default sslRedirect({}); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 5e2de70..69b8c64 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -15,7 +15,10 @@ const MyApp: AppType<{ session: Session | null }> = ({ ATR - + diff --git a/src/pages/about.tsx b/src/pages/about.tsx index b2e5935..deda827 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -1,108 +1,139 @@ import { type NextPage } from "next/types"; -import Image from 'next/image'; -import { HandRaisedIcon } from '@heroicons/react/24/solid'; +import Image from "next/image"; +import { HandRaisedIcon } from "@heroicons/react/24/solid"; import Footer from "~/components/Footer"; import Header from "~/components/Header"; type Position = "left" | "right"; interface Biography { - name: string; - bodyName: string; - title: string; - body: string; - img: string; - position: Position; + name: string; + bodyName: string; + title: string; + body: string; + img: string; + position: Position; } -const Biopgraphy = ({bodyName, name, title, body, img, position}: Biography) => { - return ( -
    -
    - {`${name} -
    -

    {name}

    -

    {title}

    -
    -
    -
    - {bodyName} {body} -
    -
    - ); +const Biopgraphy = ({ + bodyName, + name, + title, + body, + img, + position, +}: Biography) => { + return ( +
    +
    + {`${name} +
    +

    {name}

    +

    {title}

    +
    +
    +
    + {bodyName} {body} +
    +
    + ); }; const biographies: Biography[] = [ - { - name: "Olivia Adamson", - bodyName: "Olivia", - title: "B.A", - body: "is a dedicated audiology graduate student at the University of Iowa, originally from a small town in southeast Minnesota. She earned her Bachelor of Arts in Communication Sciences and Disorders from Augustana University in Sioux Falls, SD, in 2020. Olivia Adamson is currently immersed in her fourth-year externship at Gundersen Health System in LaCrosse, WI, where she works with patients of all ages, performs comprehensive diagnostic assessments, provides vestibular assessments, and specializes in hearing aids and cochlear implants. With a passion for aural rehabilitation, particularly for older adults, Olivia is dedicated to enhancing the quality of life for individuals with hearing loss. She aspires to empower patients to take control of their hearing journey through this resource. Upon completing her externship, Olivia will graduate with her Au.D. in May 2024.", - img: "/profiles/olivia-adamson.jpeg", - position: "right", - }, - { - name: "Dr. Eun Kyung (Julie) Jeon", - bodyName: "Julie", - title: "Au.D., Ph.D.", - body: "is a Clinical Assistant Professor in Communication Sciences and Disorders at the University of Iowa. She earned both her Au.D. and Ph.D. degrees from the University of Iowa in 2008 and 2016, respectively. Dr. Jeon's research and clinical interests focus on aural (re)habilitation for children and adults with hearing aids and cochlear implants. She has served as a reviewer for various journals, including Ear and Hearing and Cochlear Implant International. Dr. Jeon is an active member of several professional organizations, such as the American Academy of Audiology (AAA), the American Cochlear Implant Alliance (ACIA), the American Speech-Language-Hearing Association (ASHA), the Iowa Speech-Language-Hearing Association (ISHA), and the Asia Pacific Society of Speech-Language-Hearing (APSSLH). Currently, she has been entrusted with various leadership responsibilities, including educational committee officer for the APSSLH, Member-at-Large for the Iowa Speech Language Hearing Foundation, Iowa EHDI Advisory Board representative for the ISHA, and program committee member for the CI2023 conference.", - img: "/profiles/jeon-eunkyung.jpg", - position: "left", - } -] + { + name: "Olivia Adamson", + bodyName: "Olivia", + title: "B.A", + body: "is a dedicated audiology graduate student at the University of Iowa, originally from a small town in southeast Minnesota. She earned her Bachelor of Arts in Communication Sciences and Disorders from Augustana University in Sioux Falls, SD, in 2020. Olivia Adamson is currently immersed in her fourth-year externship at Gundersen Health System in LaCrosse, WI, where she works with patients of all ages, performs comprehensive diagnostic assessments, provides vestibular assessments, and specializes in hearing aids and cochlear implants. With a passion for aural rehabilitation, particularly for older adults, Olivia is dedicated to enhancing the quality of life for individuals with hearing loss. She aspires to empower patients to take control of their hearing journey through this resource. Upon completing her externship, Olivia will graduate with her Au.D. in May 2024.", + img: "/profiles/olivia-adamson.jpeg", + position: "right", + }, + { + name: "Dr. Eun Kyung (Julie) Jeon", + bodyName: "Julie", + title: "Au.D., Ph.D.", + body: "is a Clinical Assistant Professor in Communication Sciences and Disorders at the University of Iowa. She earned both her Au.D. and Ph.D. degrees from the University of Iowa in 2008 and 2016, respectively. Dr. Jeon's research and clinical interests focus on aural (re)habilitation for children and adults with hearing aids and cochlear implants. She has served as a reviewer for various journals, including Ear and Hearing and Cochlear Implant International. Dr. Jeon is an active member of several professional organizations, such as the American Academy of Audiology (AAA), the American Cochlear Implant Alliance (ACIA), the American Speech-Language-Hearing Association (ASHA), the Iowa Speech-Language-Hearing Association (ISHA), and the Asia Pacific Society of Speech-Language-Hearing (APSSLH). Currently, she has been entrusted with various leadership responsibilities, including educational committee officer for the APSSLH, Member-at-Large for the Iowa Speech Language Hearing Foundation, Iowa EHDI Advisory Board representative for the ISHA, and program committee member for the CI2023 conference.", + img: "/profiles/jeon-eunkyung.jpg", + position: "left", + }, +]; const About: NextPage = () => { - - return <> -
    -
    -
    -
    -
    -

    About Us

    -
    -
    + return ( + <> +
    +
    +
    +
    +
    +

    + About Us +

    -
    -
    -
    - {/** Small screens */} -
    -

    - Meet the Team - -

    -
    - {/** Large screens */} -
    -

    - Meet the Team - -

    -
    -
    - {biographies.map((biography, index) => { - return ( - - ); - })} -
    -
    -
    +
    +
    +
    +
    +
    + {/** Small screens */} +
    +

    + Meet the Team + +

    +
    + {/** Large screens */} +
    +

    + Meet the Team + +

    +
    +
    + {biographies.map((biography, index) => { + return ; + })} +
    -
    -
    +
    +
    + +