From 9467da74b0a93bcdf48f2044d8324f7c934a714b Mon Sep 17 00:00:00 2001 From: Axel Pettersson Date: Sun, 1 Oct 2023 18:25:25 +0200 Subject: [PATCH] Finish member pages --- apps/web/app/ledamot/[id]/page.tsx | 11 +++- apps/web/app/ledamot/[id]/tabs.tsx | 10 ++- apps/web/app/ledamot/[id]/twitter-feed.tsx | 66 +++++++++++++++++++ apps/web/app/loading.tsx | 26 ++------ apps/web/components/common/loading.tsx | 36 ++++++++++ apps/web/components/common/pagination.tsx | 5 +- .../api/wikidata/get-member-twitter-feed.ts | 32 +++++++++ apps/web/lib/api/wikidata/types.ts | 23 +++++++ apps/web/lib/constants.ts | 2 + 9 files changed, 185 insertions(+), 26 deletions(-) create mode 100644 apps/web/app/ledamot/[id]/twitter-feed.tsx create mode 100644 apps/web/components/common/loading.tsx create mode 100644 apps/web/lib/api/wikidata/get-member-twitter-feed.ts create mode 100644 apps/web/lib/api/wikidata/types.ts diff --git a/apps/web/app/ledamot/[id]/page.tsx b/apps/web/app/ledamot/[id]/page.tsx index 32914e1a8..51988bff3 100644 --- a/apps/web/app/ledamot/[id]/page.tsx +++ b/apps/web/app/ledamot/[id]/page.tsx @@ -11,6 +11,7 @@ import getMemberWithAbsence from "@lib/api/member/get-member-with-absence"; import getMemberDocuments from "@lib/api/documents/get-member-documents"; import Biography from "./biography"; import Tabs from "./tabs"; +import getMemberTwitterFeed from "@lib/api/wikidata/get-member-twitter-feed"; interface PageProps { params: { @@ -40,9 +41,11 @@ export async function generateMetadata({ params: { id } }: PageProps) { export default async function MemberPage({ params: { id } }: PageProps) { const memberPromise = getMemberWithAbsence(id); const memberDocumentsPromise = getMemberDocuments({ id, page: 1 }); - const [member, memberDocuments] = await Promise.all([ + const memberTwitterPromise = getMemberTwitterFeed(id); + const [member, memberDocuments, memberTwitter] = await Promise.all([ memberPromise, memberDocumentsPromise, + memberTwitterPromise, ]); if (!member) { @@ -67,7 +70,11 @@ export default async function MemberPage({ params: { id } }: PageProps) { documentCount={memberDocuments.count} /> - + ); diff --git a/apps/web/app/ledamot/[id]/tabs.tsx b/apps/web/app/ledamot/[id]/tabs.tsx index 18f1db074..d0d17ddde 100644 --- a/apps/web/app/ledamot/[id]/tabs.tsx +++ b/apps/web/app/ledamot/[id]/tabs.tsx @@ -4,6 +4,8 @@ import { Card } from "@components/common/card"; import type { MemberDocuments } from "@lib/api/member/types"; import { useState } from "react"; import Documents from "./documents"; +import type { TwitterResult } from "@lib/api/wikidata/types"; +import TwitterFeed from "./twitter-feed"; enum Tab { Document = "document-tab", @@ -13,9 +15,14 @@ enum Tab { interface Props { memberId: string; initialDocuments: MemberDocuments; + twitterFeed?: TwitterResult; } -export default function Tabs({ memberId, initialDocuments }: Props) { +export default function Tabs({ + memberId, + initialDocuments, + twitterFeed, +}: Props) { const [activeTab, setActiveTab] = useState(Tab.Document); function setTab(event: React.MouseEvent) { @@ -49,6 +56,7 @@ export default function Tabs({ memberId, initialDocuments }: Props) { {activeTab === Tab.Document && ( )} + {activeTab === Tab.Twitter && } ); } diff --git a/apps/web/app/ledamot/[id]/twitter-feed.tsx b/apps/web/app/ledamot/[id]/twitter-feed.tsx new file mode 100644 index 000000000..4da1fa5cb --- /dev/null +++ b/apps/web/app/ledamot/[id]/twitter-feed.tsx @@ -0,0 +1,66 @@ +"use client"; + +import Loading from "@components/common/loading"; +import type { TwitterResult } from "@lib/api/wikidata/types"; +import { useTheme } from "next-themes"; +import { useEffect, useState } from "react"; + +declare global { + interface Window { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + twttr: any; + } +} + +interface Props { + twitterFeed?: TwitterResult; +} + +export default function TwitterFeed({ twitterFeed }: Props) { + const theme = useTheme(); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const twitterHandle = twitterFeed?.twitterHandle.value; + if (twitterHandle) { + setLoading(true); + const container = document.getElementById("twitterContainer"); + if (container) { + container.innerHTML = ""; + } + window.twttr.widgets + .createTimeline( + { + sourceType: "profile", + screenName: twitterHandle, + }, + container, + { + theme: theme.theme, + chrome: "nofooter noborders", + }, + ) + .then(() => { + setLoading(false); + }); + } else { + setLoading(false); + } + }, [theme.theme, twitterFeed?.twitterHandle.value]); + + const twitterHandle = twitterFeed?.twitterHandle.value; + + if (!twitterHandle) { + return

Inget Twitterkonto hittades.

; + } + + return ( + <> +
+ {loading && } + + ); +} diff --git a/apps/web/app/loading.tsx b/apps/web/app/loading.tsx index 83f5a4ab5..ad605dbb3 100644 --- a/apps/web/app/loading.tsx +++ b/apps/web/app/loading.tsx @@ -1,23 +1,5 @@ -export default function Loading() { - return ( -
- - Loading... -
- ); +import Loading from "@components/common/loading"; + +export default function LoadingPage() { + return ; } diff --git a/apps/web/components/common/loading.tsx b/apps/web/components/common/loading.tsx new file mode 100644 index 000000000..1a3e285d6 --- /dev/null +++ b/apps/web/components/common/loading.tsx @@ -0,0 +1,36 @@ +import { twMerge } from "tailwind-merge"; + +interface LoadingProps { + containerClassName?: string; + className?: string; +} + +export default function Loading({ + className, + containerClassName, +}: LoadingProps) { + return ( +
+ + Loading... +
+ ); +} diff --git a/apps/web/components/common/pagination.tsx b/apps/web/components/common/pagination.tsx index bdfe03948..7f60445db 100644 --- a/apps/web/components/common/pagination.tsx +++ b/apps/web/components/common/pagination.tsx @@ -58,7 +58,9 @@ function generatePagination(currentPage: number, max: number) { pagination.push(SeparatorType.SeparatorEnd); } - pagination.push(lastPage); + if (lastPage !== firstPage) { + pagination.push(lastPage); + } return pagination; } @@ -117,6 +119,7 @@ export default function Pagination({