Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿

feat(web): add toggle store helper (#5912)

authored by yoginth.com and committed by

GitHub 49a12ed7 a38fb2b7

+39 -74
+1 -1
apps/web/src/components/Account/Details.tsx
··· 37 37 }: DetailsProps) => { 38 38 const navigate = useNavigate(); 39 39 const { currentAccount } = useAccountStore(); 40 - const { setShowProModal } = useProModalStore(); 40 + const { setShow: setShowProModal } = useProModalStore(); 41 41 const [showLightBox, setShowLightBox] = useState<boolean>(false); 42 42 const { theme } = useTheme(); 43 43
+1 -1
apps/web/src/components/Composer/NewPublication.tsx
··· 55 55 const { currentAccount } = useAccountStore(); 56 56 57 57 // New post modal store 58 - const { setShowNewPostModal } = useNewPostModalStore(); 58 + const { setShow: setShowNewPostModal } = useNewPostModalStore(); 59 59 60 60 // Post store 61 61 const {
+1 -1
apps/web/src/components/Post/Actions/Menu/Edit.tsx
··· 16 16 } 17 17 18 18 const Edit = ({ post }: EditProps) => { 19 - const { setShowNewPostModal } = useNewPostModalStore(); 19 + const { setShow: setShowNewPostModal } = useNewPostModalStore(); 20 20 const { setPostContent, setEditingPost } = usePostStore(); 21 21 const { setAttachments } = usePostAttachmentStore(); 22 22
+1 -1
apps/web/src/components/Post/Actions/Share/Quote.tsx
··· 14 14 15 15 const Quote = ({ post }: QuoteProps) => { 16 16 const { currentAccount } = useAccountStore(); 17 - const { setShowNewPostModal } = useNewPostModalStore(); 17 + const { setShow: setShowNewPostModal } = useNewPostModalStore(); 18 18 const { setQuotedPost } = usePostStore(); 19 19 20 20 return (
+5 -4
apps/web/src/components/Shared/GlobalModals.tsx
··· 24 24 import Auth from "./Auth"; 25 25 26 26 const GlobalModals = () => { 27 - const { setShowSwitchAccountModal, showSwitchAccountModal } = 27 + const { setShow: setShowSwitchAccountModal, show: showSwitchAccountModal } = 28 28 useSwitchAccountModalStore(); 29 - const { showNewPostModal, setShowNewPostModal } = useNewPostModalStore(); 29 + const { show: showNewPostModal, setShow: setShowNewPostModal } = 30 + useNewPostModalStore(); 30 31 const { editingPost, setEditingPost, setQuotedPost, setPostContent } = 31 32 usePostStore(); 32 33 const { setAttachments } = usePostAttachmentStore(); ··· 47 48 setShowSuperFollowModal, 48 49 superFollowingAccount 49 50 } = useSuperFollowModalStore(); 50 - const { showProModal, setShowProModal } = useProModalStore(); 51 - const { showShortcutsModal, setShowShortcutsModal } = 51 + const { show: showProModal, setShow: setShowProModal } = useProModalStore(); 52 + const { show: showShortcutsModal, setShow: setShowShortcutsModal } = 52 53 useShortcutsModalStore(); 53 54 54 55 const { screen: signupScreen } = useSignupStore();
+1 -1
apps/web/src/components/Shared/GlobalShortcuts.tsx
··· 8 8 const GlobalShortcuts = () => { 9 9 const navigate = useNavigate(); 10 10 const { currentAccount } = useAccountStore(); 11 - const { setShowShortcutsModal } = useShortcutsModalStore(); 11 + const { setShow: setShowShortcutsModal } = useShortcutsModalStore(); 12 12 13 13 // Go to account 14 14 useHotkeys(KeyboardShortcuts.GoToAccount.key, () => {
+2 -1
apps/web/src/components/Shared/Navbar/BottomNavigation.tsx
··· 42 42 const BottomNavigation = () => { 43 43 const { pathname } = useLocation(); 44 44 const { currentAccount } = useAccountStore(); 45 - const { showMobileDrawer, setShowMobileDrawer } = useMobileDrawerModalStore(); 45 + const { show: showMobileDrawer, setShow: setShowMobileDrawer } = 46 + useMobileDrawerModalStore(); 46 47 47 48 const handleAccountClick = () => setShowMobileDrawer(true); 48 49
+1 -1
apps/web/src/components/Shared/Navbar/MobileDrawerMenu.tsx
··· 17 17 18 18 const MobileDrawerMenu = () => { 19 19 const { currentAccount } = useAccountStore(); 20 - const { setShowMobileDrawer } = useMobileDrawerModalStore(); 20 + const { setShow: setShowMobileDrawer } = useMobileDrawerModalStore(); 21 21 22 22 const handleCloseDrawer = () => { 23 23 setShowMobileDrawer(false);
+1 -1
apps/web/src/components/Shared/Navbar/NavItems/Pro.tsx
··· 3 3 import { useProModalStore } from "@/store/non-persisted/modal/useProModalStore"; 4 4 5 5 const Pro = () => { 6 - const { setShowProModal } = useProModalStore(); 6 + const { setShow: setShowProModal } = useProModalStore(); 7 7 8 8 return ( 9 9 <button onClick={() => setShowProModal(true)} type="button">
+1 -1
apps/web/src/components/Shared/Navbar/NavItems/SwitchAccount.tsx
··· 7 7 } 8 8 9 9 const SwitchAccount = ({ className = "" }: SwitchAccountProps) => { 10 - const { setShowSwitchAccountModal } = useSwitchAccountModalStore(); 10 + const { setShow: setShowSwitchAccountModal } = useSwitchAccountModalStore(); 11 11 12 12 return ( 13 13 <button
+1 -1
apps/web/src/components/Shared/ProFeatureNotice.tsx
··· 8 8 } 9 9 10 10 const ProFeatureNotice = ({ feature, className }: ProFeatureNoticeProps) => { 11 - const { setShowProModal } = useProModalStore(); 11 + const { setShow: setShowProModal } = useProModalStore(); 12 12 13 13 return ( 14 14 <div
+1 -1
apps/web/src/components/Shared/Sidebar/ProBanner.tsx
··· 12 12 const ProBanner = () => { 13 13 const { currentAccount } = useAccountStore(); 14 14 const { proBannerDismissed, setProBannerDismissed } = useProStore(); 15 - const { setShowProModal } = useProModalStore(); 15 + const { setShow: setShowProModal } = useProModalStore(); 16 16 17 17 const onError = (error: ApolloClientError) => { 18 18 errorToast(error);
+12
apps/web/src/store/createToggleStore.ts
··· 1 + import { createTrackedStore } from "./createTrackedStore"; 2 + 3 + interface ToggleStore { 4 + show: boolean; 5 + setShow: (show: boolean) => void; 6 + } 7 + 8 + export const createToggleStore = (initial = false) => 9 + createTrackedStore<ToggleStore>((set) => ({ 10 + setShow: (show) => set({ show }), 11 + show: initial 12 + }));
+2 -13
apps/web/src/store/non-persisted/modal/useMobileDrawerModalStore.ts
··· 1 - import { createTrackedStore } from "@/store/createTrackedStore"; 2 - 3 - interface State { 4 - showMobileDrawer: boolean; 5 - setShowMobileDrawer: (showMobileDrawer: boolean) => void; 6 - } 1 + import { createToggleStore } from "@/store/createToggleStore"; 7 2 8 - const { useStore: useMobileDrawerModalStore } = createTrackedStore<State>( 9 - (set) => ({ 10 - setShowMobileDrawer: (showMobileDrawer) => 11 - set(() => ({ showMobileDrawer })), 12 - showMobileDrawer: false 13 - }) 14 - ); 3 + const { useStore: useMobileDrawerModalStore } = createToggleStore(); 15 4 16 5 export { useMobileDrawerModalStore };
+2 -10
apps/web/src/store/non-persisted/modal/useNewPostModalStore.ts
··· 1 - import { createTrackedStore } from "@/store/createTrackedStore"; 2 - 3 - interface State { 4 - showNewPostModal: boolean; 5 - setShowNewPostModal: (showNewPostModal: boolean) => void; 6 - } 1 + import { createToggleStore } from "@/store/createToggleStore"; 7 2 8 - const { useStore: useNewPostModalStore } = createTrackedStore<State>((set) => ({ 9 - setShowNewPostModal: (showNewPostModal) => set(() => ({ showNewPostModal })), 10 - showNewPostModal: false 11 - })); 3 + const { useStore: useNewPostModalStore } = createToggleStore(); 12 4 13 5 export { useNewPostModalStore };
+2 -10
apps/web/src/store/non-persisted/modal/useProModalStore.ts
··· 1 - import { createTrackedStore } from "@/store/createTrackedStore"; 2 - 3 - interface State { 4 - showProModal: boolean; 5 - setShowProModal: (showProModal: boolean) => void; 6 - } 1 + import { createToggleStore } from "@/store/createToggleStore"; 7 2 8 - const { useStore: useProModalStore } = createTrackedStore<State>((set) => ({ 9 - setShowProModal: (showProModal) => set(() => ({ showProModal })), 10 - showProModal: false 11 - })); 3 + const { useStore: useProModalStore } = createToggleStore(); 12 4 13 5 export { useProModalStore };
+2 -13
apps/web/src/store/non-persisted/modal/useShortcutsModalStore.ts
··· 1 - import { createTrackedStore } from "@/store/createTrackedStore"; 2 - 3 - interface State { 4 - showShortcutsModal: boolean; 5 - setShowShortcutsModal: (showShortcutsModal: boolean) => void; 6 - } 1 + import { createToggleStore } from "@/store/createToggleStore"; 7 2 8 - const { useStore: useShortcutsModalStore } = createTrackedStore<State>( 9 - (set) => ({ 10 - setShowShortcutsModal: (showShortcutsModal) => 11 - set(() => ({ showShortcutsModal })), 12 - showShortcutsModal: false 13 - }) 14 - ); 3 + const { useStore: useShortcutsModalStore } = createToggleStore(); 15 4 16 5 export { useShortcutsModalStore };
+2 -13
apps/web/src/store/non-persisted/modal/useSwitchAccountModalStore.ts
··· 1 - import { createTrackedStore } from "@/store/createTrackedStore"; 2 - 3 - interface State { 4 - showSwitchAccountModal: boolean; 5 - setShowSwitchAccountModal: (showSwitchAccountModal: boolean) => void; 6 - } 1 + import { createToggleStore } from "@/store/createToggleStore"; 7 2 8 - const { useStore: useSwitchAccountModalStore } = createTrackedStore<State>( 9 - (set) => ({ 10 - setShowSwitchAccountModal: (showSwitchAccountModal) => 11 - set(() => ({ showSwitchAccountModal })), 12 - showSwitchAccountModal: false 13 - }) 14 - ); 3 + const { useStore: useSwitchAccountModalStore } = createToggleStore(); 15 4 16 5 export { useSwitchAccountModalStore };