Remove server sync for theme settings

This commit is contained in:
Jackson Harper 2024-02-14 14:42:54 +08:00
parent d6cd57b575
commit 1082b3fa9d
29 changed files with 203 additions and 203 deletions

View file

@ -6,7 +6,7 @@ type LoadingViewProps = {
}
export function LoadingView(props: LoadingViewProps): JSX.Element {
applyStoredTheme(false)
applyStoredTheme()
return (
<VStack

View file

@ -23,7 +23,7 @@ type PrimaryLayoutProps = {
}
export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
applyStoredTheme(false)
applyStoredTheme()
const { viewerData } = useGetViewerQuery()
const router = useRouter()

View file

@ -26,7 +26,7 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
useState(false)
useKeyboardShortcuts(navigationCommands(router))
applyStoredTheme(false)
applyStoredTheme()
const showLogout = useCallback(() => {
setShowLogoutConfirmation(true)

View file

@ -37,7 +37,7 @@ export type ReaderSettings = {
}
export const useReaderSettings = (): ReaderSettings => {
applyStoredTheme(false)
applyStoredTheme()
const [, updateState] = useState({})

View file

@ -88,7 +88,7 @@ export function currentTheme(): ThemeId | undefined {
return ThemeId.Light
}
export function applyStoredTheme(syncWithServer = true): ThemeId | undefined {
export function applyStoredTheme(): ThemeId | undefined {
if (typeof window === 'undefined') {
return undefined
}

View file

@ -30,7 +30,7 @@ export default function Debug(): JSX.Element {
includeFriendsHighlights: false,
})
applyStoredTheme(false)
applyStoredTheme()
const sortedAttributes = useMemo(() => {
// if (!sortedAttributes) {

View file

@ -20,7 +20,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
const readerSettings = useReaderSettings()
const [articleId, setArticleId] = useState<string | undefined>(undefined)
applyStoredTheme(false)
applyStoredTheme()
useEffect(() => {
if (!router.isReady) return

View file

@ -25,13 +25,12 @@ type AppArticleEmbedContentProps = {
}
export default function AppArticleEmbed(): JSX.Element {
applyStoredTheme(false) // false to skip server sync
applyStoredTheme()
const router = useRouter()
const [contentProps, setContentProps] = useState<
AppArticleEmbedContentProps | undefined
>(undefined)
const [contentProps, setContentProps] =
useState<AppArticleEmbedContentProps | undefined>(undefined)
useEffect(() => {
if (!router.isReady) return

View file

@ -9,7 +9,7 @@ import { PrimaryLayout } from '../../../../components/templates/PrimaryLayout'
import { applyStoredTheme } from '../../../../lib/themeUpdater'
export default function LinkRequestPage(): JSX.Element {
applyStoredTheme(false) // false to skip server sync
applyStoredTheme()
const router = useRouter()
const [requestID, setRequestID] = useState<string | undefined>(undefined)

View file

@ -2,6 +2,6 @@ import { PrivacyPolicy } from '../../components/templates/PrivacyPolicy'
import { applyStoredTheme } from '../../lib/themeUpdater'
export default function Privacy(): JSX.Element {
applyStoredTheme(false) // false to skip server sync
applyStoredTheme()
return <PrivacyPolicy isAppEmbed />
}

View file

@ -2,6 +2,6 @@ import { TermsAndConditions } from '../../components/templates/TermsAndCondition
import { applyStoredTheme } from '../../lib/themeUpdater'
export default function Terms(): JSX.Element {
applyStoredTheme(false) // false to skip server sync
applyStoredTheme()
return <TermsAndConditions isAppEmbed />
}

View file

@ -16,7 +16,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
const readerSettings = useReaderSettings()
const [url, setUrl] = useState<string | undefined>(undefined)
applyStoredTheme(false)
applyStoredTheme()
useEffect(() => {
if (!router.isReady) return

View file

@ -20,7 +20,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
const readerSettings = useReaderSettings()
const [articleId, setArticleId] = useState<string | undefined>(undefined)
applyStoredTheme(false)
applyStoredTheme()
useEffect(() => {
if (!router.isReady) return

View file

@ -198,7 +198,7 @@ export default function Account(): JSX.Element {
})()
}, [email])
applyStoredTheme(false)
applyStoredTheme()
return (
<SettingsLayout>

View file

@ -28,7 +28,7 @@ export default function Api(): JSX.Element {
const neverExpiresDate = new Date(8640000000000000)
const defaultExpiresAt = 'Never'
applyStoredTheme(false)
applyStoredTheme()
async function onDelete(id: string): Promise<void> {
const result = await revokeApiKeyMutation(id)

View file

@ -20,7 +20,7 @@ export default function DeleteMyAccount(): JSX.Element {
const viewer = useGetViewerQuery()
const [showConfirm, setShowConfirm] = useState(false)
applyStoredTheme(false)
applyStoredTheme()
async function deleteAccount(): Promise<void> {
const viewerId = viewer.viewerData?.me?.id

View file

@ -81,11 +81,10 @@ function CopyTextButton(props: CopyTextButtonProps): JSX.Element {
export default function EmailsPage(): JSX.Element {
const { emailAddresses, revalidate, isValidating } =
useGetNewsletterEmailsQuery()
const [confirmDeleteEmailId, setConfirmDeleteEmailId] = useState<
undefined | string
>(undefined)
const [confirmDeleteEmailId, setConfirmDeleteEmailId] =
useState<undefined | string>(undefined)
applyStoredTheme(false)
applyStoredTheme()
async function createEmail(): Promise<void> {
const email = await createNewsletterEmailMutation()
@ -114,143 +113,148 @@ export default function EmailsPage(): JSX.Element {
return emailAddresses.sort((a, b) => a.createdAt.localeCompare(b.createdAt))
}, [emailAddresses])
return <>
<SettingsTable
pageId="settings-emails-tag"
pageInfoLink="https://docs.omnivore.app/using/inbox.html"
headerTitle="Address"
createTitle="Create a new email address"
createAction={createEmail}
suggestionInfo={{
title: 'Subscribe to newsletters with an Omnivore Email Address',
message:
'Create an Omnivore email address and use it to subscribe to newsletters or send yourself documents. Newsletters and documents will be categorized and added to your library when we receive a message. View all received emails with the "Recently Received Emails" link at the bottom of this page.',
docs: 'https://docs.omnivore.app/using/inbox.html',
key: '--settings-emails-show-help',
CTAText: 'Create an email address',
onClickCTA: () => {
createEmail()
},
}}
>
{sortedEmailAddresses.length > 0 ? (
sortedEmailAddresses.map((email, i) => {
return (
<SettingsTableRow
key={email.address}
title={email.address}
isLast={i === sortedEmailAddresses.length - 1}
onDelete={() => setConfirmDeleteEmailId(email.id)}
deleteTitle="Delete"
sublineElement={
<StyledText
css={{
my: '5px',
fontSize: '11px',
a: {
color: '$omnivoreCtaYellow',
},
}}
>
{`created ${formattedShortDate(email.createdAt)}, `}
<Link href="/settings/subscriptions" legacyBehavior>{`${email.subscriptionCount} subscriptions`}</Link>
</StyledText>
}
titleElement={
<CopyTextBtnWrapper
css={{
marginLeft: '20px',
'@mdDown': {
marginRight: '10px',
},
}}
>
<CopyTextButton
text={email.address}
type={TextType.EmailAddress}
/>
</CopyTextBtnWrapper>
}
extraElement={
email.confirmationCode ? (
<HStack
alignment="start"
distribution="center"
css={{
width: '100%',
backgroundColor: '$grayBgActive',
borderRadius: '6px',
padding: '4px 4px 4px 0px',
'@md': {
width: '30%',
backgroundColor: 'transparent',
},
}}
>
<>
<StyledText
css={{
fontSize: '11px',
'@md': {
marginTop: '5px',
},
'@mdDown': {
marginLeft: 'auto',
},
marginRight: '10px',
}}
>
{`Gmail: ${email.confirmationCode}`}
</StyledText>
<Box>
<CopyTextBtnWrapper>
<CopyTextButton
text={email.confirmationCode || ''}
type={TextType.ConfirmationCode}
/>
</CopyTextBtnWrapper>
</Box>
</>
</HStack>
) : (
<></>
)
}
/>
);
})
) : (
<EmptySettingsRow
text={isValidating ? '-' : 'No Email Addresses Found'}
/>
)}
<SpanBox
css={{
pt: '15px',
fontSize: '12px',
marginLeft: 'auto',
a: {
color: '$omnivoreCtaYellow',
return (
<>
<SettingsTable
pageId="settings-emails-tag"
pageInfoLink="https://docs.omnivore.app/using/inbox.html"
headerTitle="Address"
createTitle="Create a new email address"
createAction={createEmail}
suggestionInfo={{
title: 'Subscribe to newsletters with an Omnivore Email Address',
message:
'Create an Omnivore email address and use it to subscribe to newsletters or send yourself documents. Newsletters and documents will be categorized and added to your library when we receive a message. View all received emails with the "Recently Received Emails" link at the bottom of this page.',
docs: 'https://docs.omnivore.app/using/inbox.html',
key: '--settings-emails-show-help',
CTAText: 'Create an email address',
onClickCTA: () => {
createEmail()
},
}}
>
<Link href="/settings/emails/recent">
View recently received emails
</Link>
</SpanBox>
</SettingsTable>
{sortedEmailAddresses.length > 0 ? (
sortedEmailAddresses.map((email, i) => {
return (
<SettingsTableRow
key={email.address}
title={email.address}
isLast={i === sortedEmailAddresses.length - 1}
onDelete={() => setConfirmDeleteEmailId(email.id)}
deleteTitle="Delete"
sublineElement={
<StyledText
css={{
my: '5px',
fontSize: '11px',
a: {
color: '$omnivoreCtaYellow',
},
}}
>
{`created ${formattedShortDate(email.createdAt)}, `}
<Link
href="/settings/subscriptions"
legacyBehavior
>{`${email.subscriptionCount} subscriptions`}</Link>
</StyledText>
}
titleElement={
<CopyTextBtnWrapper
css={{
marginLeft: '20px',
'@mdDown': {
marginRight: '10px',
},
}}
>
<CopyTextButton
text={email.address}
type={TextType.EmailAddress}
/>
</CopyTextBtnWrapper>
}
extraElement={
email.confirmationCode ? (
<HStack
alignment="start"
distribution="center"
css={{
width: '100%',
backgroundColor: '$grayBgActive',
borderRadius: '6px',
padding: '4px 4px 4px 0px',
'@md': {
width: '30%',
backgroundColor: 'transparent',
},
}}
>
<>
<StyledText
css={{
fontSize: '11px',
'@md': {
marginTop: '5px',
},
'@mdDown': {
marginLeft: 'auto',
},
marginRight: '10px',
}}
>
{`Gmail: ${email.confirmationCode}`}
</StyledText>
<Box>
<CopyTextBtnWrapper>
<CopyTextButton
text={email.confirmationCode || ''}
type={TextType.ConfirmationCode}
/>
</CopyTextBtnWrapper>
</Box>
</>
</HStack>
) : (
<></>
)
}
/>
)
})
) : (
<EmptySettingsRow
text={isValidating ? '-' : 'No Email Addresses Found'}
/>
)}
<SpanBox
css={{
pt: '15px',
fontSize: '12px',
marginLeft: 'auto',
a: {
color: '$omnivoreCtaYellow',
},
}}
>
<Link href="/settings/emails/recent">
View recently received emails
</Link>
</SpanBox>
</SettingsTable>
{confirmDeleteEmailId ? (
<ConfirmationModal
message={
'Are you sure? You will stop receiving emails sent to this address.'
}
onAccept={async () => {
await deleteEmail(confirmDeleteEmailId)
setConfirmDeleteEmailId(undefined)
}}
onOpenChange={() => setConfirmDeleteEmailId(undefined)}
/>
) : null}
</>;
{confirmDeleteEmailId ? (
<ConfirmationModal
message={
'Are you sure? You will stop receiving emails sent to this address.'
}
onAccept={async () => {
await deleteEmail(confirmDeleteEmailId)
setConfirmDeleteEmailId(undefined)
}}
onOpenChange={() => setConfirmDeleteEmailId(undefined)}
/>
) : null}
</>
)
}

View file

@ -152,15 +152,13 @@ const ViewRecentEmailModal = (
export default function RecentEmails(): JSX.Element {
const { recentEmails, revalidate, isValidating } = useGetRecentEmailsQuery()
const [viewingEmailText, setViewingEmailText] = useState<
RecentEmail | undefined
>(undefined)
const [viewingEmailText, setViewingEmailText] =
useState<RecentEmail | undefined>(undefined)
const [viewingEmailHtml, setViewingEmailHtml] = useState<
RecentEmail | undefined
>(undefined)
const [viewingEmailHtml, setViewingEmailHtml] =
useState<RecentEmail | undefined>(undefined)
applyStoredTheme(false)
applyStoredTheme()
const sortedRecentEmails = useMemo(() => {
return recentEmails.sort((a, b) => b.createdAt.localeCompare(a.createdAt))

View file

@ -99,7 +99,7 @@ export default function Rss(): JSX.Element {
revalidate()
}
applyStoredTheme(false)
applyStoredTheme()
return (
<SettingsTable

View file

@ -74,7 +74,7 @@ type integrationsCard = {
}
}
export default function Integrations(): JSX.Element {
applyStoredTheme(false)
applyStoredTheme()
const { integrations, revalidate } = useGetIntegrationsQuery()
const { webhooks } = useGetWebhooksQuery()

View file

@ -153,16 +153,15 @@ export default function LabelsPage(): JSX.Element {
const [descriptionInputText, setDescriptionInputText] = useState<string>('')
const [isCreateMode, setIsCreateMode] = useState<boolean>(false)
const [windowWidth, setWindowWidth] = useState<number>(0)
const [confirmRemoveLabelId, setConfirmRemoveLabelId] = useState<
string | null
>(null)
const [confirmRemoveLabelId, setConfirmRemoveLabelId] =
useState<string | null>(null)
const [showLabelPageHelp, setShowLabelPageHelp] = usePersistedState<boolean>({
key: `--settings-labels-show-help`,
initialValue: true,
})
const breakpoint = 768
applyStoredTheme(false)
applyStoredTheme()
const sortedLabels = useMemo(() => {
return labels.sort((left: Label, right: Label) =>

View file

@ -139,7 +139,7 @@ export default function PinnedSearches(): JSX.Element {
dispatchList({ type: 'RESET' })
}, [])
applyStoredTheme(false)
applyStoredTheme()
return (
<SettingsLayout>

View file

@ -149,9 +149,8 @@ const CreateActionModal = (props: CreateActionModalProps): JSX.Element => {
}
}
const [actionType, setActionType] = useState<RuleActionType | undefined>(
undefined
)
const [actionType, setActionType] =
useState<RuleActionType | undefined>(undefined)
return (
<Modal
@ -219,9 +218,8 @@ export default function Rules(): JSX.Element {
const { rules, revalidate } = useGetRulesQuery()
const { labels } = useGetLabelsQuery()
const [isCreateRuleModalOpen, setIsCreateRuleModalOpen] = useState(false)
const [createActionRule, setCreateActionRule] = useState<Rule | undefined>(
undefined
)
const [createActionRule, setCreateActionRule] =
useState<Rule | undefined>(undefined)
const dataSource = useMemo(() => {
return rules.map((rule: Rule) => {
@ -235,7 +233,7 @@ export default function Rules(): JSX.Element {
})
}, [rules])
applyStoredTheme(false)
applyStoredTheme()
const deleteRule = useCallback(
async (rule: Rule) => {

View file

@ -156,19 +156,19 @@ export default function SavedSearchesPage(): JSX.Element {
const [editingId, setEditingId] = useState<string | null>(null)
const [isCreateMode, setIsCreateMode] = useState<boolean>(false)
const [windowWidth, setWindowWidth] = useState<number>(0)
const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = useState<
string | null
>(null)
const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] =
useState<string | null>(null)
const [draggedElementId, setDraggedElementId] = useState<string | null>(null)
const [draggedElementPosition, setDraggedElementPosition] = useState<{
x: number
y: number
} | null>(null)
const [draggedElementPosition, setDraggedElementPosition] =
useState<{
x: number
y: number
} | null>(null)
const [sortedSavedSearch, setSortedSavedSearch] = useState<SavedSearch[]>([])
// Some theming stuff here.
const breakpoint = 768
applyStoredTheme(false)
applyStoredTheme()
useEffect(() => {
setSortedSavedSearch(
@ -579,14 +579,15 @@ function GenericTableCard(
editingId === savedSearch?.id || (isCreateMode && !savedSearch)
const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
const DEFAULT_STYLE = { position: null }
const [style, setStyle] = useState<
Partial<{
position: string | null
top: string
left: string
maxWidth: string
}>
>(DEFAULT_STYLE)
const [style, setStyle] =
useState<
Partial<{
position: string | null
top: string
left: string
maxWidth: string
}>
>(DEFAULT_STYLE)
const handleEdit = () => {
editingId && updateSavedSearch(editingId)
setEditingId(null)

View file

@ -22,7 +22,7 @@ export default function SubscriptionsPage(): JSX.Element {
const [confirmUnsubscribeSubscription, setConfirmUnsubscribeSubscription] =
useState<Subscription | null>(null)
applyStoredTheme(false)
applyStoredTheme()
async function onUnsubscribe(subscription: Subscription): Promise<void> {
const result = await unsubscribeMutation(subscription.name, subscription.id)
@ -86,7 +86,8 @@ export default function SubscriptionsPage(): JSX.Element {
at{' '}
<Link
href={`/settings/emails?address=${subscription.newsletterEmail}`}
legacyBehavior>
legacyBehavior
>
{subscription.newsletterEmail}
</Link>
</>
@ -101,7 +102,7 @@ export default function SubscriptionsPage(): JSX.Element {
</StyledText>
}
/>
);
)
})
) : (
<EmptySettingsRow
@ -125,5 +126,5 @@ export default function SubscriptionsPage(): JSX.Element {
) : null}
</>
</SettingsTable>
);
)
}

View file

@ -65,7 +65,7 @@ export default function Webhooks(): JSX.Element {
return rows
}, [webhooks])
applyStoredTheme(false)
applyStoredTheme()
function validateEventTypes(eventTypes: WebhookEvent[]): boolean {
if (eventTypes.length > 0) return true

View file

@ -25,7 +25,7 @@ type RunningState = 'none' | 'confirming' | 'running' | 'completed'
export default function BulkPerformer(): JSX.Element {
const router = useRouter()
applyStoredTheme(false)
applyStoredTheme()
const [action, setAction] = useState<BulkAction | undefined>()
const [query, setQuery] = useState<string>('in:all')

View file

@ -17,7 +17,7 @@ import { validateCsvFile } from '../../../utils/csvValidator'
type UploadState = 'none' | 'uploading' | 'completed'
export default function ImportUploader(): JSX.Element {
applyStoredTheme(false)
applyStoredTheme()
const [errorMessage, setErrorMessage] = useState<string | undefined>()
const [file, setFile] = useState<File>()

View file

@ -20,7 +20,7 @@ import { Tray } from 'phosphor-react'
type UploadState = 'none' | 'uploading' | 'completed'
export default function ImportUploader(): JSX.Element {
applyStoredTheme(false)
applyStoredTheme()
const [errorMessage, setErrorMessage] = useState<string | undefined>()
const [uploadState, setUploadState] = useState<UploadState>('none')