Skip to content

Commit

Permalink
add suspense that was causing some jarring save offline behaviors
Browse files Browse the repository at this point in the history
  • Loading branch information
@wkelly17
wkelly17 committed Jun 13, 2024
1 parent 1f34fe7 commit 3b9413d
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 41 deletions.
2 changes: 1 addition & 1 deletion astro.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default defineConfig({
globIgnores: ["**/_worker.js/**"]
},
devOptions: {
enabled: false,
enabled: true,
type: "module"
/* other options */
}
Expand Down
75 changes: 39 additions & 36 deletions src/components/ReaderMenu/ReaderMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import {
Show,
batch,
type Setter,
createResource
createResource,
Suspense
} from "solid-js";
import { SvgSettings, SvgBook, SvgArrow } from "@components/Icons/Icons";
import { BookList } from "./BookList";
Expand All @@ -16,8 +17,8 @@ import {
} from "@lib/utils-ui";
import { Dialog } from "@kobalte/core";
// https://github.com/solidjs/solid/discussions/845
clickOutside //retain module to keep typescript from stripping out;
escapeOut //retain module;
clickOutside; //retain module to keep typescript from stripping out;
escapeOut; //retain module;

import { translator, resolveTemplate } from "@solid-primitives/i18n";
import type { Component } from "solid-js";
Expand Down Expand Up @@ -280,7 +281,7 @@ const ReaderMenu: Component<MenuProps> = (props) => {
}

return (
<div class="mx-auto bg-white">
<div class="mx-auto bg-white">
<div
class="mx-auto w-full"
on:changelanguage={(
Expand All @@ -296,10 +297,10 @@ const ReaderMenu: Component<MenuProps> = (props) => {
use:escapeOut={() => setMenuIsOpen(false)}
class="mx-auto flex w-full flex-wrap items-center bg-[--clrBackground]"
>
<div class="relative mx-auto flex w-full max-w-[75ch] items-center justify-between gap-3 bg-white p-3 text-varBase sm:px-8 print:hidden ">
<div class="flex w-full justify-between overflow-hidden rounded-lg bg-white outline outline-1 outline-gray-300 focus-within:outline-2 focus-within:outline-accent">
<div class="relative mx-auto flex w-full max-w-[75ch] items-center justify-between gap-3 bg-white p-3 text-varBase sm:px-8 print:hidden">
<div class="flex w-full justify-between overflow-hidden rounded-lg bg-white outline outline-1 outline-gray-300 focus-within:outline-2 focus-within:outline-accent">
<button
class="flex h-12 w-full flex-grow items-center justify-between rounded-md hover:bg-gray-100 ltr:pl-4 rtl:pr-4"
class="flex h-12 w-full flex-grow items-center justify-between rounded-md hover:bg-gray-100 ltr:pl-4 rtl:pr-4"
onClick={() => togglePanel()}
>
<span class="flex items-center">
Expand All @@ -310,7 +311,7 @@ const ReaderMenu: Component<MenuProps> = (props) => {
</span>

<span
class="menuNumberInput w-[5ch] border-l border-gray-200 py-2 text-center "
class="menuNumberInput w-[5ch] border-l border-gray-200 py-2 text-center"
data-testid="chapterNavigation"
>
{props.storeInterface.getStoreVal("currentChapter")}
Expand All @@ -335,12 +336,12 @@ const ReaderMenu: Component<MenuProps> = (props) => {
style={{
top: topAmount()
}}
class="fixed left-1/2 z-50 w-full max-w-[calc(75ch+2rem)] -translate-x-1/2 transform text-varBase"
class="fixed left-1/2 z-50 w-full max-w-[calc(75ch+2rem)] -translate-x-1/2 transform text-varBase"
data-title="dialog__positioner"
>
<Dialog.Content class="" data-title="dialog__content">
{/* =============== shared ============= */}
<div class="bg-white ">
<div class="bg-white">
<div class="border-netural-200 flex content-center border-b p-4">
<Dialog.CloseButton
class=""
Expand Down Expand Up @@ -370,7 +371,7 @@ const ReaderMenu: Component<MenuProps> = (props) => {
{/* Books */}
<div class="border-netural-200 w-2/5 border-r">
<div class="w-full">
<div class="mt-2 pt-2">
<div class="mt-2 pt-2">
<div class="">
<label for="" class="relative block p-4">
<input
Expand All @@ -385,7 +386,7 @@ const ReaderMenu: Component<MenuProps> = (props) => {
placeholder={t("searchBooks")}
value={searchQuery()}
/>
<span class="absolute top-1/2 inline-block w-6 transform ltr:left-8 ltr:-translate-y-1/2 rtl:right-8 rtl:translate-y-1/2">
<span class="absolute top-1/2 inline-block w-6 transform ltr:left-8 ltr:-translate-y-1/2 rtl:right-8 rtl:translate-y-1/2">
<IconMagnifyingGlass />
</span>
</label>
Expand Down Expand Up @@ -416,16 +417,16 @@ const ReaderMenu: Component<MenuProps> = (props) => {
{/* =============== mobile menu ============= */}
<div
id="mobileMenu"
class=" z-10 h-full w-full overflow-y-scroll bg-white sm:hidden "
class="z-10 h-full w-full overflow-y-scroll bg-white sm:hidden"
>
<ul class="flex justify-between ">
<ul class="flex justify-between">
<li class="w-full text-center">
<button
class={`${
mobileTabOpen() == "book"
? "w-full border-b-2 border-b-accent font-bold text-accent"
: "underline"
} py-3 text-xl capitalize`}
} py-3 text-xl capitalize`}
onClick={() => {
setMobileTabOpen("book");
}}
Expand Down Expand Up @@ -463,7 +464,7 @@ const ReaderMenu: Component<MenuProps> = (props) => {
placeholder={t("searchBooks")}
value={searchQuery()}
/>
<span class="absolute top-1/2 inline-block w-6 transform ltr:left-8 ltr:-translate-y-1/2 rtl:right-8 rtl:translate-y-1/2">
<span class="absolute top-1/2 inline-block w-6 transform ltr:left-8 ltr:-translate-y-1/2 rtl:right-8 rtl:translate-y-1/2">
<IconMagnifyingGlass />
</span>
</label>
Expand Down Expand Up @@ -500,32 +501,34 @@ const ReaderMenu: Component<MenuProps> = (props) => {

{/* //!END table and up menu */}
<div class="w-1/5 print:hidden">
<div class=" relative w-max rounded-md ltr:ml-auto rtl:mr-auto ">
<div class="relative w-max rounded-md ltr:ml-auto rtl:mr-auto">
<button
class="rounded px-5 py-2 text-slate-700 hover:bg-gray-100 focus:outline-2 focus:outline-accent"
class="rounded px-5 py-2 text-slate-700 hover:bg-gray-100 focus:outline-2 focus:outline-accent"
aria-label={t("openSettings")}
onClick={manageOpenSettings}
>
<SvgSettings classNames="" />
</button>
<Show when={savedInServiceWorker() && settingsAreOpen()}>
<Settings
settingsAreOpen={settingsAreOpen}
setSettingsOpen={setSettingsAreOpen}
topAmount={topAmount}
repoIndex={props.repoIndex}
storeInterface={props.storeInterface}
savedInServiceWorker={savedInServiceWorker}
user={props.user}
repo={props.repositoryName}
refetchSwResponses={refetch}
setPrintWholeBook={props.setPrintWholeBook}
downloadSourceUsfmArr={props.storeInterface.getStoreVal(
"downloadLinks"
)}
t={t}
/>
</Show>
<Suspense>
<Show when={savedInServiceWorker() && settingsAreOpen()}>
<Settings
settingsAreOpen={settingsAreOpen}
setSettingsOpen={setSettingsAreOpen}
topAmount={topAmount}
repoIndex={props.repoIndex}
storeInterface={props.storeInterface}
savedInServiceWorker={savedInServiceWorker}
user={props.user}
repo={props.repositoryName}
refetchSwResponses={refetch}
setPrintWholeBook={props.setPrintWholeBook}
downloadSourceUsfmArr={props.storeInterface.getStoreVal(
"downloadLinks"
)}
t={t}
/>
</Show>
</Suspense>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Settings/OfflineSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export function OfflineSection(props: IOfflineSection) {
<Show when={saveProgress().isSaving}>
<Progress.Root
value={saveProgress().amountNum}
class="flex w-full flex-col gap-2 "
class="flex w-full flex-col gap-2"
data-title="progress"
>
<div
Expand All @@ -209,7 +209,7 @@ export function OfflineSection(props: IOfflineSection) {
</Progress.Label>
</div>
<Progress.Track
class="block h-2 rounded-full bg-accent/10"
class="block h-2 rounded-full bg-accent/10"
data-title="progress__track"
>
<Progress.Fill
Expand Down Expand Up @@ -444,7 +444,7 @@ async function saveSingleBookToSwCache({
// add to api
const { apiReq, apiRes } = getApiUrlAndResponse({
bookSlug,
chapter: currentChapter,
chapter: chapter.number,
content,
lastRendered: repoIndex.lastRendered,
repo,
Expand Down
1 change: 0 additions & 1 deletion src/lib/routes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
const devUrl = import.meta.env.PUBLIC_FUNCTIONS_API_BASE;
let base: string | undefined;

interface getRepoHtmlType {
Expand Down

0 comments on commit 3b9413d

Please sign in to comment.