From 7ba5ce0f60fc9782842695688d6378009f4f41bb Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <sebastinez@me.com>
Date: Thu, 20 Jan 2022 14:08:42 +0100
Subject: [PATCH] Refactor source params into separate object

We had a lot variables that we had to pass down from the project view,
and only very few where important to the reactivity of the components.

By using the resolved Promise from `getProject` as transport we can use
now the `source` variable and get the required params by destructuring
it.

In short we can pack now the following params:
```
urn, org, user, seed, peer, project, branches, peers, config, anchors
```

Signed-off-by: Sebastian Martinez <sebastinez@me.com>
---
 src/base/projects/Browser.svelte              | 12 +++------
 src/base/projects/Commit/History.svelte       | 10 +++----
 src/base/projects/Header.svelte               | 17 ++++--------
 src/base/projects/PeerSelector.svelte         |  2 +-
 src/base/projects/ProjectContentRoutes.svelte | 26 ++++++-------------
 src/base/projects/View.svelte                 | 21 +++++----------
 src/project.ts                                | 16 ++++++++++++
 7 files changed, 44 insertions(+), 60 deletions(-)

diff --git a/src/base/projects/Browser.svelte b/src/base/projects/Browser.svelte
index 94a5dea7d..62f06361e 100644
--- a/src/base/projects/Browser.svelte
+++ b/src/base/projects/Browser.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { navigate } from 'svelte-routing';
-  import type { Config } from '@app/config';
   import * as proj from '@app/project';
   import Loading from '@app/Loading.svelte';
   import * as utils from '@app/utils';
@@ -17,20 +16,15 @@
   type State = { status: Status.Loading; path: string }
     | { status: Status.Loaded; path: string; blob: proj.Blob };
 
-  export let urn: string;
-  export let config: Config;
-  export let org: string | null = null;
-  export let user: string | null = null;
-  export let seed: string | null = null;
+  export let source: proj.Source;
   export let tree: proj.Tree;
-  export let peer: proj.Peer;
-  export let project: proj.Info;
-  export let branches: [string, string][];
   export let locator: string; // eg. "master/README.md"
   export let content: proj.ProjectContent;
   export let revision: string;
   export let path: string;
 
+  let { urn, org, user, seed, peer, project, config, branches } = source;
+
   // This is reactive to respond to path changes that don't originate from this
   // component, eg. when using the browser's "back" button.
   $: [revision_, path_] = proj.splitPrefixFromPath(locator, branches, project.head);
diff --git a/src/base/projects/Commit/History.svelte b/src/base/projects/Commit/History.svelte
index 96f32907c..b802134e9 100644
--- a/src/base/projects/Commit/History.svelte
+++ b/src/base/projects/Commit/History.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
   import CommitTeaser from "./CommitTeaser.svelte";
-  import { getCommits, Info, getOid, ProjectContent, splitPrefixFromPath } from "@app/project";
-  import type { Config } from "@app/config";
+  import { getCommits, Source, getOid, ProjectContent, splitPrefixFromPath } from "@app/project";
   import Loading from "@app/Loading.svelte";
   import { groupCommitHistory, GroupedCommitsHistory } from "./lib";
 
+  export let source: Source;
   export let locator: string;
-  export let urn: string;
-  export let config: Config;
-  export let project: Info;
-  export let branches: [string, string][];
   export let content: ProjectContent;
   export let revision: string;
 
+  let { urn, config, project, branches } = source;
+
   // Bind content to commit history to trigger updates in parent components.
   $: [revision_,] = splitPrefixFromPath(locator, branches, project.head);
   $: content = ProjectContent.History;
diff --git a/src/base/projects/Header.svelte b/src/base/projects/Header.svelte
index 8ebdcbdeb..ec4aeaf90 100644
--- a/src/base/projects/Header.svelte
+++ b/src/base/projects/Header.svelte
@@ -1,30 +1,23 @@
 <script lang="ts">
   import { navigate } from 'svelte-routing';
-  import type { Config } from '@app/config';
   import * as utils from '@app/utils';
-  import { ProjectContent, getOid } from '@app/project';
-  import type { Info, Tree } from "@app/project";
+  import { ProjectContent, getOid, Source } from '@app/project';
+  import type { Tree } from "@app/project";
   import BranchSelector from './BranchSelector.svelte';
   import PeerSelector from './PeerSelector.svelte';
   import { createEventDispatcher } from 'svelte';
 
   const dispatch = createEventDispatcher();
 
-  export let config: Config;
-  export let anchors: string[];
-  export let urn: string;
+  export let source: Source;
   export let path: string;
-  export let project: Info;
   export let tree: Tree;
-  export let branches: [string, string][] = [];
   export let content: ProjectContent;
   export let revision: string;
   // If peerSelector should be showed.
   export let peerSelector: boolean;
