From 07525dffe190a5accbbf95ea81e6463be65841d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Rizio?= <gaetan.rizio+git@pm.me>
Date: Sun, 17 May 2020 15:12:27 +0200
Subject: [PATCH] Correct behavior of page change

When changing page, but in the same component, the page was not refreshed.

There was these two issues:

* No transition
* Some part of the page is not updated

The reason was because Svelte reused the exact same component (so no mount / destroy and no animation on component creation / destruction).

To correctly update the page, we change the `Page` component by adding a keyed-each block (see https://github.com/sveltejs/svelte/issues/1469).

There was some issue with this solution because each time we update the component, the render is updated so the Page and create an infinite loop.
To avoid this problem, we remove the call to `Page` component from concrete pages and include it directly with the Router. To do so, we create the PageRoute component behaving as expected.
---
 src/App.svelte                         |  13 +--
 src/components/{ => page}/Page.svelte  |   2 +-
 src/components/page/PageRoute.svelte   |  18 ++++
 src/pages/category/CategoryPage.svelte |  34 +++----
 src/pages/food/CreateFoodPage.svelte   |  17 ++--
 src/pages/food/FoodPage.svelte         | 136 ++++++++++++-------------
 src/pages/searches/SearchesPage.svelte |  65 ++++++------
 src/pages/units/UnitsPage.svelte       |  65 ++++++------
 8 files changed, 178 insertions(+), 172 deletions(-)
 rename src/components/{ => page}/Page.svelte (86%)
 create mode 100644 src/components/page/PageRoute.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 80852cf..c033fd0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -13,6 +13,7 @@
 
   import HomePage from "~/pages/home/HomePage.svelte"
   import TwoColumns from "~/components/layout/TwoColumns.svelte"
+  import PageRoute from "~/components/page/PageRoute.svelte"
 
   export let url = ""
 </script>
@@ -35,16 +36,16 @@
       <Menu/>
 
       <main>
-        <Route path="/units" component={UnitsPage}/>
+        <PageRoute path="/units" component={UnitsPage}/>
 
-        <Route path="/searches" component={SearchesPage}/>
+        <PageRoute path="/searches" component={SearchesPage}/>
 
 
-        <Route path="/category/:categoryId/food/:foodId" component={FoodPage}/>
-        <Route path="/category/:categoryId/food" component={CreateFoodPage}/>
-        <Route path="/category/:categoryId" component={CategoryPage}/>
+        <PageRoute path="/category/:categoryId/food/:foodId" component={FoodPage}/>
+        <PageRoute path="/category/:categoryId/food" component={CreateFoodPage}/>
+        <PageRoute path="/category/:categoryId" component={CategoryPage}/>
 
-        <Route path="/" component={HomePage}/>
+        <PageRoute path="/" component={HomePage}/>
 
         <div class="space"></div>
       </main>
diff --git a/src/components/Page.svelte b/src/components/page/Page.svelte
similarity index 86%
rename from src/components/Page.svelte
rename to src/components/page/Page.svelte
index 2fef8b3..c8389c9 100644
--- a/src/components/Page.svelte
+++ b/src/components/page/Page.svelte
@@ -1,5 +1,5 @@
 <script>
-  function pageFade(node, {delay = 0, duration = 400, easing}) {
+  function pageFade(node, { delay = 0, duration = 400, easing }) {
     const o = +getComputedStyle(node).opacity
     return {
       delay,
diff --git a/src/components/page/PageRoute.svelte b/src/components/page/PageRoute.svelte
new file mode 100644
index 0000000..ee1e5bb
--- /dev/null
+++ b/src/components/page/PageRoute.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { Router, Route, links } from "svelte-routing"
+  import Page from "./Page.svelte"
+
+  /** @type {string} */
+  export let path
+
+  /** @type {any} */
+  export let component
+</script>
+
+<Route path={path} let:location={location} let:params={routeParams}>
+  {#each [`${Date.now()}-${Math.random()}`] as x(x)}
+    <Page>
+      <svelte:component this={component} location={location} {...routeParams} />
+    </Page>
+  {/each}
+</Route>
\ No newline at end of file
diff --git a/src/pages/category/CategoryPage.svelte b/src/pages/category/CategoryPage.svelte
index 240f595..73e5bed 100644
--- a/src/pages/category/CategoryPage.svelte
+++ b/src/pages/category/CategoryPage.svelte
@@ -2,7 +2,6 @@
   import { onMount } from "svelte"
   import i18n from "~/i18n"
   import receptoStore from "~/store/ReceptoStore"
-  import Page from "~/components/Page.svelte"
   import UpdatableSection from "~/components/updatable/UpdatableSection.svelte"
   import InputText from "~/components/fields/InputText.svelte"
   import { findCategory, saveCategory, deleteCategory } from "./CategoryPage"
@@ -30,22 +29,21 @@
   }
 </script>
 
-<Page>
-  {#if category !== undefined}
-    <UpdatableSection on:save={saveName} on:cancel={cancelName}>
-      <div slot="view">
-        <h1>{ category.name }</h1>
-      </div>
-
-      <div slot="edit">
-        <InputText id="edit-category-name" name="name" label="pages.category.page.edit.name" bind:value={name}/>
-      </div>
-    </UpdatableSection>
+{#if category !== undefined}
+  <UpdatableSection on:save={saveName} on:cancel={cancelName}>
+    <div slot="view">
+      <h1>{ category.name }</h1>
+    </div>
 
-    <div class="actions">
-      <Button danger on:click={() => deleteCategory(categoryId, $i18n)}>{$i18n.t("pages.category.page.actions.delete")}</Button>
+    <div slot="edit">
+      <InputText id="edit-category-name" name="name" label="pages.category.page.edit.name" bind:value={name}/>
     </div>
-  {:else}
-    <h1>{$i18n.t("common.notFound")}</h1>
-  {/if}
-</Page>
\ No newline at end of file
+  </UpdatableSection>
+
+  <div class="actions">
+    <Button danger
+            on:click={() => deleteCategory(categoryId, $i18n)}>{$i18n.t("pages.category.page.actions.delete")}</Button>
+  </div>
+{:else}
+  <h1>{$i18n.t("common.notFound")}</h1>
+{/if}
\ No newline at end of file
diff --git a/src/pages/food/CreateFoodPage.svelte b/src/pages/food/CreateFoodPage.svelte
index 449512f..2990f65 100644
--- a/src/pages/food/CreateFoodPage.svelte
+++ b/src/pages/food/CreateFoodPage.svelte
@@ -2,7 +2,6 @@
   import i18n from "~/i18n"
   import { buildPrimaryInformation, addFood } from "./CreateFoodPage"
 
-  import Page from "~/components/Page.svelte"
   import Button from "~/components/buttons/Button.svelte"
   import PrimaryInformationForm from "./primaryInformation/PrimaryInformationForm.svelte"
 
@@ -12,14 +11,12 @@
   let primaryInformation = buildPrimaryInformation(categoryId)
 </script>
 
-<Page>
-  <h1>{$i18n.t("pages.food.create.title")}</h1>
+<h1>{$i18n.t("pages.food.create.title")}</h1>
 
-  <form on:submit|preventDefault={() => addFood(primaryInformation)}>
-    <PrimaryInformationForm primaryInformation={primaryInformation} />
+<form on:submit|preventDefault={() => addFood(primaryInformation)}>
+  <PrimaryInformationForm primaryInformation={primaryInformation}/>
 
-    <Button type="primary" submit>
-      {$i18n.t("pages.food.form.submit")}
-    </Button>
-  </form>
-</Page>
\ No newline at end of file
+  <Button type="primary" submit>
+    {$i18n.t("pages.food.form.submit")}
+  </Button>
+</form>
\ No newline at end of file
diff --git a/src/pages/food/FoodPage.svelte b/src/pages/food/FoodPage.svelte
index 62adf77..983b17c 100644
--- a/src/pages/food/FoodPage.svelte
+++ b/src/pages/food/FoodPage.svelte
@@ -20,7 +20,6 @@
   import Button from "~/components/buttons/Button.svelte"
   import Grid from "~/components/layout/Grid.svelte"
   import RecipeCard from "~/components/card/RecipeCard.svelte"
-  import Page from "~/components/Page.svelte"
   import Collapsable from "~/components/collapsable/Collapsable.svelte"
   import SectionView from "./section/SectionView.svelte"
   import UpdatableSection from "~/components/updatable/UpdatableSection.svelte"
@@ -99,79 +98,78 @@
   }
 </style>
 
-<Page>
-  {#if food}
-    <UpdatableSection on:save={savePrimaryInformation} on:cancel={cancelPrimaryInformation}>
-      <div slot="view">
-        <PrimaryInformationSection food={food}/>
-      </div>
-
-      <div slot="edit">
-        <PrimaryInformationForm bind:primaryInformation={primaryInformation}/>
-      </div>
-    </UpdatableSection>
-
-    {#each sections as section, index}
-      <section>
-        <UpdatableSection
-          initialState={section.initial === undefined ? "edit" : "view"}
-          on:save={() => saveSection(index)}
-          on:cancel={() => cancelSection(index)}
-        >
-          <div slot="view">
-            <SectionView section={section.initial}/>
-          </div>
-
-          <div slot="edit">
-            <SectionForm
-              bind:section={sections[index].editing}
-              id={`food-section-${index}`}
-              name={`section[${index}]`}
-            />
-          </div>
-
-          <span slot="actions">
+{#if food}
+  <UpdatableSection on:save={savePrimaryInformation} on:cancel={cancelPrimaryInformation}>
+    <div slot="view">
+      <PrimaryInformationSection food={food}/>
+    </div>
+
+    <div slot="edit">
+      <PrimaryInformationForm bind:primaryInformation={primaryInformation}/>
+    </div>
+  </UpdatableSection>
+
+  {#each sections as section, index}
+    <section>
+      <UpdatableSection
+        initialState={section.initial === undefined ? "edit" : "view"}
+        on:save={() => saveSection(index)}
+        on:cancel={() => cancelSection(index)}
+      >
+        <div slot="view">
+          <SectionView section={section.initial}/>
+        </div>
+
+        <div slot="edit">
+          <SectionForm
+            bind:section={sections[index].editing}
+            id={`food-section-${index}`}
+            name={`section[${index}]`}
+          />
+        </div>
+
+        <span slot="actions">
             <Button danger on:click={() => removeSection(index)}>
               &#x1F5D1 {$i18n.t("pages.food.page.actions.removeSection")}
             </Button>
           </span>
-        </UpdatableSection>
-      </section>
-    {/each}
-
-    {#if !hasUnsavedAddedSection}
-      <div class="actions">
-        <Button type="primary" on:click={addSection}>{$i18n.t("pages.food.page.actions.addSection")}</Button>
-      </div>
-    {/if}
-
-    {#if nonEmpty(usedFor)}
-      <section>
-        <h2>{$i18n.t("pages.food.page.usedFor")}</h2>
-
-        <Grid>
-          {#each usedFor as info}
-            <RecipeCard recipe={info.recipe} food={info.food}/>
-          {/each}
-        </Grid>
-      </section>
-    {/if}
-
-    <aside>
-      {#each $receptoStore.searches as search}
-        <Collapsable summary={$i18n.t("pages.food.page.asideSearch", { sitename: search.sitename })}>
-          <iframe src={search.url.replace("{s}", food.name)}
-                  title={$i18n.t("pages.food.page.asideSearch", { sitename: search.sitename })}
-                  width="100%"
-                  height="500px"></iframe>
-        </Collapsable>
-      {/each}
-    </aside>
+      </UpdatableSection>
+    </section>
+  {/each}
 
+  {#if !hasUnsavedAddedSection}
     <div class="actions">
-      <Button danger on:click={() => deleteFood(categoryId, foodId, $i18n)}>{$i18n.t("pages.food.page.actions.delete")}</Button>
+      <Button type="primary" on:click={addSection}>{$i18n.t("pages.food.page.actions.addSection")}</Button>
     </div>
-  {:else}
-    <h1>{$i18n.t("common.notFound")}</h1>
   {/if}
-</Page>
\ No newline at end of file
+
+  {#if nonEmpty(usedFor)}
+    <section>
+      <h2>{$i18n.t("pages.food.page.usedFor")}</h2>
+
+      <Grid>
+        {#each usedFor as info}
+          <RecipeCard recipe={info.recipe} food={info.food}/>
+        {/each}
+      </Grid>
+    </section>
+  {/if}
+
+  <aside>
+    {#each $receptoStore.searches as search}
+      <Collapsable summary={$i18n.t("pages.food.page.asideSearch", { sitename: search.sitename })}>
+        <iframe src={search.url.replace("{s}", food.name)}
+                title={$i18n.t("pages.food.page.asideSearch", { sitename: search.sitename })}
+                width="100%"
+                height="500px"></iframe>
+      </Collapsable>
+    {/each}
+  </aside>
+
+  <div class="actions">
+    <Button danger
+            on:click={() => deleteFood(categoryId, foodId, $i18n)}>{$i18n.t("pages.food.page.actions.delete")}</Button>
+  </div>
+{:else}
+  <h1>{$i18n.t("common.notFound")}</h1>
+{/if}
\ No newline at end of file
diff --git a/src/pages/searches/SearchesPage.svelte b/src/pages/searches/SearchesPage.svelte
index c0b2ec6..40e5811 100644
--- a/src/pages/searches/SearchesPage.svelte
+++ b/src/pages/searches/SearchesPage.svelte
@@ -4,7 +4,6 @@
   import receptoStore from "~/store/ReceptoStore"
 
   import Button from "~/components/buttons/Button.svelte"
-  import Page from "~/components/Page.svelte"
   import InputCollection from "~/components/fields/InputCollection.svelte"
   import InputText from "~/components/fields/InputText.svelte"
 
@@ -17,36 +16,34 @@
   })
 </script>
 
-<Page>
-  <h1>{$i18n.t("pages.searches.page.title")}</h1>
-
-  <form on:submit|preventDefault={() => updateSearches(searches)}>
-    <InputCollection
-      title={$i18n.t("pages.searches.page.groupTitle")}
-      addButtonLabel={$i18n.t("pages.searches.page.add")}
-      removeButtonLabel={$i18n.t("pages.searches.page.remove")}
-      rowBuilder={buildNewSearch}
-      bind:value={searches}
-
-      let:index={index}
-    >
-      <InputText
-        id={`searches-${index}-sitename`}
-        name={`searches[${index}].sitename`}
-        label={$i18n.t("pages.searches.page.sitename")}
-        bind:value={searches[index].sitename}
-      />
-
-      <InputText
-        id={`searches-${index}-url`}
-        name={`searches[${index}].url`}
-        label={$i18n.t("pages.searches.page.url")}
-        bind:value={searches[index].url}
-      />
-    </InputCollection>
-
-    <Button type="primary" submit>
-      {$i18n.t("pages.searches.page.submit")}
-    </Button>
-  </form>
-</Page>
\ No newline at end of file
+<h1>{$i18n.t("pages.searches.page.title")}</h1>
+
+<form on:submit|preventDefault={() => updateSearches(searches)}>
+  <InputCollection
+    title={$i18n.t("pages.searches.page.groupTitle")}
+    addButtonLabel={$i18n.t("pages.searches.page.add")}
+    removeButtonLabel={$i18n.t("pages.searches.page.remove")}
+    rowBuilder={buildNewSearch}
+    bind:value={searches}
+
+    let:index={index}
+  >
+    <InputText
+      id={`searches-${index}-sitename`}
+      name={`searches[${index}].sitename`}
+      label={$i18n.t("pages.searches.page.sitename")}
+      bind:value={searches[index].sitename}
+    />
+
+    <InputText
+      id={`searches-${index}-url`}
+      name={`searches[${index}].url`}
+      label={$i18n.t("pages.searches.page.url")}
+      bind:value={searches[index].url}
+    />
+  </InputCollection>
+
+  <Button type="primary" submit>
+    {$i18n.t("pages.searches.page.submit")}
+  </Button>
+</form>
\ No newline at end of file
diff --git a/src/pages/units/UnitsPage.svelte b/src/pages/units/UnitsPage.svelte
index 90ea4dd..0df5bb5 100644
--- a/src/pages/units/UnitsPage.svelte
+++ b/src/pages/units/UnitsPage.svelte
@@ -4,7 +4,6 @@
   import receptoStore from "~/store/ReceptoStore"
 
   import Button from "~/components/buttons/Button.svelte"
-  import Page from "~/components/Page.svelte"
   import InputCollection from "~/components/fields/InputCollection.svelte"
   import InputText from "~/components/fields/InputText.svelte"
 
@@ -17,36 +16,34 @@
   })
 </script>
 
-<Page>
-  <h1>{$i18n.t("pages.units.page.title")}</h1>
-
-  <form on:submit|preventDefault={() => updateUnits(units)}>
-    <InputCollection
-      title={"pages.units.page.groupTitle"}
-      addButtonLabel={"pages.units.page.add"}
-      removeButtonLabel={"pages.units.page.remove"  }
-      rowBuilder={buildNewUnit}
-      bind:value={units}
-
-      let:index={index}
-    >
-      <InputText
-        id={`units-${index}-code`}
-        name={`units[${index}].code`}
-        label={"pages.units.page.code"}
-        bind:value={units[index].code}
-      />
-
-      <InputText
-        id={`units-${index}-label`}
-        name={`units[${index}].label`}
-        label={"pages.units.page.label"}
-        bind:value={units[index].label}
-      />
-    </InputCollection>
-
-    <Button type="primary" submit>
-      {$i18n.t("pages.units.page.submit")}
-    </Button>
-  </form>
-</Page>
\ No newline at end of file
+<h1>{$i18n.t("pages.units.page.title")}</h1>
+
+<form on:submit|preventDefault={() => updateUnits(units)}>
+  <InputCollection
+    title={"pages.units.page.groupTitle"}
+    addButtonLabel={"pages.units.page.add"}
+    removeButtonLabel={"pages.units.page.remove"  }
+    rowBuilder={buildNewUnit}
+    bind:value={units}
+
+    let:index={index}
+  >
+    <InputText
+      id={`units-${index}-code`}
+      name={`units[${index}].code`}
+      label={"pages.units.page.code"}
+      bind:value={units[index].code}
+    />
+
+    <InputText
+      id={`units-${index}-label`}
+      name={`units[${index}].label`}
+      label={"pages.units.page.label"}
+      bind:value={units[index].label}
+    />
+  </InputCollection>
+
+  <Button type="primary" submit>
+    {$i18n.t("pages.units.page.submit")}
+  </Button>
+</form>
\ No newline at end of file