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
[PAY-1430] "Leaving Audius" Warning for External Links (and createModal helper) #3860
Merged
Merged
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
9fe0458
Add UI for LeavingAudius modal
rickyrombo e0cadb6
Launch LeavingAudius modal on all external links
rickyrombo ed92b4f
createModal helper
rickyrombo 0986736
Use createModal for LeavingAudiusModal
rickyrombo a30b699
Remove LeavingAudius from modal list
rickyrombo 0fa2192
Refactor Drawer title to take SVG instead of image
rickyrombo b4fd83e
Add LeavingAudiusDrawer to mobile
rickyrombo 2b20665
Update question w/ circle icon
rickyrombo 061331f
Refactor createModal per CR review
rickyrombo 48444d9
whoops forgot to ctrl s
rickyrombo 26a38e9
Fix typecheck
rickyrombo 95f9da1
Fix error message
rickyrombo 0222ef7
Clamp URL size
rickyrombo ef8884d
unused
rickyrombo File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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 = { | ||
rickyrombo marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
would the plan be to have models just all unified at some point?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah this could use some discussion. We have other modals just toplevel here, so we could do the same and remove this nesting.
could probably also preemptively merge into
modals
by moving existing modals fromModalName: boolean | 'closing'
toModalName: { isOpen: boolean | 'closing' }
🤔 Should be a straightforward migration, just some types and underlying store structure, all the call sites stay the sameThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice if modal state could vary in shape. It seems like we have some base modal state (isOpen, onClose, etc), and then state we are passing to modals through reducers for the logic specific to the modal. Maybe those things don't have to co-exist?
Anyway yes, worth some discussion. Would like to get the three ways of doing this down to one 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The coexistence was a big part of the motivation behind the
createModal
helper, but if we don't want that then maybe there's no need for the helper and we go back to separate reducers etc