Skip to content

Commit bcbdfa5

Browse files
soup-bowlsoup-bowl
committed
Banners.
1 parent bc1d31a commit bcbdfa5

File tree

8 files changed

+62
-26
lines changed

8 files changed

+62
-26
lines changed

‎frontend/src/components/InfoBanners.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react"
2+
import { IonToolbar, IonTitle } from "@ionic/react"
3+
import { useOnlineStatus } from "../hooks"
4+
5+
const InfoBanners: React.FC = () => {
6+
const isOnline = useOnlineStatus()
7+
const betaBanner = import.meta.env.VITE_BETA_BANNER
8+
9+
return (
10+
<>
11+
{betaBanner && (
12+
<IonToolbar className="info-banner" color="warning">
13+
<IonTitle>{betaBanner}</IonTitle>
14+
</IonToolbar>
15+
)}
16+
{!isOnline && (
17+
<IonToolbar className="info-banner" color="dark">
18+
<IonTitle>Offline</IonTitle>
19+
</IonToolbar>
20+
)}
21+
</>
22+
)
23+
}
24+
25+
export default InfoBanners

‎frontend/src/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { default as AlbumGrid } from "./AlbumGrid"
22
export { AlbumList, AlbumListGroups } from "./AlbumList"
33
export { FullpageLoading, FullpageInfo } from "./Fullpage"
4+
export { default as InfoBanners } from "./InfoBanners"
45
export { default as StatDisplay } from "./StatDisplay"

‎frontend/src/hooks/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { default as useAuth } from "./useAuth"
2+
export { default as useOnlineStatus } from "./useOnlineStatus"
23
export { default as useSettings } from "./useSettings"

‎frontend/src/hooks/useOnlineStatus.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useState, useEffect } from "react"
2+
3+
const useOnlineStatus = () => {
4+
const [isOnline, setIsOnline] = useState(navigator.onLine)
5+
6+
useEffect(() => {
7+
const handleOnline = () => setIsOnline(true)
8+
const handleOffline = () => setIsOnline(false)
9+
10+
window.addEventListener("online", handleOnline)
11+
window.addEventListener("offline", handleOffline)
12+
13+
return () => {
14+
window.removeEventListener("online", handleOnline)
15+
window.removeEventListener("offline", handleOffline)
16+
}
17+
}, [])
18+
19+
return isOnline
20+
}
21+
22+
export default useOnlineStatus

‎frontend/src/pages/Collection.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,16 @@ import {
1414
IonTitle,
1515
IonToolbar,
1616
RefresherEventDetail,
17+
SegmentChangeEventDetail,
1718
useIonActionSheet,
1819
} from "@ionic/react"
20+
import { OverlayEventDetail } from "@ionic/react/dist/types/components/react-component-lib/interfaces"
1921
import { useQuery, useQueryClient } from "@tanstack/react-query"
2022
import { filterOutline, personOutline, pricetagOutline, timeOutline, listOutline, gridOutline } from "ionicons/icons"
2123
import { IReleaseSet, IReleases, getCollectionAndWants } from "../api"
22-
import { FullpageLoading, AlbumGrid, FullpageInfo, AlbumListGroups } from "../components"
24+
import { FullpageLoading, AlbumGrid, FullpageInfo, AlbumListGroups, InfoBanners } from "../components"
2325
import { ProfileModal, ViewAlbumDetails } from "../modal"
24-
import { useAuth, useSettings } from "../hooks"
26+
import { useAuth, useOnlineStatus, useSettings } from "../hooks"
2527
import { masterSort } from "../utils"
2628
import { IReleaseTuple } from "../types"
2729

@@ -73,7 +75,6 @@ const CollectionPage: React.FC = () => {
7375
collected: IReleaseTuple
7476
wanted: IReleaseTuple
7577
}>()
76-
const betaBanner = import.meta.env.VITE_BETA_BANNER
7778

7879
const [{ username, token }] = useAuth()
7980

