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>
This commit is contained in:
Sebastian Martinez
2022-01-26 10:03:26 +01:00
parent 34673adf4d
commit 7ba5ce0f60
7 changed files with 44 additions and 60 deletions
+3 -9
View File
@@ -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);
+4 -6
View File
@@ -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;
+5 -12
View File
@@ -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) {
+1 -1
View File
@@ -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;
+8 -18
View File
@@ -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>
+7 -14
View File
@@ -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} />
+16
View File
@@ -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.