From 73e78233a1fae6fd0e07141e4084cc95f8998e71 Mon Sep 17 00:00:00 2001 From: ebetoi Date: Wed, 6 Mar 2024 16:30:06 +0200 Subject: [PATCH 01/13] Add esittelyt --- components/hero.tsx | 1 + contentful/graphql/esittelytPage.graphql | 13 ++ pages/esittelyt.tsx | 220 +++++++++++++++++++++++ 3 files changed, 234 insertions(+) create mode 100644 contentful/graphql/esittelytPage.graphql create mode 100644 pages/esittelyt.tsx diff --git a/components/hero.tsx b/components/hero.tsx index 85716d0..69d5e73 100644 --- a/components/hero.tsx +++ b/components/hero.tsx @@ -74,6 +74,7 @@ const Hero: FC = ({ ))} + diff --git a/contentful/graphql/esittelytPage.graphql b/contentful/graphql/esittelytPage.graphql new file mode 100644 index 0000000..86f77c8 --- /dev/null +++ b/contentful/graphql/esittelytPage.graphql @@ -0,0 +1,13 @@ +query esittelyt { + hallitusJaTiimiesittelyt2024Collection { + items { + name + description { + json + } + picture { + url + } + } + } +} \ No newline at end of file diff --git a/pages/esittelyt.tsx b/pages/esittelyt.tsx new file mode 100644 index 0000000..1714492 --- /dev/null +++ b/pages/esittelyt.tsx @@ -0,0 +1,220 @@ +import { EsittelytDocument, EsittelytQuery } from 'contentful/graphql/esittelytPage.graphql'; +import { fetchContent, fetchNavigationItems, NavigationItem } from 'contentful/client'; +import { contentfulImageLoader } from 'contentful/contentfulImageLoader'; +//import { props } from 'ramda'; + +import { GetStaticProps, NextPage } from 'next'; +import Head from 'next/head'; +import Image from 'next/image'; +import Link from 'next/link'; + +import { documentToReactComponents } from '@contentful/rich-text-react-renderer'; +import { Document } from '@contentful/rich-text-types'; + + +import Footer from 'components/footer'; +import Hero from 'components/hero'; + +import { useEffect, useState } from 'react'; + +interface EsittelytProps { + navigationItems?: NavigationItem[] | null; + esittelyt:Esittely[]; +} + +interface Esittely { + name?:string | null + description?: any + index: number + picture?:{ + url?:string | null + } + forceOpen?: boolean + className?: string +} + +const ExhibitionListCard: React.FC<{ esittely: Esittely }> = ({ esittely }) => { + const { name, description, index, picture, forceOpen, className} = esittely; + const [isExpanded, setIsExpanded] = useState(forceOpen ?? false); + const handleClick = () => { + setIsExpanded((prev) => !prev); + }; + + return ( +
+ +
+ ); +}; + + +const EsittelytPage: NextPage = ({ navigationItems, esittelyt }) => { + const [loading, setLoading] = useState(true); + + useEffect(() => { + async function fetchData() { + const data = await fetchContent(EsittelytDocument); + setLoading(false); + } + + fetchData(); + }, []); + + return ( +
+ + Turun Wappuradion Hallitus ja Tiimivastaavat + + + +
+

Ketä me ollaan?

+ {loading ? ( +

Lataa...

+ ) : ( +
+ {esittelyt.map((esittely, index) => ( + + ))} +
+ )} +
+
+
+ ); +}; + +export const getStaticProps:GetStaticProps = async () => { + const data = await fetchContent(EsittelytDocument); + const navigationItems = await fetchNavigationItems(); + + const items = data?.hallitusJaTiimiesittelyt2024Collection?.items; + const esittelyt: Esittely[] = items + ? items.map((item: any) => ({ + name: item.name || null, + description:{ + json: item.description.json || null + }, + picture: { + url: item.picture?.url || null + }, + index: item.index || 0, + forceOpen: item.forceOpen || false, + className: item.className || '' + })) + : []; + + return { + props:{ + navigationItems, + esittelyt + } + }; +}; + +interface TitleInfoProps { + esittely: Esittely + isExpanded: boolean + index: number +} + +const TitleInfo = ({ esittely, isExpanded, index }: TitleInfoProps) => { + return ( +
+

+ {esittely.name} +

+
+ ); +}; + +interface DescriptionsProps { + esittely: Esittely + isExpanded: boolean +} + +const Descriptions = ({ esittely, isExpanded }: DescriptionsProps) => { + + return ( +
+

{esittely.name}

+
+ {esittely.description && esittely.description.json ? ( + documentToReactComponents(esittely.description.json) + ) : null} +
+
+ ); +}; + +interface ShowImageProps { + esittely: Esittely; + isExpanded: boolean; +} + +const ShowImage = ({ esittely, isExpanded }: ShowImageProps) => { + const { picture, name } = esittely; + const url = picture.url; + + return ( +
+ {name +
+ ); +}; + +export default EsittelytPage; From 4b00264ae4e7d079aaa31dedf4612677c98084b3 Mon Sep 17 00:00:00 2001 From: niemisami Date: Mon, 11 Mar 2024 21:54:35 +0200 Subject: [PATCH 02/13] Install eslint rule for imports and use setup path aliases --- .eslintrc.json | 30 +++++++++++++++++++++++++++--- package-lock.json | 17 +++++++++++++++++ package.json | 1 + tsconfig.json | 5 ++++- 4 files changed, 49 insertions(+), 4 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 2ac19f7..b833726 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,6 +1,30 @@ { - "extends": ["next", "prettier"], + "extends": [ + "next", + "prettier" + ], + "plugins": [ + "simple-import-sort" + ], "rules": { - "semi": 2 + "semi": 2, + "simple-import-sort/imports": [ + 2, + { + "groups": [ + [ + "^\\u0000", // Side effect imports. + "^react.*", + "^next.*", + "^node:", + "^@?\\w" // Things that start with a letter (or digit or underscore), or `@` followed by a letter. + ], + [ + "^", // Absolute imports and other imports such as `@/foo`. Anything not matched in another group. + "^\\." // Anything that starts with a dot. + ] + ] + } + ] } -} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 22314ea..eaf730c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "eslint": "^8.9.0", "eslint-config-next": "^12.0.10", "eslint-config-prettier": "^8.3.0", + "eslint-plugin-simple-import-sort": "^12.0.0", "graphql-let": "^0.18.4", "postcss": "^8.4.6", "prettier": "^2.5.1", @@ -6105,6 +6106,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/eslint-plugin-simple-import-sort": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.0.0.tgz", + "integrity": "sha512-8o0dVEdAkYap0Cn5kNeklaKcT1nUsa3LITWEuFk3nJifOoD+5JQGoyDUW2W/iPWwBsNBJpyJS9y4je/BgxLcyQ==", + "dev": true, + "peerDependencies": { + "eslint": ">=5.0.0" + } + }, "node_modules/eslint-scope": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", @@ -18155,6 +18165,13 @@ "dev": true, "requires": {} }, + "eslint-plugin-simple-import-sort": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.0.0.tgz", + "integrity": "sha512-8o0dVEdAkYap0Cn5kNeklaKcT1nUsa3LITWEuFk3nJifOoD+5JQGoyDUW2W/iPWwBsNBJpyJS9y4je/BgxLcyQ==", + "dev": true, + "requires": {} + }, "eslint-scope": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", diff --git a/package.json b/package.json index d8fc9c5..3f2a82d 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "eslint": "^8.9.0", "eslint-config-next": "^12.0.10", "eslint-config-prettier": "^8.3.0", + "eslint-plugin-simple-import-sort": "^12.0.0", "graphql-let": "^0.18.4", "postcss": "^8.4.6", "prettier": "^2.5.1", diff --git a/tsconfig.json b/tsconfig.json index d89efa8..fcbcafa 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,10 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "noImplicitAny": true + "noImplicitAny": true, + "paths": { + "@/*": ["*"] + } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules", ".cache"] From 535b71f657f882593aa61834cc332f9bc5c47dbd Mon Sep 17 00:00:00 2001 From: niemisami Date: Mon, 11 Mar 2024 21:56:08 +0200 Subject: [PATCH 03/13] Sort imports by react/next/packages, @/ -path aliases + relative imports --- .eslintrc.json | 11 +++------- archiver/archive.ts | 6 +++++- archiver/archiveCrawlers.ts | 6 +++--- components/ShoutBox/messageformatter.tsx | 1 + components/ShoutBox/messageinput.tsx | 1 + components/ShoutBox/nameformatter.tsx | 2 +- components/ShoutBox/nameinput.tsx | 1 + components/ShoutBox/shoutbox.tsx | 6 +++--- components/button.tsx | 2 +- components/calendar.tsx | 4 ++-- components/controls.tsx | 2 +- components/footer.tsx | 10 ++++----- components/hero.tsx | 8 ++++---- components/menu.tsx | 2 +- components/player.tsx | 10 ++++----- components/playerControlPanel.tsx | 2 +- components/responsiveShowlist.tsx | 8 ++++---- components/richtext.tsx | 4 ++-- components/showcard.tsx | 6 +++--- components/showlist.tsx | 6 +++--- components/showlistMap.tsx | 2 +- components/videoPlayer.tsx | 3 ++- components/widescreen-card.tsx | 2 +- contentful/client.ts | 1 + pages/[...slug].tsx | 18 ++++++++-------- pages/_app.tsx | 10 ++++----- pages/_document.tsx | 2 +- pages/api/archiver.ts | 3 ++- pages/arkisto/[showlistId].tsx | 20 +++++++++--------- pages/arkisto/index.tsx | 16 +++++++-------- pages/index.tsx | 26 ++++++++++++------------ pages/metadata.tsx | 6 +++--- pages/vuosijuhlat.tsx | 2 +- scripts/google/client.ts | 7 ++++--- 34 files changed, 111 insertions(+), 105 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index b833726..2546ad0 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,11 +1,6 @@ { - "extends": [ - "next", - "prettier" - ], - "plugins": [ - "simple-import-sort" - ], + "extends": ["next", "prettier"], + "plugins": ["simple-import-sort"], "rules": { "semi": 2, "simple-import-sort/imports": [ @@ -27,4 +22,4 @@ } ] } -} \ No newline at end of file +} diff --git a/archiver/archive.ts b/archiver/archive.ts index 0a7ffc6..053e403 100644 --- a/archiver/archive.ts +++ b/archiver/archive.ts @@ -1,4 +1,8 @@ -import { Show, Showlist, showsToGroups } from 'scripts/google/showlistHelpers'; +import { + Show, + Showlist, + showsToGroups, +} from '@/scripts/google/showlistHelpers'; const showlistBaseUrl = process.env.ARCHIVE_SOURCE_URL; const emptyResponse = { showsByDate: [], weekKeys: {} } as const; diff --git a/archiver/archiveCrawlers.ts b/archiver/archiveCrawlers.ts index 4f5c4bc..e402219 100644 --- a/archiver/archiveCrawlers.ts +++ b/archiver/archiveCrawlers.ts @@ -1,9 +1,9 @@ -import { parseSheetToShowList } from 'scripts/google/client'; -import { GoogleConfigSheets, getSheet } from 'scripts/google/google'; import { mkdirSync } from 'node:fs'; import fs from 'node:fs/promises'; import path from 'node:path'; -import { getImagePath } from 'utils/fileHelpers'; + +import { parseSheetToShowList } from '@/scripts/google/client'; +import { getSheet, GoogleConfigSheets } from '@/scripts/google/google'; export const archiveOldShowlists = async () => { // NOTE: Uncomment for archiving google sheet data diff --git a/components/ShoutBox/messageformatter.tsx b/components/ShoutBox/messageformatter.tsx index f7e6367..459e15c 100644 --- a/components/ShoutBox/messageformatter.tsx +++ b/components/ShoutBox/messageformatter.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import NameFormatter from './nameformatter'; interface MessageFormatterProps { diff --git a/components/ShoutBox/messageinput.tsx b/components/ShoutBox/messageinput.tsx index e3534e5..a6c7668 100644 --- a/components/ShoutBox/messageinput.tsx +++ b/components/ShoutBox/messageinput.tsx @@ -1,5 +1,6 @@ import React, { ChangeEvent, Component, useEffect, useState } from 'react'; import { AiOutlineSend } from 'react-icons/ai'; + import NameFormatter from './nameformatter'; import TextField from './textfield'; diff --git a/components/ShoutBox/nameformatter.tsx b/components/ShoutBox/nameformatter.tsx index e6ecaaf..440d5bc 100644 --- a/components/ShoutBox/nameformatter.tsx +++ b/components/ShoutBox/nameformatter.tsx @@ -1,6 +1,6 @@ -import { format } from 'date-fns'; import React from 'react'; import Image from 'next/image'; +import { format } from 'date-fns'; interface NameFormatterProps { name: string; diff --git a/components/ShoutBox/nameinput.tsx b/components/ShoutBox/nameinput.tsx index f12951b..95560ea 100644 --- a/components/ShoutBox/nameinput.tsx +++ b/components/ShoutBox/nameinput.tsx @@ -1,4 +1,5 @@ import React, { ChangeEvent, useState } from 'react'; + import TextField from './textfield'; const isButtonDisabled = (name: string) => name === ''; diff --git a/components/ShoutBox/shoutbox.tsx b/components/ShoutBox/shoutbox.tsx index 8e4cce1..3fffaae 100644 --- a/components/ShoutBox/shoutbox.tsx +++ b/components/ShoutBox/shoutbox.tsx @@ -1,10 +1,10 @@ -import React, { useState, useEffect, useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { GrFormClose } from 'react-icons/gr'; +import useShoutBoxAndVideo from '../../hooks/useShoutboxAndVideo'; +import MessageFormatter from './messageformatter'; import MessageInput from './messageinput'; import NameInput from './nameinput'; -import MessageFormatter from './messageformatter'; -import useShoutBoxAndVideo from '../../hooks/useShoutboxAndVideo'; const wsURL = process.env.NEXT_PUBLIC_SHOUTBOX_SOURCE || 'ws://localhost:3030'; diff --git a/components/button.tsx b/components/button.tsx index bb929f6..352406c 100644 --- a/components/button.tsx +++ b/components/button.tsx @@ -1,5 +1,5 @@ -import Link from 'next/link'; import { FC, ReactNode } from 'react'; +import Link from 'next/link'; const buttonStyle = 'bg-teal px-6 md:px-8 py-2 md:py-3 text-blue font-bold hover:bg-coral transition ease-in-out rounded'; diff --git a/components/calendar.tsx b/components/calendar.tsx index a275531..00d5616 100644 --- a/components/calendar.tsx +++ b/components/calendar.tsx @@ -1,5 +1,5 @@ -import { FC, useState, useEffect } from 'react'; -import { startOfDay, format, parseISO, isSameDay } from 'date-fns'; +import { FC, useEffect, useState } from 'react'; +import { format, isSameDay, parseISO, startOfDay } from 'date-fns'; import fi from 'date-fns/locale/fi'; // Fetch next events but not more than 6 months from now diff --git a/components/controls.tsx b/components/controls.tsx index 144f055..72d5756 100644 --- a/components/controls.tsx +++ b/components/controls.tsx @@ -1,4 +1,4 @@ -import { FiPlay, FiPause, FiVolumeX, FiVolume2 } from 'react-icons/fi'; +import { FiPause, FiPlay, FiVolume2, FiVolumeX } from 'react-icons/fi'; import VolumeSlider from './volumeSlider'; diff --git a/components/footer.tsx b/components/footer.tsx index 153d186..cfd5cfe 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -1,14 +1,14 @@ -import Image from 'next/image'; -import Link from 'next/link'; import { - AiOutlineInstagram, AiFillFacebook, - AiOutlineMail, AiFillGithub, + AiOutlineInstagram, + AiOutlineMail, } from 'react-icons/ai'; import { FaDiscord, FaTelegramPlane } from 'react-icons/fa'; +import Image from 'next/image'; +import Link from 'next/link'; -import { NavigationItem } from 'contentful/client'; +import { NavigationItem } from '@/contentful/client'; interface FooterProps { navigationItems: NavigationItem[]; diff --git a/components/hero.tsx b/components/hero.tsx index 85716d0..eaec629 100644 --- a/components/hero.tsx +++ b/components/hero.tsx @@ -1,11 +1,11 @@ +import { FC, useState } from 'react'; import Image from 'next/image'; import Link from 'next/link'; -import { FC, useState } from 'react'; -import { contentfulImageLoader } from 'contentful/contentfulImageLoader'; -import { LinkButton } from './button'; -import { NavigationItem } from 'contentful/client'; +import { NavigationItem } from '@/contentful/client'; +import { contentfulImageLoader } from '@/contentful/contentfulImageLoader'; import heroImage from '../public/hero.webp'; +import { LinkButton } from './button'; import Hamburger from './hamburger/hamburger'; import Menu from './menu'; diff --git a/components/menu.tsx b/components/menu.tsx index cd54c21..b244ef6 100644 --- a/components/menu.tsx +++ b/components/menu.tsx @@ -1,6 +1,6 @@ import Link from 'next/link'; -import { NavigationItem } from 'contentful/client'; +import { NavigationItem } from '@/contentful/client'; interface MenuProps { navigationItems: NavigationItem[]; diff --git a/components/player.tsx b/components/player.tsx index 6c7e4b0..5f1742a 100644 --- a/components/player.tsx +++ b/components/player.tsx @@ -1,12 +1,12 @@ -import Image from 'next/image'; import { useEffect, useState } from 'react'; +import { FiMessageSquare, FiPause, FiPlay, FiVideo } from 'react-icons/fi'; +import Image from 'next/image'; import { format } from 'date-fns'; -import testcard from '../public/testcard.webp'; +import useShoutBoxAndVideo from '@/hooks/useShoutboxAndVideo'; +import { Show } from '@/scripts/google/showlistHelpers'; import placeholderImage from '../public/kuva_puuttuu_v2.jpeg'; -import useShoutBoxAndVideo from 'hooks/useShoutboxAndVideo'; -import { FiPause, FiPlay, FiMessageSquare, FiVideo } from 'react-icons/fi'; -import { Show } from 'scripts/google/showlistHelpers'; +import testcard from '../public/testcard.webp'; const SHOW_REFRESH_TIME = 10000; // 10 seconds diff --git a/components/playerControlPanel.tsx b/components/playerControlPanel.tsx index 53c007b..c6dd0a6 100644 --- a/components/playerControlPanel.tsx +++ b/components/playerControlPanel.tsx @@ -1,4 +1,4 @@ -import useMetadata from 'hooks/useMetadata'; +import useMetadata from '@/hooks/useMetadata'; import Controls from './controls'; interface PlayerControlPanelProps { diff --git a/components/responsiveShowlist.tsx b/components/responsiveShowlist.tsx index 14081c2..4031983 100644 --- a/components/responsiveShowlist.tsx +++ b/components/responsiveShowlist.tsx @@ -1,10 +1,10 @@ -import { format, parse } from 'date-fns'; -import fi from 'date-fns/locale/fi'; import { Dispatch, SetStateAction, useState } from 'react'; import { BsArrowLeft, BsArrowRight } from 'react-icons/bs'; +import { format, parse } from 'date-fns'; +import fi from 'date-fns/locale/fi'; -import { ShowCard } from 'components/showcard'; -import { Show } from 'scripts/google/showlistHelpers'; +import { ShowCard } from '@/components/showcard'; +import { Show } from '@/scripts/google/showlistHelpers'; interface NavButton { value: string | null; diff --git a/components/richtext.tsx b/components/richtext.tsx index 531cab8..34f5d2d 100644 --- a/components/richtext.tsx +++ b/components/richtext.tsx @@ -1,10 +1,10 @@ import React, { FC } from 'react'; -import { MARKS, BLOCKS, INLINES } from '@contentful/rich-text-types'; +import Image from 'next/image'; import { documentToReactComponents, Options, } from '@contentful/rich-text-react-renderer'; -import Image from 'next/image'; +import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types'; import { contentfulImageLoader } from '../contentful/contentfulImageLoader'; import { LinkButton } from './button'; diff --git a/components/showcard.tsx b/components/showcard.tsx index 76a392a..fb65bff 100644 --- a/components/showcard.tsx +++ b/components/showcard.tsx @@ -1,10 +1,10 @@ +import { useState } from 'react'; +import Image from 'next/image'; import { format } from 'date-fns'; import fi from 'date-fns/locale/fi'; -import Image from 'next/image'; -import { useState } from 'react'; +import { Show } from '@/scripts/google/showlistHelpers'; import placeholderImage from '../public/kuva_puuttuu_v2.jpeg'; -import { Show } from 'scripts/google/showlistHelpers'; interface ShowCard { show: Show; diff --git a/components/showlist.tsx b/components/showlist.tsx index 3ecd50e..52321b5 100644 --- a/components/showlist.tsx +++ b/components/showlist.tsx @@ -1,10 +1,10 @@ import { useState } from 'react'; -import { Show } from 'scripts/google/showlistHelpers'; +import { useViewport } from '@/hooks/useViewport'; +import { Show } from '@/scripts/google/showlistHelpers'; +import { ModeButton } from './button'; import ResponsiveShowlist from './responsiveShowlist'; import ShowlistMap from './showlistMap'; -import { ModeButton } from './button'; -import { useViewport } from 'hooks/useViewport'; interface ShowlistProps { showsByDate: { diff --git a/components/showlistMap.tsx b/components/showlistMap.tsx index 9d4e736..16b5981 100644 --- a/components/showlistMap.tsx +++ b/components/showlistMap.tsx @@ -3,7 +3,7 @@ import { differenceInMinutes, format, parse } from 'date-fns'; import fi from 'date-fns/locale/fi'; import { head, keys } from 'ramda'; -import { Show } from 'scripts/google/showlistHelpers'; +import { Show } from '@/scripts/google/showlistHelpers'; import { ModeButton } from './button'; import { ShowCard } from './showcard'; import { WideScreencard } from './widescreen-card'; diff --git a/components/videoPlayer.tsx b/components/videoPlayer.tsx index c5e7d4d..fabc11a 100644 --- a/components/videoPlayer.tsx +++ b/components/videoPlayer.tsx @@ -1,6 +1,7 @@ -import useShoutBoxAndVideo from 'hooks/useShoutboxAndVideo'; import { GrFormClose } from 'react-icons/gr'; +import useShoutBoxAndVideo from '@/hooks/useShoutboxAndVideo'; + const VideoPlayer = () => { const { videoOpen, setVideoOpen } = useShoutBoxAndVideo(); diff --git a/components/widescreen-card.tsx b/components/widescreen-card.tsx index 10e1287..37f5a1f 100644 --- a/components/widescreen-card.tsx +++ b/components/widescreen-card.tsx @@ -1,4 +1,4 @@ -import { Color } from 'scripts/google/showlistHelpers'; +import { Color } from '@/scripts/google/showlistHelpers'; interface WideScreenCardProps { text: string; diff --git a/contentful/client.ts b/contentful/client.ts index 68f6ec6..6c3cce4 100644 --- a/contentful/client.ts +++ b/contentful/client.ts @@ -4,6 +4,7 @@ import { InMemoryCache, NormalizedCacheObject, } from '@apollo/client'; + import { NavigationItemsDocument, NavigationItemsQuery, diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx index ad5d58e..c0daf21 100644 --- a/pages/[...slug].tsx +++ b/pages/[...slug].tsx @@ -1,22 +1,22 @@ import { GetStaticPaths, GetStaticProps, NextPage } from 'next'; import Head from 'next/head'; +import Footer from '@/components/footer'; +import Hero from '@/components/hero'; +import RichText from '@/components/richtext'; import { fetchContent, fetchNavigationItems, NavigationItem, -} from 'contentful/client'; -import RichText from 'components/richtext'; -import { - ContentPagePathsDocument, - ContentPagePathsQuery, -} from 'contentful/graphql/contentPagePaths.graphql'; +} from '@/contentful/client'; import { ContentPageDocument, ContentPageQuery, -} from 'contentful/graphql/contentPage.graphql'; -import Hero from 'components/hero'; -import Footer from 'components/footer'; +} from '@/contentful/graphql/contentPage.graphql'; +import { + ContentPagePathsDocument, + ContentPagePathsQuery, +} from '@/contentful/graphql/contentPagePaths.graphql'; interface ContentPageProps { name: string; diff --git a/pages/_app.tsx b/pages/_app.tsx index 92bb4f4..88513a2 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,11 +1,11 @@ +import 'tailwindcss/tailwind.css'; import { createRef, useState } from 'react'; import { AppProps } from 'next/app'; -import 'tailwindcss/tailwind.css'; -import PlayerControlPanel from 'components/playerControlPanel'; -import { ShoutBoxAndVideoProvider } from 'hooks/useShoutboxAndVideo'; -import { ChatWrapper } from 'components/ShoutBox/shoutbox'; -import VideoPlayer from 'components/videoPlayer'; +import PlayerControlPanel from '@/components/playerControlPanel'; +import { ChatWrapper } from '@/components/ShoutBox/shoutbox'; +import VideoPlayer from '@/components/videoPlayer'; +import { ShoutBoxAndVideoProvider } from '@/hooks/useShoutboxAndVideo'; const AUDIO_STREAM_URL = 'https://player.turunwappuradio.com/wappuradio.mp3'; diff --git a/pages/_document.tsx b/pages/_document.tsx index bcb4ae6..ce59514 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,4 +1,4 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document'; +import Document, { Head, Html, Main, NextScript } from 'next/document'; // A custom Document for Next.js to inject Tailwind styles to the body. class MyDocument extends Document { diff --git a/pages/api/archiver.ts b/pages/api/archiver.ts index c2f15e7..7b1b421 100644 --- a/pages/api/archiver.ts +++ b/pages/api/archiver.ts @@ -1,6 +1,7 @@ -import { archiveOldShowlists } from 'archiver/archiveCrawlers'; import type { NextApiRequest, NextApiResponse } from 'next'; +import { archiveOldShowlists } from '@/archiver/archiveCrawlers'; + type ResponseData = { message: string; }; diff --git a/pages/arkisto/[showlistId].tsx b/pages/arkisto/[showlistId].tsx index 75fd90d..6fbb917 100644 --- a/pages/arkisto/[showlistId].tsx +++ b/pages/arkisto/[showlistId].tsx @@ -1,23 +1,23 @@ +import { BsArrowLeft } from 'react-icons/bs'; import { GetStaticPaths, GetStaticProps, NextPage } from 'next'; import Head from 'next/head'; +import Link from 'next/link'; -import { ShowlistPathsDocument } from 'contentful/graphql/showlistPaths.graphql'; +import { fetchArchivedShowlist } from '@/archiver/archive'; +import Hero from '@/components/hero'; +import { Showlist } from '@/components/showlist'; import { fetchContent, fetchNavigationItems, NavigationItem, -} from 'contentful/client'; -import { ShowlistPathsQuery } from 'contentful/graphql/showlistPaths.graphql'; +} from '@/contentful/client'; import { ShowlistPageDocument, ShowlistPageQuery, -} from 'contentful/graphql/showlistPage.graphql'; -import Hero from 'components/hero'; -import { Showlist } from 'components/showlist'; -import { BsArrowLeft } from 'react-icons/bs'; -import Link from 'next/link'; -import { fetchArchivedShowlist } from 'archiver/archive'; -import { Show } from 'scripts/google/showlistHelpers'; +} from '@/contentful/graphql/showlistPage.graphql'; +import { ShowlistPathsDocument } from '@/contentful/graphql/showlistPaths.graphql'; +import { ShowlistPathsQuery } from '@/contentful/graphql/showlistPaths.graphql'; +import { Show } from '@/scripts/google/showlistHelpers'; interface ShowListPageProps { name: string; diff --git a/pages/arkisto/index.tsx b/pages/arkisto/index.tsx index fa75154..75f0f2b 100644 --- a/pages/arkisto/index.tsx +++ b/pages/arkisto/index.tsx @@ -1,21 +1,21 @@ +import { BsArrowRight } from 'react-icons/bs'; import { GetStaticProps, NextPage } from 'next'; import Head from 'next/head'; -import { BsArrowRight } from 'react-icons/bs'; +import Image from 'next/image'; +import Link from 'next/link'; -import Hero from 'components/hero'; +import Footer from '@/components/footer'; +import Hero from '@/components/hero'; import { fetchContent, fetchNavigationItems, NavigationItem, -} from 'contentful/client'; +} from '@/contentful/client'; +import { contentfulImageLoader } from '@/contentful/contentfulImageLoader'; import { ArchivePageDocument, ArchivePageQuery, -} from 'contentful/graphql/archivePage.graphql'; -import Image from 'next/image'; -import { contentfulImageLoader } from 'contentful/contentfulImageLoader'; -import Footer from 'components/footer'; -import Link from 'next/link'; +} from '@/contentful/graphql/archivePage.graphql'; interface ShowList { id?: string; diff --git a/pages/index.tsx b/pages/index.tsx index 11cc779..2dd18fa 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,22 +1,22 @@ -import Head from 'next/head'; import { GetStaticProps, NextPage } from 'next'; +import Head from 'next/head'; +import Image from 'next/image'; +import Calendar from '@/components/calendar'; +import Footer from '@/components/footer'; +import Hero from '@/components/hero'; +import RichText from '@/components/richtext'; +import Sponsors, { ISponsorData } from '@/components/sponsors'; import { fetchContent, fetchNavigationItems, NavigationItem, -} from 'contentful/client'; -import { contentfulImageLoader } from 'contentful/contentfulImageLoader'; -import RichText from 'components/richtext'; -import Hero from 'components/hero'; -import { IndexDocument, IndexQuery } from 'contentful/graphql/index.graphql'; -import Footer from 'components/footer'; -import Image from 'next/image'; -import Calendar from 'components/calendar'; -import Sponsors, { ISponsorData } from 'components/sponsors'; -// import { Showlist } from 'components/showlist'; -// import Player from 'components/player'; -// import { fetchShowlist } from 'scripts/google/client'; +} from '@/contentful/client'; +import { contentfulImageLoader } from '@/contentful/contentfulImageLoader'; +import { IndexDocument, IndexQuery } from '@/contentful/graphql/index.graphql'; +// import { Showlist } from '@/components/showlist'; +// import Player from '@/components/player'; +// import { fetchShowlist } from '@/scripts/google/client'; const isPlayerLive = process.env.NEXT_PUBLIC_PLAYER_MODE === 'live'; diff --git a/pages/metadata.tsx b/pages/metadata.tsx index c4b12cc..350ec65 100644 --- a/pages/metadata.tsx +++ b/pages/metadata.tsx @@ -1,8 +1,8 @@ -import { NextPage } from 'next'; import { FormEvent, useState } from 'react'; +import { NextPage } from 'next'; -import { Input } from 'components/input'; -import { Button } from 'components/button'; +import { Button } from '@/components/button'; +import { Input } from '@/components/input'; const Metadata: NextPage = () => { const [loading, setLoading] = useState(false); diff --git a/pages/vuosijuhlat.tsx b/pages/vuosijuhlat.tsx index f0bf47e..5e6037d 100644 --- a/pages/vuosijuhlat.tsx +++ b/pages/vuosijuhlat.tsx @@ -1,5 +1,5 @@ -import { useRouter } from 'next/router'; import { useEffect } from 'react'; +import { useRouter } from 'next/router'; const Vuosijuhlat = () => { const { push } = useRouter(); diff --git a/scripts/google/client.ts b/scripts/google/client.ts index 6162946..d54febb 100644 --- a/scripts/google/client.ts +++ b/scripts/google/client.ts @@ -1,13 +1,14 @@ +import { Color, Show, Showlist, showsToGroups } from './showlistHelpers'; import { sheets_v4 } from '@googleapis/sheets'; import { addMilliseconds, formatISO, getHours } from 'date-fns'; -import { getFile, getSheet } from 'scripts/google/google'; + +import { getFile, getSheet } from '@/scripts/google/google'; import { doesFileExist, ensureDirectoryExists, getImagePath, saveArrayBufferToFile, -} from 'utils/fileHelpers'; -import { Color, Show, Showlist, showsToGroups } from './showlistHelpers'; +} from '@/utils/fileHelpers'; const NEXT_URL = '/showlist' as const; const FILE_URL = `./public${NEXT_URL}` as const; From f885af7d49936cc084f00025f593a0cd128b3b50 Mon Sep 17 00:00:00 2001 From: ebetoi Date: Sat, 23 Mar 2024 13:51:43 +0200 Subject: [PATCH 04/13] Esittelyt fixes --- contentful/graphql/esittelytPage.graphql | 4 +- pages/esittelyt.tsx | 172 ++++++++++------------- 2 files changed, 75 insertions(+), 101 deletions(-) diff --git a/contentful/graphql/esittelytPage.graphql b/contentful/graphql/esittelytPage.graphql index 86f77c8..747836c 100644 --- a/contentful/graphql/esittelytPage.graphql +++ b/contentful/graphql/esittelytPage.graphql @@ -1,5 +1,5 @@ query esittelyt { - hallitusJaTiimiesittelyt2024Collection { + presentationCollection { items { name description { @@ -10,4 +10,4 @@ query esittelyt { } } } -} \ No newline at end of file +} diff --git a/pages/esittelyt.tsx b/pages/esittelyt.tsx index 1714492..42a631f 100644 --- a/pages/esittelyt.tsx +++ b/pages/esittelyt.tsx @@ -1,48 +1,48 @@ -import { EsittelytDocument, EsittelytQuery } from 'contentful/graphql/esittelytPage.graphql'; -import { fetchContent, fetchNavigationItems, NavigationItem } from 'contentful/client'; -import { contentfulImageLoader } from 'contentful/contentfulImageLoader'; -//import { props } from 'ramda'; - +import { useEffect, useState } from 'react'; import { GetStaticProps, NextPage } from 'next'; import Head from 'next/head'; import Image from 'next/image'; -import Link from 'next/link'; -import { documentToReactComponents } from '@contentful/rich-text-react-renderer'; -import { Document } from '@contentful/rich-text-types'; +import { + EsittelytDocument, + EsittelytQuery, +} from 'contentful/graphql/esittelytPage.graphql'; +import { + fetchContent, + fetchNavigationItems, + NavigationItem, +} from 'contentful/client'; +import { documentToReactComponents } from '@contentful/rich-text-react-renderer'; import Footer from 'components/footer'; import Hero from 'components/hero'; -import { useEffect, useState } from 'react'; - interface EsittelytProps { navigationItems?: NavigationItem[] | null; - esittelyt:Esittely[]; + esittelyt: Esittely[]; } interface Esittely { - name?:string | null - description?: any - index: number - picture?:{ - url?:string | null - } - forceOpen?: boolean - className?: string + name?: string | null; + description?: any; + picture?: { + url?: string | null; + }; + forceOpen?: boolean; + className?: string; } const ExhibitionListCard: React.FC<{ esittely: Esittely }> = ({ esittely }) => { - const { name, description, index, picture, forceOpen, className} = esittely; - const [isExpanded, setIsExpanded] = useState(forceOpen ?? false); + const { name, description, picture, className } = esittely; + const [isExpanded, setIsExpanded] = useState(false); const handleClick = () => { setIsExpanded((prev) => !prev); }; return (
= ({ esittely }) => { }`} onClick={handleClick} > - + - +
); }; - -const EsittelytPage: NextPage = ({ navigationItems, esittelyt }) => { - const [loading, setLoading] = useState(true); - - useEffect(() => { - async function fetchData() { - const data = await fetchContent(EsittelytDocument); - setLoading(false); - } - - fetchData(); - }, []); +const EsittelytPage: NextPage = ({ + navigationItems, + esittelyt, +}) => { + const data = fetchContent(EsittelytDocument); return ( -
- - Turun Wappuradion Hallitus ja Tiimivastaavat - + + Turun Wappuradion Hallitus ja Tiimivastaavat + + + - - -
-

Ketä me ollaan?

- {loading ? ( -

Lataa...

- ) : ( +
+

Ketä me ollaan?

+ {
- {esittelyt.map((esittely, index) => ( - + {esittelyt.map((esittely) => ( + ))}
- )} -
-
-
+ } + +