From da470ed5918f4b289030e9f4ec29fc68088a1eeb Mon Sep 17 00:00:00 2001 From: Jacob Bengtsson Date: Thu, 4 Jan 2024 18:33:15 +0100 Subject: [PATCH 1/3] start on remove --- components/Page.tsx | 38 +++++----- components/PageMargins.tsx | 8 +- components/Precursor.tsx | 84 +++++++++++---------- pages/pateter.tsx | 146 ++++++++++++++++++++++--------------- 4 files changed, 160 insertions(+), 116 deletions(-) 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..d931eab 100644 --- a/pages/pateter.tsx +++ b/pages/pateter.tsx @@ -1,95 +1,110 @@ -import { NextPage } from "next" -import Precursor from "../components/Precursor" -import ReactPageScroller from 'react-page-scroller'; +import { NextPage } from "next"; +import Precursor from "../components/Precursor"; +import ReactPageScroller from "react-page-scroller"; import { useEffect, useState } from "react"; import PageInfo from "../components/PageInfo"; import { Committee, PageText } from "@prisma/client"; import Page from "../components/Page"; -import PageMargins from "../components/PageMargins"; +import PageMargins, { horizontalPadding } from "../components/PageMargins"; import Button from "../components/Button"; import { CommitteeWithMembers } from "../types"; import Divider from "../components/Divider"; -import { prisma } from '../prisma/prismaclient'; +import { prisma } from "../prisma/prismaclient"; -const NavBall = (props: { index: number; committeeyear: string; currentPage: number; scrollTo: (to: number) => void }) => { +/*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}
) -}; - +};*/ 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 }) => { + return ( + +
+
+ {text.content} + +
+ {allCommittees.map((committee) => ( +
+ +
+ ))} +
+ + ); - const [currentPage, setCurrentPage] = useState(0) + const [currentPage, setCurrentPage] = useState(0); const changeBgOpacity = (index: number) => { - const fp = document.getElementById("first-page") - if (!fp) return + const fp = document.getElementById("first-page"); + if (!fp) return; if (index === 0) { - fp.style.background = "rgba(0,0,0,0.8)" + fp.style.background = "rgba(0,0,0,0.8)"; } else { - fp.style.background = "rgba(0,0,0,0.9)" + fp.style.background = "rgba(0,0,0,0.9)"; } - } + }; const scrollTo = (index: number) => { - setCurrentPage(index) - } + setCurrentPage(index); + }; - const [topButtonShown, setTopButtonShown] = useState(false) + const [topButtonShown, setTopButtonShown] = useState(false); const toggleTopButton = (index: number) => { - index === 0 ? setTopButtonShown(false) : setTopButtonShown(true) - } + index === 0 ? setTopButtonShown(false) : setTopButtonShown(true); + }; - const [currentYear, setCurrentYear] = useState(0) + const [currentYear, setCurrentYear] = useState(0); 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? + 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? }; // set currentyear to current year with useEffect useEffect(() => { - setCurrentYear(new Date().getFullYear()) - }, []) + setCurrentYear(new Date().getFullYear()); + }, []); return ( <> - + = ({ text, allCommittees }) => { customPageNumber={currentPage} > - - {text.content} - + {text.content} -
scrollTo(1)}> +
scrollTo(1)} + >

Skrolla för pateter

- arrow down + arrow down
- {allCommittees.map(committee => ( + {allCommittees.map((committee) => (
))} -
- scrollTo(0)} currentPage={currentPage} committeeyear={"Till toppen"} > + scrollTo(0)} + currentPage={currentPage} + committeeyear={"Till toppen"} + > {allCommittees.map((committee: Committee, index) => ( - scrollTo(index + 1)} currentPage={currentPage} committeeyear={committee.year.toString().slice(-2)}> + scrollTo(index + 1)} + currentPage={currentPage} + committeeyear={committee.year.toString().slice(-2)} + > ))}
-
- +
+
- ) -} + ); +}; -export default Pateter +export default Pateter; From 688c9456ad89bae0f370511cf46b2cfcf993d55f Mon Sep 17 00:00:00 2001 From: Dadi Andrason Date: Fri, 26 Jan 2024 17:56:56 +0100 Subject: [PATCH 2/3] Refactor code and add "Tillbaka till toppen" button --- pages/pateter.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/pages/pateter.tsx b/pages/pateter.tsx index d931eab..9d3d2b0 100644 --- a/pages/pateter.tsx +++ b/pages/pateter.tsx @@ -11,14 +11,14 @@ 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 }) => { +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}
) -};*/ +}; export const getServerSideProps = async () => { const text = await prisma.pageText.findFirst({ @@ -50,6 +50,8 @@ interface PateterProps { const Pateter: NextPage = ({ text, allCommittees }) => { return ( + <> +
@@ -63,6 +65,10 @@ const Pateter: NextPage = ({ text, allCommittees }) => { ))}
+
+ +
+ ); const [currentPage, setCurrentPage] = useState(0); From be80959c716b7f52c54f9b52fc067b80ae40b66b Mon Sep 17 00:00:00 2001 From: Jacob Bengtsson Date: Fri, 26 Jan 2024 20:16:22 +0100 Subject: [PATCH 3/3] Fix it yes --- pages/pateter.tsx | 155 ++++++++++++++++------------------------------ 1 file changed, 52 insertions(+), 103 deletions(-) diff --git a/pages/pateter.tsx b/pages/pateter.tsx index 9d3d2b0..9946460 100644 --- a/pages/pateter.tsx +++ b/pages/pateter.tsx @@ -1,25 +1,14 @@ import { NextPage } from "next"; import Precursor from "../components/Precursor"; -import ReactPageScroller from "react-page-scroller"; -import { useEffect, useState } from "react"; +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, { horizontalPadding } 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} - -
- ) -}; - export const getServerSideProps = async () => { const text = await prisma.pageText.findFirst({ where: { @@ -49,82 +38,48 @@ interface PateterProps { } const Pateter: NextPage = ({ text, allCommittees }) => { - return ( - <> - - -
-
- {text.content} - -
- {allCommittees.map((committee) => ( -
- -
- ))} -
- -
- -
- - ); + 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} -
scrollTo(1)} + className={`absolute bottom-10 flex flex-col gap-4 items-center cursor-pointer py-2 transition duration-700 ${ + showScrollDownButton + ? "opacity-100 pointer-events-auto" + : "opacity-0 pointer-events-none" + }`} + onClick={() => scrollToFirst()} >

Skrolla för pateter

= ({ text, allCommittees }) => { alt="arrow down" />
- - +
+ {/* 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)} - > - ))} -
-
-
+
+ +
); };