-  // Currently selected peer.
-  export let peer: string;
-  // Listing of available peers, empty array if none available.
-  export let peers: string[];
+  
+  let { urn, peer, config, project, branches, peers, anchors } = source;
 
   let dropdownState: { [key: string]: boolean } = { clone: false, seed: false, branch: false, peer: false };
   function toggleDropdown(input: string) {
diff --git a/src/base/projects/PeerSelector.svelte b/src/base/projects/PeerSelector.svelte
index 78ad6bd6c..9560c8a00 100644
--- a/src/base/projects/PeerSelector.svelte
+++ b/src/base/projects/PeerSelector.svelte
@@ -4,7 +4,7 @@
   import Dropdown from "@app/Dropdown.svelte";
   import { formatSeedId } from "@app/utils";
 
-  export let peer: string | null;
+  export let peer: string;
   export let peers: string[];
   export let toggleDropdown: (input: string) => void;
   export let peersDropdown = false;
diff --git a/src/base/projects/ProjectContentRoutes.svelte b/src/base/projects/ProjectContentRoutes.svelte
index e28eec0cf..05ab8431a 100644
--- a/src/base/projects/ProjectContentRoutes.svelte
+++ b/src/base/projects/ProjectContentRoutes.svelte
@@ -1,55 +1,45 @@
 <script lang="ts">
-  import type { Config } from "@app/config";
-  import type { Info, Peer, ProjectContent, Tree } from "@app/project";
+  import type { ProjectContent, Source, Tree } from "@app/project";
   import { Route, Router } from "svelte-routing";
   import Browser from "./Browser.svelte";
   import History from "./Commit/History.svelte";
 
-  export let urn: string;
-  export let project: Info;
-  export let config: Config;
-  export let org: string;
+  export let source: Source;
   export let tree: Tree;
-  export let user: string;
-  export let seed: string;
-  export let peer: Peer;
-  export let branches: [string, string][];
   export let content: ProjectContent;
-  export let anchors: string[];
   export let revision: string;
   export let path: string;
 
-  let locator = anchors[0] || project.head;
+  let locator = source.anchors[0] || source.project.head;
 </script>
 
 <Router>
   <!-- The default action is to render Browser with the default branch head -->
   <Route path="/">
-    <Browser {urn} {org} {user} {seed} {config} {tree} {project} {branches} {peer} {locator}
+    <Browser {source} {tree} {locator}
       bind:content={content}
       bind:path={path}
       bind:revision={revision} />
   </Route>
   <Route path="/tree">
-    <Browser {urn} {org} {user} {seed} {config} {tree} {project} {branches} {peer} {locator}
+    <Browser {source} {tree} {locator}
       bind:content={content}
       bind:path={path}
       bind:revision={revision} />
   </Route>
   <Route path="/tree/*" let:params>
-    <Browser {urn} {org} {user} {seed} {config} {tree} {project} {branches} {peer}
-      locator={params["*"]}
+    <Browser {source} {tree} locator={params["*"]}
       bind:content={content}
       bind:path={path}
       bind:revision={revision} />
   </Route>
   <Route path="/history">
-    <History {urn} {config} {project} {branches} {locator}
+    <History {locator} {source}
       bind:content={content}
       bind:revision={revision} />
   </Route>
   <Route path="/history/*" let:params>
-    <History {urn} locator={params["*"]} {config} {project} {branches}
+    <History locator={params["*"]} {source}
       bind:content={content}
       bind:revision={revision} />
   </Route>
diff --git a/src/base/projects/View.svelte b/src/base/projects/View.svelte
index 1b35d1c12..23fcb87a3 100644
--- a/src/base/projects/View.svelte
+++ b/src/base/projects/View.svelte
@@ -40,8 +40,8 @@
     }
   }).then(async (result) => {
     const profile = result?.profile;
-    const seed = profile?.seed ?? result?.seed;
-    const cfg = seed ? config.withSeed(seed) : config;
+    const seedInstance = profile?.seed ?? result?.seed;
+    const cfg = seedInstance ? config.withSeed(seedInstance) : config;
     const info = await proj.getInfo(urn, cfg);
     projectInfo = info;
     const anchors = await getAllAnchors(config, urn, profile?.anchorsAccount ?? org);
@@ -57,7 +57,7 @@
       }
       peers = await proj.getPeers(urn, cfg);
     }
-    return { project: info, branches, peers, anchors, config: cfg, profile };
+    return { urn, org, user, seed, peer, project: info, branches, peers, config: cfg, profile, anchors };
   });
 
   const parentUrl = (profile: Profile) => {
@@ -179,19 +179,12 @@
       <div class="description">{result.project.meta.description}</div>
     </header>
     {#await proj.getTree(urn, getOid(result.project.head, revision, result.branches), "/", config) then tree}
-      <Header {urn} {tree} {revision} {content} {path} {peer}
-        anchors={result.anchors}
+      <Header {tree} {revision} {content} {path}
+        source={result}
         peerSelector={!!seed}
-        config={result.config}
-        project={result.project}
-        branches={result.branches}
-        peers={result.peers}
         on:routeParamsChange={updateRouteParams} />
-      <ProjectContentRoutes {urn} {org} {user} {seed} {tree} {peer}
-        project={result.project}
-        anchors={result.anchors}
-        branches={result.branches}
-        config={result.config}
+      <ProjectContentRoutes {tree}
+        source={result}
         bind:content={content}
         bind:revision={revision}
         bind:path={path} />
diff --git a/src/project.ts b/src/project.ts
index a4071b804..9eaa6dd5b 100644
--- a/src/project.ts
+++ b/src/project.ts
@@ -2,6 +2,7 @@ import type { Config } from '@app/config';
 import * as api from '@app/api';
 import type { CommitsHistory } from '@app/base/projects/Commit/lib';
 import { isOid } from '@app/utils';
+import type { Profile } from '@app/profile';
 
 export type Urn = string;
 export type Peer = string;
@@ -18,6 +19,21 @@ export interface Project {
   };
 }
 
+// Params to render correctly source code related views
+export interface Source {
+  urn: string;
+  org: string;
+  user: string;
+  peer: string;
+  config: Config;
+  project: Info;
+  peers: Peer[];
+  anchors: string[];
+  seed: string;
+  branches: [string, string][];
+  profile?: Profile;
+}
+
 export interface PendingProject extends Project {
   safeTxHash: string; // Safe transaction hash.
   confirmations: string[]; // Owner addresses who have confirmed.