-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'dev' into dependabot/npm_and_yarn/eslint-plugin-jsx-a11…
…y-6.8.0
- Loading branch information
Showing
74 changed files
with
2,510 additions
and
364 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
67 changes: 67 additions & 0 deletions
67
packages/frontend/src/api/store/providers/pwa-install-provider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { createContext, useState, useContext, FC, useCallback } from "react"; | ||
| import useEventListener from "src/api/hooks/useEventListener"; | ||
| import { Logger } from "src/api/utils/logging"; | ||
|
|
||
| const PWAInstallContext = createContext<undefined | (() => void)>(undefined); | ||
|
|
||
| const usePWAInstall = () => { | ||
| const [eventRef, setEventRef] = useState<Event | null>(null); | ||
|
|
||
| const handleInstall = useCallback(() => { | ||
| if (eventRef) { | ||
| // @ts-ignore - TODO: fix this type | ||
| eventRef.prompt(); | ||
| // @ts-ignore - TODO: fix this type | ||
| eventRef.userChoice.then((choiceResult) => { | ||
| Logger.debug( | ||
| `PWAInstallProvider::useEventListener: user choice: ${choiceResult.outcome}` | ||
| ); | ||
| if (choiceResult.outcome === "accepted") { | ||
| Logger.debug( | ||
| "PWAInstallProvider::useEventListener: accepted" | ||
| ); | ||
| } else { | ||
| Logger.debug( | ||
| "PWAInstallProvider::useEventListener: dismissed" | ||
| ); | ||
| } | ||
| setEventRef(null); | ||
| }); | ||
| } | ||
| }, [eventRef]); | ||
|
|
||
| // @ts-ignore - TODO: fix this type | ||
| useEventListener("beforeinstallprompt", (e) => { | ||
| Logger.debug( | ||
| "PWAInstallProvider::useEventListener: beforeinstallprompt triggered" | ||
| ); | ||
| e.preventDefault(); | ||
| setEventRef(e); | ||
| }); | ||
|
|
||
| return handleInstall; | ||
| }; | ||
|
|
||
| interface PWAInstallProviderProps { | ||
| children?: React.ReactNode; | ||
| } | ||
|
|
||
| const PWAInstallProvider: FC<PWAInstallProviderProps> = ({ children }) => { | ||
| const value = usePWAInstall(); | ||
| return ( | ||
| <PWAInstallContext.Provider value={value}> | ||
| {children} | ||
| </PWAInstallContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| const usePWAInstallContext = () => { | ||
| const handleInstall = usePWAInstall(); | ||
| const context = useContext(PWAInstallContext); | ||
| if (context === undefined) { | ||
| return handleInstall; | ||
| } | ||
| return context; | ||
| }; | ||
|
|
||
| export { PWAInstallProvider, usePWAInstallContext }; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
packages/frontend/src/containers/dialogs/InstallPWAContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { FC, useState } from "react"; | ||
| import { Button, Modal } from "@alphaday/ui-kit"; | ||
| import { useIsMobile } from "src/api/hooks/useIsMobile"; | ||
| import { usePWAInstallContext } from "src/api/store/providers/pwa-install-provider"; | ||
| import { isPWA } from "src/api/utils/helpers"; | ||
| import { ReactComponent as CloseSVG } from "../../assets/icons/close3.svg"; | ||
| import { ReactComponent as LogoShadowSVG } from "../../assets/icons/logo-shadow.svg"; | ||
|
|
||
| const InstallPWAContainer: FC = () => { | ||
| const handleInstall = usePWAInstallContext(); | ||
| const isMobile = useIsMobile(); | ||
| const [showModal, setShowModal] = useState(!isPWA()); | ||
|
|
||
| const handleCloseDialog = () => setShowModal(false); | ||
|
|
||
| return ( | ||
| <Modal | ||
| size="sm" | ||
| showModal={isMobile && showModal} | ||
| className="p-8 m-8 rounded-xl" | ||
| onClose={handleCloseDialog} | ||
| > | ||
| <div className="flex justify-end"> | ||
| <button | ||
| onClick={handleCloseDialog} | ||
| className="flex items-center justify-center -m-3.5 -mt-7" | ||
| title="close" | ||
| type="button" | ||
| data-testid="alpha-dialog-close-button" | ||
| > | ||
| <CloseSVG className="h-4 w-4 text-primary outline-none" /> | ||
| </button> | ||
| </div> | ||
| <div className="w-full flex flex-col items-center justify-center"> | ||
| <span className="bg-secondaryOrange w-40 h-40 m-5 rounded-full flex flex-col items-center justify-center"> | ||
| <LogoShadowSVG /> | ||
| </span> | ||
| <p className="m-4 text-base font-semibold text-center"> | ||
| Add Alphaday to your Home screen | ||
| </p> | ||
| <Button | ||
| className="w-full bg-secondaryOrange border-secondaryOrange text-base font-semibold p-3 h-fit" | ||
| onClick={handleInstall} | ||
| > | ||
| Install | ||
| </Button> | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default InstallPWAContainer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { FC, ReactNode } from "react"; | ||
| import { NavBottom, NavHeader, ScrollBar } from "@alphaday/ui-kit"; | ||
|
|
||
| const MobileLayout: FC<{ | ||
| children: ReactNode; | ||
| onScroll?: () => void; | ||
| }> = ({ children, onScroll }) => { | ||
| return ( | ||
| <ScrollBar className="h-screen" onScroll={onScroll}> | ||
| <NavHeader avatar={undefined} /> | ||
| {children} | ||
| <NavBottom /> | ||
| </ScrollBar> | ||
| ); | ||
| }; | ||
|
|
||
| export default MobileLayout; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.