-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #63 from cthit/remove-rps-from-pateter
Remove rps from pateter
- Loading branch information
Showing
4 changed files
with
150 additions
and
151 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div onClick={() => { props.scrollTo(props.index) }} className="h-0 w-0 p-2.5 flex justify-end relative items-center m-px navBallBox cursor-pointer"> | ||
| <span className="transition-all opacity-0 navBallLabel">{props.committeeyear}</span> | ||
| <span className={`navBall ${props.index === props.currentPage ? 'bg-slate-100' : ''} border visible p-1.5 border-slate-100 opacity-50 rounded-full m-2 transition-all duration-200`}></span> | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| 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<PateterProps> = ({ text, allCommittees }) => { | ||
| const [showToTopButton, setShowToTopButton] = useState(false); | ||
| const [showScrollDownButton, setShowScrollDownButton] = useState(true); | ||
|
|
||
| const [currentPage, setCurrentPage] = useState<number>(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<boolean>(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<number>(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 ( | ||
| <> | ||
| <Page blackout unrestrictChildren currentYear={currentYear}> | ||
| <ReactPageScroller | ||
| animationTimer={700} | ||
| animationTimerBuffer={700} | ||
| renderAllPagesOnFirstRender={true} | ||
| onBeforePageScroll={handlePageChange} | ||
| customPageNumber={currentPage} | ||
| <Page blackout ignoreMargins> | ||
| <div | ||
| id="pateter" | ||
| className="snap-y snap-mandatory flex flex-col items-center h-screen overflow-y-auto" | ||
| onScroll={() => handleScroll()} | ||
| > | ||
| <PageMargins> | ||
| <PageInfo heading="Pateter"> | ||
| {text.content} | ||
| </PageInfo> | ||
| <div className="snap-start h-full flex flex-col items-center w-10/12 lg:w-3/4 min-h-screen"> | ||
| <PageInfo heading="Pateter">{text.content}</PageInfo> | ||
| <Divider /> | ||
|
|
||
| <div className="absolute bottom-10 flex flex-col gap-4 items-center cursor-pointer py-2" onClick={() => scrollTo(1)}> | ||
| <div | ||
| 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()} | ||
| > | ||
| <p className="text-sm italic">Skrolla för pateter</p> | ||
| <img className="downarrow w-10 transition opacity-60" src={"/down.svg"} alt="arrow down" /> | ||
| <img | ||
| className="downarrow w-10 transition opacity-60" | ||
| src={"/down.svg"} | ||
| alt="arrow down" | ||
| /> | ||
| </div> | ||
| </PageMargins> | ||
|
|
||
| {allCommittees.map(committee => ( | ||
| <div key={committee.year}> | ||
| </div> | ||
| {/* used to to know whether user has scrolled far enough */} | ||
| <div id="boundary"></div>{" "} | ||
| {allCommittees.map((committee) => ( | ||
| <div key={committee.year} className="snap-start"> | ||
| <Precursor committee={committee} /> | ||
| </div> | ||
| ))} | ||
|
|
||
| </ReactPageScroller> | ||
|
|
||
| <div className="fixed flex flex-col items-center -right-2 lg:right-4 self-center top-1/4"> | ||
| <NavBall index={0} scrollTo={() => scrollTo(0)} currentPage={currentPage} committeeyear={"Till toppen"} ></NavBall> | ||
| {allCommittees.map((committee: Committee, index) => ( | ||
| <NavBall key={index} index={index + 1} scrollTo={() => scrollTo(index + 1)} currentPage={currentPage} committeeyear={committee.year.toString().slice(-2)}></NavBall> | ||
| ))} | ||
| </div> | ||
| <div className={`fixed right-10 bottom-10 transition-opacity duration-300 ${topButtonShown ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}> | ||
| <Button action={() => scrollTo(0)}> | ||
| Tillbaka till toppen | ||
| </Button> | ||
| </div> | ||
| </Page> | ||
| <div | ||
| className={`fixed right-10 bottom-10 transition-opacity duration-300 ${ | ||
| showToTopButton | ||
| ? "opacity-100 pointer-events-auto" | ||
| : "opacity-0 pointer-events-none" | ||
| }`} | ||
| > | ||
| <Button | ||
| color="bg-black/20" | ||
| action={() => { | ||
| document | ||
| .querySelector("#pateter") | ||
| ?.scrollTo({ top: 0, behavior: "smooth" }); | ||
| }} | ||
| > | ||
| Tillbaka till toppen | ||
| </Button> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default Pateter | ||
| export default Pateter; |