mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Consolodate custom zap modal
This commit is contained in:
parent
cd0a7e1b75
commit
1fe6b2851b
@ -18,6 +18,7 @@ import ZapAnimation from '../ZapAnimation/ZapAnimation';
|
||||
import Landing from '../../pages/Landing';
|
||||
import ReactionsModal from '../ReactionsModal/ReactionsModal';
|
||||
import { useAppContext } from '../../contexts/AppContext';
|
||||
import CustomZap from '../CustomZap/CustomZap';
|
||||
|
||||
export const [isHome, setIsHome] = createSignal(false);
|
||||
|
||||
@ -154,6 +155,16 @@ const Layout: Component = () => {
|
||||
stats={app?.reactionStats}
|
||||
onClose={() => app?.actions.closeReactionModal()}
|
||||
/>
|
||||
|
||||
<CustomZap
|
||||
open={app?.showCustomZapModal}
|
||||
note={app?.customZap?.note}
|
||||
profile={app?.customZap?.profile}
|
||||
onConfirm={app?.customZap?.onConfirm}
|
||||
onSuccess={app?.customZap?.onSuccess}
|
||||
onFail={app?.customZap?.onFail}
|
||||
onCancel={app?.customZap?.onCancel}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
@ -20,7 +20,7 @@ import NoteContextMenu from '../NoteContextMenu';
|
||||
import { getScreenCordinates } from '../../../utils';
|
||||
import ZapAnimation from '../../ZapAnimation/ZapAnimation';
|
||||
import ReactionsModal from '../../ReactionsModal/ReactionsModal';
|
||||
import { useAppContext } from '../../../contexts/AppContext';
|
||||
import { CustomZapInfo, useAppContext } from '../../../contexts/AppContext';
|
||||
|
||||
const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> = (props) => {
|
||||
|
||||
@ -158,9 +158,45 @@ const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> =
|
||||
};
|
||||
|
||||
let quickZapDelay = 0;
|
||||
const [isCustomZap, setIsCustomZap] = createSignal(false);
|
||||
const [isZapping, setIsZapping] = createSignal(false);
|
||||
|
||||
const customZapInfo: CustomZapInfo = {
|
||||
note: props.note,
|
||||
onConfirm: (zapOption: ZapOption) => {
|
||||
app?.actions.closeCustomZapModal();
|
||||
setZappedAmount(() => zapOption.amount || 0);
|
||||
setZappedNow(true);
|
||||
setZapped(true);
|
||||
animateZap();
|
||||
},
|
||||
onSuccess: (zapOption: ZapOption) => {
|
||||
app?.actions.closeCustomZapModal();
|
||||
setIsZapping(false);
|
||||
setZappedNow(false);
|
||||
setShowZapAnim(false);
|
||||
setHideZapIcon(false);
|
||||
setZapped(true);
|
||||
},
|
||||
onFail: (zapOption: ZapOption) => {
|
||||
setZappedAmount(() => -(zapOption.amount || 0));
|
||||
setZappedNow(true);
|
||||
app?.actions.closeCustomZapModal();
|
||||
setIsZapping(false);
|
||||
setShowZapAnim(false);
|
||||
setHideZapIcon(false);
|
||||
setZapped(props.note.post.noteActions.zapped);
|
||||
},
|
||||
onCancel: (zapOption: ZapOption) => {
|
||||
setZappedAmount(() => -(zapOption.amount || 0));
|
||||
setZappedNow(true);
|
||||
app?.actions.closeCustomZapModal();
|
||||
setIsZapping(false);
|
||||
setShowZapAnim(false);
|
||||
setHideZapIcon(false);
|
||||
setZapped(props.note.post.noteActions.zapped);
|
||||
},
|
||||
};
|
||||
|
||||
const startZap = (e: MouseEvent | TouchEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -187,7 +223,7 @@ const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> =
|
||||
}
|
||||
|
||||
quickZapDelay = setTimeout(() => {
|
||||
setIsCustomZap(true);
|
||||
app?.actions.openCustomZapModal(customZapInfo);
|
||||
setIsZapping(true);
|
||||
}, 500);
|
||||
};
|
||||
@ -207,7 +243,7 @@ const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> =
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isCustomZap()) {
|
||||
if (app?.customZap === undefined) {
|
||||
doQuickZap();
|
||||
}
|
||||
};
|
||||
@ -410,7 +446,7 @@ const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> =
|
||||
<NoteContextMenu
|
||||
note={props.note}
|
||||
openCustomZap={() => {
|
||||
setIsCustomZap(true);
|
||||
app?.actions.openCustomZapModal(customZapInfo);
|
||||
}}
|
||||
openReactions={() => {
|
||||
app?.actions.openReactionModal(props.note.post.id, {
|
||||
@ -422,44 +458,6 @@ const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> =
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CustomZap
|
||||
open={isCustomZap()}
|
||||
note={props.note}
|
||||
onConfirm={(zapOption: ZapOption) => {
|
||||
setIsCustomZap(false);
|
||||
setZappedAmount(() => zapOption.amount || 0);
|
||||
setZappedNow(true);
|
||||
setZapped(true);
|
||||
animateZap();
|
||||
}}
|
||||
onSuccess={(zapOption: ZapOption) => {
|
||||
setIsCustomZap(false);
|
||||
setIsZapping(false);
|
||||
setZappedNow(false);
|
||||
setShowZapAnim(false);
|
||||
setHideZapIcon(false);
|
||||
setZapped(true);
|
||||
}}
|
||||
onFail={(zapOption: ZapOption) => {
|
||||
setZappedAmount(() => -(zapOption.amount || 0));
|
||||
setZappedNow(true);
|
||||
setIsCustomZap(false);
|
||||
setIsZapping(false);
|
||||
setShowZapAnim(false);
|
||||
setHideZapIcon(false);
|
||||
setZapped(props.note.post.noteActions.zapped);
|
||||
}}
|
||||
onCancel={(zapOption: ZapOption) => {
|
||||
setZappedAmount(() => -(zapOption.amount || 0));
|
||||
setZappedNow(true);
|
||||
setIsCustomZap(false);
|
||||
setIsZapping(false);
|
||||
setShowZapAnim(false);
|
||||
setHideZapIcon(false);
|
||||
setZapped(props.note.post.noteActions.zapped);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { createStore } from "solid-js/store";
|
||||
import { createStore, reconcile } from "solid-js/store";
|
||||
import {
|
||||
createContext,
|
||||
createEffect,
|
||||
@ -7,6 +7,7 @@ import {
|
||||
onMount,
|
||||
useContext
|
||||
} from "solid-js";
|
||||
import { PrimalNote, PrimalUser, ZapOption } from "../types/primal";
|
||||
|
||||
export type ReactionStats = {
|
||||
likes: number,
|
||||
@ -15,14 +16,27 @@ export type ReactionStats = {
|
||||
quotes: number,
|
||||
};
|
||||
|
||||
export type CustomZapInfo = {
|
||||
profile?: PrimalUser,
|
||||
note?: PrimalNote,
|
||||
onConfirm: (zapOption: ZapOption) => void,
|
||||
onSuccess: (zapOption: ZapOption) => void,
|
||||
onFail: (zapOption: ZapOption) => void,
|
||||
onCancel: (zapOption: ZapOption) => void,
|
||||
};
|
||||
|
||||
export type AppContextStore = {
|
||||
isInactive: boolean,
|
||||
appState: 'sleep' | 'waking' | 'woke',
|
||||
showReactionsModal: string | undefined,
|
||||
reactionStats: ReactionStats,
|
||||
showCustomZapModal: boolean,
|
||||
customZap: CustomZapInfo | undefined,
|
||||
actions: {
|
||||
openReactionModal: (noteId: string, stats: ReactionStats) => void,
|
||||
closeReactionModal: () => void,
|
||||
openCustomZapModal: (custonZapInfo: CustomZapInfo) => void,
|
||||
closeCustomZapModal: () => void,
|
||||
},
|
||||
}
|
||||
|
||||
@ -36,6 +50,8 @@ const initialData: Omit<AppContextStore, 'actions'> = {
|
||||
reposts: 0,
|
||||
quotes: 0,
|
||||
},
|
||||
showCustomZapModal: false,
|
||||
customZap: undefined,
|
||||
};
|
||||
|
||||
export const AppContext = createContext<AppContextStore>();
|
||||
@ -71,6 +87,15 @@ export const AppProvider = (props: { children: JSXElement }) => {
|
||||
updateStore('showReactionsModal', () => undefined);
|
||||
};
|
||||
|
||||
const openCustomZapModal = (customZapInfo: CustomZapInfo) => {
|
||||
updateStore('customZap', reconcile({ ...customZapInfo }));
|
||||
updateStore('showCustomZapModal', () => true);
|
||||
};
|
||||
|
||||
const closeCustomZapModal = () => {
|
||||
updateStore('showCustomZapModal', () => false);
|
||||
};
|
||||
|
||||
// EFFECTS --------------------------------------
|
||||
|
||||
onMount(() => {
|
||||
@ -111,6 +136,8 @@ export const AppProvider = (props: { children: JSXElement }) => {
|
||||
actions: {
|
||||
openReactionModal,
|
||||
closeReactionModal,
|
||||
openCustomZapModal,
|
||||
closeCustomZapModal,
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -41,8 +41,8 @@ import VerificationCheck from '../components/VerificationCheck/VerificationCheck
|
||||
|
||||
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
||||
import NoteImage from '../components/NoteImage/NoteImage';
|
||||
import CustomZap from '../components/CustomZap/CustomZap';
|
||||
import ProfileQrCodeModal from '../components/ProfileQrCodeModal/ProfileQrCodeModal';
|
||||
import { CustomZapInfo, useAppContext } from '../contexts/AppContext';
|
||||
|
||||
const Profile: Component = () => {
|
||||
|
||||
@ -51,6 +51,8 @@ const Profile: Component = () => {
|
||||
const profile = useProfileContext();
|
||||
const account = useAccountContext();
|
||||
const media = useMediaContext();
|
||||
const app = useAppContext();
|
||||
|
||||
const intl = useIntl();
|
||||
const navigate = useNavigate();
|
||||
|
||||
@ -61,7 +63,6 @@ const Profile: Component = () => {
|
||||
const [showContext, setContext] = createSignal(false);
|
||||
const [confirmReportUser, setConfirmReportUser] = createSignal(false);
|
||||
const [confirmMuteUser, setConfirmMuteUser] = createSignal(false);
|
||||
const [isCustomZap, setIsCustomZap] = createSignal(false);
|
||||
const [openQr, setOpenQr] = createSignal(false);
|
||||
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
@ -491,6 +492,25 @@ const Profile: Component = () => {
|
||||
return !profile?.isFetching && profile?.isProfileFetched && profile?.profileKey === getHex();
|
||||
};
|
||||
|
||||
const customZapInfo: () => CustomZapInfo = () => ({
|
||||
profile: profile?.userProfile,
|
||||
onConfirm: (zapOption: ZapOption) => {
|
||||
app?.actions.closeCustomZapModal();
|
||||
},
|
||||
onSuccess: (zapOption: ZapOption) => {
|
||||
app?.actions.closeCustomZapModal();
|
||||
toaster?.sendSuccess(intl.formatMessage(toastZapProfile, {
|
||||
name: authorName(profile?.userProfile)
|
||||
}))
|
||||
},
|
||||
onFail: (zapOption: ZapOption) => {
|
||||
app?.actions.closeCustomZapModal();
|
||||
},
|
||||
onCancel: (zapOption: ZapOption) => {
|
||||
app?.actions.closeCustomZapModal();
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle title={
|
||||
@ -567,31 +587,11 @@ const Profile: Component = () => {
|
||||
|
||||
<Show when={!isCurrentUser()}>
|
||||
<ButtonSecondary
|
||||
onClick={() => setIsCustomZap(true)}
|
||||
onClick={() => app?.actions.openCustomZapModal(customZapInfo())}
|
||||
shrink={true}
|
||||
>
|
||||
<div class={styles.zapIcon}></div>
|
||||
</ButtonSecondary>
|
||||
|
||||
<CustomZap
|
||||
open={isCustomZap()}
|
||||
profile={profile?.userProfile}
|
||||
onConfirm={(zapOption: ZapOption) => {
|
||||
setIsCustomZap(false);
|
||||
}}
|
||||
onSuccess={(zapOption: ZapOption) => {
|
||||
setIsCustomZap(false);
|
||||
toaster?.sendSuccess(intl.formatMessage(toastZapProfile, {
|
||||
name: authorName(profile?.userProfile)
|
||||
}))
|
||||
}}
|
||||
onFail={(zapOption: ZapOption) => {
|
||||
setIsCustomZap(false);
|
||||
}}
|
||||
onCancel={(zapOption: ZapOption) => {
|
||||
setIsCustomZap(false);
|
||||
}}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={account?.publicKey}>
|
||||
|
Loading…
Reference in New Issue
Block a user