Moved profile to modal.

Author: soup-bowl

frontend/src/pages/Profile.css renamed to frontend/src/modal/Profile.css

@@ -0,0 +1,87 @@
+import {
+	IonModal,
+	IonHeader,
+	IonToolbar,
+	IonButtons,
+	IonButton,
+	IonTitle,
+	IonContent,
+	IonAvatar,
+	IonCard,
+	IonCardHeader,
+	IonCardSubtitle,
+	IonCardTitle,
+} from "@ionic/react"
+import { useQuery } from "@tanstack/react-query"
+import { hourglass, library, eye } from "ionicons/icons"
+import { IProfile, getProfile } from "../api"
+import { useAuth } from "../hooks"
+import { FullpageInfo, FullpageLoading, StatDisplay } from "../components"
+import "./Profile.css"
+
+const ProfileContent: React.FC = () => {
+	const [{ username, token }] = useAuth()
+
+	const { data, isLoading, isError } = useQuery<IProfile>({
+		queryKey: [`${username}profile`],
+		queryFn: () => getProfile(username ?? "", token ?? ""),
+		staleTime: Infinity,
+	})
+
+	if (!username || isError) {
+		return <FullpageInfo text="An error occurred when loading information." />
+	}
+
+	if (isLoading) {
+		return <FullpageLoading />
+	}
+
+	const yearJoined = new Date(data?.registered ?? 0).getFullYear()
+
+	return (
+		<IonContent className="ion-padding">
+			<div className="avatar-background" style={{ backgroundImage: `url(${data?.banner_url})` }}>
+				<div className="profile-column">
+					<IonAvatar>
+						<img src={data?.avatar_url} />
+					</IonAvatar>
+				</div>
+				<IonCard style={{ textAlign: "center", marginBottom: 50 }}>
+					<IonCardHeader>
+						<IonCardTitle>{data?.username}</IonCardTitle>
+						<IonCardSubtitle>{data?.name}</IonCardSubtitle>
+					</IonCardHeader>
+				</IonCard>
+				<br />
+			</div>
+			<div>
+				<StatDisplay
+					items={[
+						{ icon: hourglass, value: yearJoined, label: "Registered" },
+						{ icon: library, value: data?.num_collection, label: "Collected" },
+						{ icon: eye, value: data?.num_wantlist, label: "Wanted" },
+					]}
+				/>
+			</div>
+		</IonContent>
+	)
+}
+
+const ProfileModal: React.FC<{
+	open: boolean
+	onClose: () => void
+}> = ({ open, onClose }) => (
+	<IonModal isOpen={open}>
+		<IonHeader>
+			<IonToolbar>
+				<IonButtons slot="start">
+					<IonButton onClick={() => onClose()}>Close</IonButton>
+				</IonButtons>
+				<IonTitle>Profile</IonTitle>
+			</IonToolbar>
+		</IonHeader>
+		<ProfileContent />
+	</IonModal>
+)
+
+export default ProfileModal

frontend/src/modal/Profile.tsx

@@ -1,2 +1,3 @@
-export { default as ViewAlbumDetails } from "./ViewAlbumDetails"
 export { default as BarcodeScanDialog } from "./Barcode"
+export { default as ProfileModal } from "./Profile"
+export { default as ViewAlbumDetails } from "./ViewAlbumDetails"

frontend/src/modal/index.ts

@@ -20,7 +20,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { filterOutline, personOutline, pricetagOutline, timeOutline, listOutline, gridOutline } from "ionicons/icons"
 import { IReleaseSet, IReleases, getCollectionAndWants } from "../api"
 import { FullpageLoading, AlbumGrid, FullpageInfo, AlbumListGroups } from "../components"
-import { ViewAlbumDetails } from "../modal"
+import { ProfileModal, ViewAlbumDetails } from "../modal"
 import { useAuth, useSettings } from "../hooks"
 import { masterSort } from "../utils"
 import { IReleaseTuple } from "../types"
@@ -67,6 +67,7 @@ const CollectionPage: React.FC = () => {
 	const [layout, setLayout] = useSettings<"grid" | "list">("collectionLayout", "grid")
 	const [modalInfo, setModalInfo] = useState<IReleases | undefined>(undefined)
 	const [loading, setLoading] = useState<{ page: number; pages: number }>({ page: 0, pages: 0 })
+	const [profileModal, setProfileModal] = useState<boolean>(false)
 	const [viewState, setViewState] = useState<"collection" | "want">("collection")
 	const [dataSorted, setDataSorted] = useState<{
 		collected: IReleaseTuple
@@ -153,6 +154,11 @@ const CollectionPage: React.FC = () => {
 		<IonPage>
 			<IonHeader>
 				<IonToolbar>
+					<IonButtons slot="secondary">
+						<IonButton onClick={() => setProfileModal(true)}>
+							<IonIcon slot="icon-only" icon={personOutline} />
+						</IonButton>
+					</IonButtons>
 					<IonButtons slot="primary">
 						<IonButton
 							onClick={() => {
@@ -241,6 +247,7 @@ const CollectionPage: React.FC = () => {
 					/>
 				)}
 			</IonContent>
+			<ProfileModal open={profileModal} onClose={() => setProfileModal(false)} />
 		</IonPage>
 	)
 }

frontend/src/pages/Collection.tsx

@@ -1,4 +1,3 @@
 export { default as CollectionPage } from "./Collection"
-export { default as ProfilePage } from "./Profile"
 export { default as SearchPage } from "./Search"
 export { default as SettingsPage } from "./Settings"