This repository has been archived by the owner on Oct 4, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[PAY-1430] "Leaving Audius" Warning for External Links (and createMod…
…al helper) (#3860)
- Loading branch information
1 parent
bee8bd1
commit 7d0e0b3
Showing
23 changed files
with
442 additions
and
38 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
19 changes: 19 additions & 0 deletions
19
packages/common/src/store/ui/leaving-audius-modal/index.ts
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,19 @@ | ||
import { createModal } from '../modals/createModal' | ||
|
||
export type LeavingAudiusModalState = { | ||
link: string | ||
} | ||
|
||
const leavingAudiusModal = createModal<LeavingAudiusModalState>({ | ||
reducerPath: 'leavingAudiusModal', | ||
initialState: { | ||
isOpen: false, | ||
link: '' | ||
}, | ||
sliceSelector: (state) => state.ui.modalsWithState | ||
}) | ||
|
||
export const { | ||
hook: useLeavingAudiusModal, | ||
reducer: leavingAudiusModalReducer | ||
} = leavingAudiusModal |
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,104 @@ | ||
import { useCallback } from 'react' | ||
|
||
import { createSlice, PayloadAction } from '@reduxjs/toolkit' | ||
import { useDispatch, useSelector } from 'react-redux' | ||
|
||
import { CommonState } from 'store/index' | ||
|
||
export type BaseModalState = { | ||
isOpen: boolean | 'closing' | ||
} | ||
|
||
/** | ||
* Creates the necessary actions/reducers/selectors for a modal, | ||
* and returns the reducer to be wired to the store | ||
* and hook to be used in the application. | ||
*/ | ||
export const createModal = <T>({ | ||
reducerPath, | ||
initialState, | ||
sliceSelector | ||
}: { | ||
reducerPath: string | ||
initialState: T & BaseModalState | ||
sliceSelector?: (state: CommonState) => Record<string, any> | ||
}) => { | ||
const slice = createSlice({ | ||
name: `modals/${reducerPath}`, | ||
initialState, | ||
reducers: { | ||
open: (_, action: PayloadAction<T & BaseModalState>) => { | ||
return action.payload | ||
}, | ||
close: (state) => { | ||
state.isOpen = 'closing' | ||
}, | ||
closed: () => { | ||
return { ...initialState, isOpen: false } | ||
} | ||
} | ||
}) | ||
|
||
const selector = (state: CommonState) => { | ||
let baseState: (T & BaseModalState) | undefined | ||
if (sliceSelector) { | ||
baseState = sliceSelector(state)[reducerPath] | ||
} else { | ||
baseState = state[reducerPath] | ||
} | ||
if (!baseState) { | ||
throw new Error( | ||
`State for ${reducerPath} is undefined - did you forget to register the reducer in the store?` | ||
) | ||
} | ||
return baseState | ||
} | ||
|
||
// Need to explicitly retype this because TS got confused | ||
const open = slice.actions.open as ( | ||
state: T & BaseModalState | ||
) => PayloadAction<T & BaseModalState> | ||
|
||
const { close, closed } = slice.actions | ||
/** | ||
* A hook that returns the state of the modal, | ||
* an open callback that opens the modal, | ||
* a close callback that closes it, | ||
* and a closed callback that clears the state | ||
* @returns an object with the state and all three callbacks | ||
*/ | ||
const useModal = () => { | ||
const { isOpen, ...data } = useSelector(selector) | ||
const dispatch = useDispatch() | ||
const onOpen = useCallback( | ||
(state?: T) => { | ||
if (!state) { | ||
dispatch(open({ ...initialState, isOpen: true })) | ||
} else { | ||
dispatch(open({ ...state, isOpen: true })) | ||
} | ||
}, | ||
[dispatch] | ||
) | ||
const onClose = useCallback(() => { | ||
dispatch(close()) | ||
}, [dispatch]) | ||
|
||
const onClosed = useCallback(() => { | ||
dispatch(closed()) | ||
}, [dispatch]) | ||
|
||
return { | ||
isOpen: isOpen === true, | ||
data, | ||
onOpen, | ||
onClose, | ||
onClosed | ||
} | ||
} | ||
|
||
return { | ||
hook: useModal, | ||
reducer: slice.reducer | ||
} | ||
} |
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
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
Oops, something went wrong.