Add QR code display modal and integrate into profile settings (closes #10)

Author: soup-bowl

frontend/package-lock.json

@@ -30,6 +30,7 @@
 		"@types/react-router-dom": "^5.3.3",
 		"idb-keyval": "^6.2.1",
 		"ionicons": "^7.0.0",
+		"qrcode.react": "^4.2.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-router": "^5.3.4",

frontend/package.json

@@ -0,0 +1,29 @@
+import { IonModal, IonHeader, IonToolbar, IonButtons, IonButton, IonTitle, IonContent, IonCard } from "@ionic/react"
+import { QRCodeSVG } from "qrcode.react"
+
+interface DisplayProps {
+	title: string
+	codeContent: string
+	open: boolean
+	onClose: () => void
+}
+
+const QRCodeDialog: React.FC<DisplayProps> = ({ title, codeContent, open, onClose }) => (
+	<IonModal isOpen={open} onDidDismiss={() => onClose()}>
+		<IonHeader>
+			<IonToolbar>
+				<IonTitle>{title}</IonTitle>
+				<IonButtons slot="start">
+					<IonButton onClick={() => onClose()}>Close</IonButton>
+				</IonButtons>
+			</IonToolbar>
+		</IonHeader>
+		<IonContent className="ion-padding">
+			<IonCard style={{ backgroundColor: "white", padding: 20 }}>
+				<QRCodeSVG value={codeContent} width="100%" height="400" />
+			</IonCard>
+		</IonContent>
+	</IonModal>
+)
+
+export default QRCodeDialog

frontend/src/modal/QRCodeDisplay.tsx

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

frontend/src/modal/index.ts

@@ -20,17 +20,22 @@ import {
 	IonAlert,
 	getConfig,
 	IonCardContent,
+	IonButton,
+	IonIcon,
 } from "@ionic/react"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
-import { hourglass, library, eye } from "ionicons/icons"
+import { hourglass, library, eye, qrCodeOutline, qrCodeSharp } from "ionicons/icons"
 import "./Profile.css"
 import { useHistory } from "react-router"
+import { QRCodeDialog } from "@/modal"
+import { useState } from "react"
 
 const SettingsProfilePage: React.FC = () => {
 	const queryClient = useQueryClient()
 	const history = useHistory()
 	const [{ username, accessToken, secretToken }, _, clearAuth] = useAuth()
 	const ionConfig = getConfig()
+	const [openScanner, setOpenScanner] = useState<boolean>(false)
 	const currentMode = ionConfig?.get("mode") || "ios"
 
 	const lightMode = currentMode === "ios" ? "light" : undefined
@@ -67,6 +72,11 @@ const SettingsProfilePage: React.FC = () => {
 					<IonButtons slot="start" collapse={true}>
 						<IonBackButton />
 					</IonButtons>
+					<IonButtons slot="primary">
+						<IonButton onClick={() => setOpenScanner(true)}>
+							<IonIcon slot="icon-only" ios={qrCodeOutline} md={qrCodeSharp} />
+						</IonButton>
+					</IonButtons>
 					<IonTitle>Profile</IonTitle>
 				</IonToolbar>
 				<InfoBanners />
@@ -131,6 +141,12 @@ const SettingsProfilePage: React.FC = () => {
 					]}
 				/>
 			</IonContent>
+			<QRCodeDialog
+				title="Share Profile"
+				codeContent={`https://www.discogs.com/user/${data?.username}`}
+				open={openScanner}
+				onClose={() => setOpenScanner(false)}
+			/>
 		</IonPage>
 	)
 }