@@ -176,7 +177,7 @@ const CollectionPage: React.FC = () => {
176177
present({
177178
header: "Sorting",
178179
buttons: filterActionButtons,
179-
onDidDismiss: ({ detail }) => {
180+
onDidDismiss: ({ detail }: CustomEvent<OverlayEventDetail>) => {
180181
if (detail.data.action !== "cancel") {
181182
setFilter(detail.data.action)
182183
}
@@ -189,7 +190,7 @@ const CollectionPage: React.FC = () => {
189190
</IonButtons>
190191
<IonSegment
191192
value={viewState}
192-
onIonChange={(e) => {
193+
onIonChange={(e: CustomEvent<SegmentChangeEventDetail>) => {
193194
const selectedValue = e.detail.value
194195
if (selectedValue === "collection" || selectedValue === "want") {
195196
setViewState(selectedValue)
@@ -206,11 +207,7 @@ const CollectionPage: React.FC = () => {
206207
</IonSegmentButton>
207208
</IonSegment>
208209
</IonToolbar>
209-
{betaBanner && (
210-
<IonToolbar className="beta-banner" color="warning">
211-
<IonTitle>{betaBanner}</IonTitle>
212-
</IonToolbar>
213-
)}
210+
<InfoBanners />
214211
</IonHeader>
215212
<IonContent fullscreen>
216213
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>

‎frontend/src/pages/Search.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from "@ionic/react"
1313
import { useQuery } from "@tanstack/react-query"
1414
import { IReleaseSet, IReleases, getCollectionAndWants } from "../api"
15-
import { AlbumList, FullpageInfo, FullpageLoading } from "../components"
15+
import { AlbumList, FullpageInfo, FullpageLoading, InfoBanners } from "../components"
1616
import { BarcodeScanDialog, ViewAlbumDetails } from "../modal"
1717
import { useAuth, useSettings } from "../hooks"
1818
import { barcodeOutline } from "ionicons/icons"
@@ -23,7 +23,6 @@ const SearchPage: React.FC = () => {
2323
const [modalInfo, setModalInfo] = useState<{ data: IReleases; type: "collection" | "want" } | undefined>(undefined)
2424
const [filterData, setFilterData] = useState<IReleaseSet>({ collection: [], wants: [] })
2525
const [openScanner, setOpenScanner] = useState<boolean>(false)
26-
const betaBanner = import.meta.env.VITE_BETA_BANNER
2726

2827
const [{ username, token }] = useAuth()
2928

@@ -105,11 +104,7 @@ const SearchPage: React.FC = () => {
105104
onIonInput={(ev) => setSearchTerm(ev.target.value?.toLowerCase() ?? "")}
106105
/>
107106
</IonToolbar>
108-
{betaBanner && (
109-
<IonToolbar className="beta-banner" color="warning">
110-
<IonTitle>{betaBanner}</IonTitle>
111-
</IonToolbar>
112-
)}
107+
<InfoBanners />
113108
</IonHeader>
114109
<IonContent fullscreen>
115110
{filterData.collection.length > 0 && (

‎frontend/src/pages/Settings.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,9 @@ import { useState, useEffect } from "react"
2525
import { IReleaseSet } from "../api"
2626
import { useAuth, useSettings } from "../hooks"
2727
import { formatBytes } from "../utils"
28+
import { InfoBanners } from "../components"
2829

2930
const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({ hasUpdate, onUpdate }) => {
30-
const betaBanner = import.meta.env.VITE_BETA_BANNER
31-
3231
const queryClient = useQueryClient()
3332
const history = useHistory()
3433
const [{ username, token }, saveAuth, clearAuth] = useAuth()
@@ -87,11 +86,7 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
8786
</IonButton>
8887
</IonButtons>
8988
</IonToolbar>
90-
{betaBanner && (
91-
<IonToolbar className="beta-banner" color="warning">
92-
<IonTitle>{betaBanner}</IonTitle>
93-
</IonToolbar>
94-
)}
89+
<InfoBanners />
9590
</IonHeader>
9691
<IonContent className="ion-padding">
9792
<IonList inset={true}>

‎frontend/src/theme/variables.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/* For information on how to create your own theme, please see:
22
http://ionicframework.com/docs/theming/ */
33

4-
.beta-banner {
4+
.info-banner {
55
--min-height: 25px;
66
--padding-top: 5px;
77
--padding-bottom: 5px;
88
}
99

10-
.beta-banner ion-title {
10+
.info-banner ion-title {
1111
font-size: 12px;
1212
}

0 commit comments

Comments
 (0)