diff --git a/components/Page.tsx b/components/Page.tsx index d53eb6f..e31bada 100644 --- a/components/Page.tsx +++ b/components/Page.tsx @@ -5,46 +5,50 @@ import PageMargins from "./PageMargins"; import ImageWithFallback from "./ImageWithFallback"; interface PageProps { - blackout?: boolean - children?: React.ReactNode - unrestrictChildren?: boolean - currentYear?: number + blackout?: boolean; + children?: React.ReactNode; + ignoreMargins?: boolean; + currentYear?: number; } export default function Page(props: PageProps) { - - const ctx = useContext(YearContext) + const ctx = useContext(YearContext); return ( <> - {/* Background */}
- +
- +
{/* Content */} - {(props.unrestrictChildren ?? false) ? ( + {props.ignoreMargins ?? false ? ( props.children ) : ( - - {props.children} - + {props.children} )} - {/* Header */}
- ) - -} \ No newline at end of file + ); +} diff --git a/components/PageMargins.tsx b/components/PageMargins.tsx index 484cd8d..64f7bbc 100644 --- a/components/PageMargins.tsx +++ b/components/PageMargins.tsx @@ -1,5 +1,5 @@ interface PageMarginsProps { - children?: React.ReactNode + children?: React.ReactNode; } const PageMargins = (props: PageMarginsProps) => { @@ -9,7 +9,7 @@ const PageMargins = (props: PageMarginsProps) => { {props.children} - ) -} + ); +}; -export default PageMargins \ No newline at end of file +export default PageMargins; diff --git a/components/Precursor.tsx b/components/Precursor.tsx index 011d65d..5683baf 100644 --- a/components/Precursor.tsx +++ b/components/Precursor.tsx @@ -2,46 +2,54 @@ import React from "react"; import { CommitteeWithMembers } from "../types"; import Button from "./Button"; - - const Precursor = ({ committee }: { committee: CommitteeWithMembers }) => { - - return ( -
-
- -
- - {/* Image */} -
- {committee.year.toString()} -
- - {/* Text */} -
-

{"NollKIT'" + committee.year.toString().slice(2)}

-

{committee.orderInImageDesc}:

- -
- {committee.members.sort((a, b) => a.orderInImage - b.orderInImage).map( member => ( - - {member.name} - {member.role} - - ))} -
-
- -
-
-
-
+ return ( +
+
+ {/* Image */} +
+ {committee.year.toString()}
- ) -} - + {/* Text */} +
+

+ {"NollKIT'" + committee.year.toString().slice(2)} +

+

+ {committee.orderInImageDesc}: +

+ +
+ {committee.members + .sort((a, b) => a.orderInImage - b.orderInImage) + .map((member) => ( + + {member.name} + {member.role} + + ))} +
+
+ +
+
+
+
+ ); +}; export default Precursor; diff --git a/pages/pateter.tsx b/pages/pateter.tsx index ee5501e..9946460 100644 --- a/pages/pateter.tsx +++ b/pages/pateter.tsx @@ -1,136 +1,123 @@ -import { NextPage } from "next" -import Precursor from "../components/Precursor" -import ReactPageScroller from 'react-page-scroller'; -import { useEffect, useState } from "react"; +import { NextPage } from "next"; +import Precursor from "../components/Precursor"; +import { useState } from "react"; import PageInfo from "../components/PageInfo"; -import { Committee, PageText } from "@prisma/client"; +import { PageText } from "@prisma/client"; import Page from "../components/Page"; -import PageMargins from "../components/PageMargins"; import Button from "../components/Button"; import { CommitteeWithMembers } from "../types"; import Divider from "../components/Divider"; -import { prisma } from '../prisma/prismaclient'; - -const NavBall = (props: { index: number; committeeyear: string; currentPage: number; scrollTo: (to: number) => void }) => { - return ( -
{ props.scrollTo(props.index) }} className="h-0 w-0 p-2.5 flex justify-end relative items-center m-px navBallBox cursor-pointer"> - {props.committeeyear} - -
- ) -}; - +import { prisma } from "../prisma/prismaclient"; export const getServerSideProps = async () => { - const text = await prisma.pageText.findFirst({ where: { - page: "pateter" - } - }) + page: "pateter", + }, + }); let allCommittees = await prisma.committee.findMany({ include: { - members: true - } - }) + members: true, + }, + }); // Database entries are not necessarily in order, and needs to be sorted - allCommittees.sort((a,b) => b.year - a.year) + allCommittees.sort((a, b) => b.year - a.year); // Remove the current year from the list - allCommittees.shift() + allCommittees.shift(); return { - props: { text: text, allCommittees: allCommittees } - } -} + props: { text: text, allCommittees: allCommittees }, + }; +}; interface PateterProps { - text: PageText - allCommittees: CommitteeWithMembers[] + text: PageText; + allCommittees: CommitteeWithMembers[]; } const Pateter: NextPage = ({ text, allCommittees }) => { + const [showToTopButton, setShowToTopButton] = useState(false); + const [showScrollDownButton, setShowScrollDownButton] = useState(true); - const [currentPage, setCurrentPage] = useState(0) + function handleScroll() { + const boundary = document.querySelector("#boundary"); + const pateter = document.querySelector("#pateter"); - const changeBgOpacity = (index: number) => { - const fp = document.getElementById("first-page") - if (!fp) return - if (index === 0) { - fp.style.background = "rgba(0,0,0,0.8)" - } else { - fp.style.background = "rgba(0,0,0,0.9)" - } - } - const scrollTo = (index: number) => { - setCurrentPage(index) - } + if (!boundary) return; + if (!pateter) return; - const [topButtonShown, setTopButtonShown] = useState(false) + setShowToTopButton(boundary.getBoundingClientRect().top <= 0); - const toggleTopButton = (index: number) => { - index === 0 ? setTopButtonShown(false) : setTopButtonShown(true) + console.log(pateter.scrollTop); + setShowScrollDownButton(pateter.scrollTop <= 0); } - const [currentYear, setCurrentYear] = useState(0) + function scrollToFirst() { + const boundary = document.querySelector("#boundary"); - const handlePageChange = (index: number) => { - setCurrentPage(index) - changeBgOpacity(index) - toggleTopButton(index) - index === 0 ? setCurrentYear(new Date().getFullYear()) : setCurrentYear(allCommittees[index-1].year) // kind of ugly but there's no better way? - }; + if (!boundary) return; - // set currentyear to current year with useEffect - useEffect(() => { - setCurrentYear(new Date().getFullYear()) - }, []) + boundary.scrollIntoView({ behavior: "smooth" }); + } return ( <> - - +
handleScroll()} > - - - {text.content} - +
+ {text.content} - -
scrollTo(1)}> +
scrollToFirst()} + >

Skrolla för pateter

- arrow down + arrow down
- - - {allCommittees.map(committee => ( -
+
+ {/* used to to know whether user has scrolled far enough */} +
{" "} + {allCommittees.map((committee) => ( +
))} - - - -
- scrollTo(0)} currentPage={currentPage} committeeyear={"Till toppen"} > - {allCommittees.map((committee: Committee, index) => ( - scrollTo(index + 1)} currentPage={currentPage} committeeyear={committee.year.toString().slice(-2)}> - ))} -
-
-
+
+ +
- ) -} + ); +}; -export default Pateter +export default Pateter;