Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Move list component to top level
Alexis Sellier committed 4 years ago
commit 46a73521c670b6f8339b8815455629ade0971547
parent 8d45ec27e17df6ad6016330f2ccf40f16b50367b
4 files changed +84 -80
added src/Cards.svelte
@@ -0,0 +1,61 @@
+ 
<script lang="ts">
+ 
  import { ethers } from 'ethers';
+ 
  import { onMount } from 'svelte';
+ 
  import type { Org } from '@app/base/orgs/Org';
+ 
  import { Profile } from '@app/profile';
+ 
  import type { Config } from '@app/config';
+ 
  import Loading from '@app/Loading.svelte';
+ 
  import Card from '@app/Card.svelte';
+
+ 
  export let config: Config;
+ 
  export let orgs: Org[] = [];
+ 
  export let profiles: Profile[] = [];
+
+ 
  const orgMembers: Record<string, string[]> = {};
+ 
  const getOrgProfiles = Profile.getMulti(orgs.map(o => o.name ?? o.address), config);
+
+ 
  onMount(async () => {
+ 
    const promises = orgs.map(org => {
+ 
      org.getMembers(config).then(members => {
+ 
        orgMembers[ethers.utils.getAddress(org.address)] = members;
+ 
      });
+ 
    });
+
+ 
    Promise.all(promises);
+ 
  });
+ 
</script>
+
+ 
<style>
+ 
  .list {
+ 
    display: flex;
+ 
    flex-direction: row;
+ 
    flex-wrap: wrap;
+ 
  }
+ 
  .loading {
+ 
    padding: 3rem 0;
+ 
  }
+ 
</style>
+
+ 
{#await getOrgProfiles}
+ 
  <div class="loading">
+ 
    <Loading center />
+ 
  </div>
+ 
{:then orgProfiles}
+ 
  <div class="list">
+ 
    {#each orgProfiles as profile}
+ 
      {#if orgMembers[profile.address]?.length}
+ 
        <Card {profile} {config} path={`/orgs/${profile.nameOrAddress}`} members={orgMembers[profile.address]} />
+ 
      {:else}
+ 
        <Card {profile} {config} path={`/orgs/${profile.nameOrAddress}`} />
+ 
      {/if}
+ 
    {/each}
+
+ 
    {#each profiles as profile}
+ 
      <Card {profile} {config} path={`/users/${profile.nameOrAddress}`} />
+ 
    {/each}
+
+ 
    {#if !orgProfiles.length && !profiles.length}
+ 
      <slot />
+ 
    {/if}
+ 
  </div>
+ 
{/await}
modified src/base/home/Index.svelte
@@ -5,8 +5,7 @@
  import { Org } from '@app/base/orgs/Org';

  import Loading from '@app/Loading.svelte';

  import Message from '@app/Message.svelte';
-
- 
  import List from '@app/base/orgs/List.svelte';
+ 
  import Cards from '@app/Cards.svelte';



  export let config: Config;
@@ -47,6 +46,9 @@
    padding: 1rem 0rem;

    font-size: 1.25rem;

  }
+ 
  .loading {
+ 
    padding-top: 2rem;
+ 
  }

  .actions {

    margin-top: 1rem;

    text-align: center;
@@ -70,21 +72,23 @@
      <Loading center />

    </div>

  {:then entities}
- 
    <div class="heading">
- 
      Explore <strong>orgs</strong> and <strong>projects</strong> on the Radicle network.
- 
    </div>
- 
    <List {config} profiles={entities.users} orgs={entities.orgs}>
- 
      <div class="orgs-empty">There are no orgs.</div>
- 
    </List>
- 
    <div class="actions">
- 
      <button class="small secondary" on:click={viewMore}>
- 
        View all
- 
      </button>
- 
    </div>
+ 
    {#if entities.orgs.length || entities.users.length}
+ 
      <div class="heading">
+ 
        Explore <strong>orgs</strong> and <strong>users</strong> on the Radicle network.
+ 
      </div>
+ 
      <Cards {config} profiles={entities.users} orgs={entities.orgs}>
+ 
        <div class="empty">There are no orgs or users.</div>
+ 
      </Cards>
+ 
      <div class="actions">
+ 
        <button class="small secondary" on:click={viewMore}>
+ 
          View all
+ 
        </button>
+ 
      </div>
+ 
    {/if}

  {:catch}

    <div class="padding">

      <Message error>
- 
        <strong>Error: </strong> failed to load orgs.
+ 
        <strong>Error: </strong> failed to load orgs and users.

      </Message>

    </div>

  {/await}
modified src/base/orgs/Index.svelte
@@ -6,7 +6,7 @@
  import type { Config } from '@app/config';

  import Loading from '@app/Loading.svelte';

  import Message from '@app/Message.svelte';
- 
  import List from './List.svelte';
+ 
  import Cards from '@app/Cards.svelte';



  export let config: Config;
@@ -70,9 +70,9 @@
          <Loading center />

        </div>

      {:then orgs}
- 
        <List {config} {orgs}>
+ 
        <Cards {config} {orgs}>

          <div class="orgs-empty">Orgs you are a member of show up here.</div>
- 
        </List>
+ 
        </Cards>

      {:catch}

        <div>

          <Message error>
@@ -92,9 +92,9 @@
      <Loading center />

    </div>

  {:then orgs}
- 
    <List {config} {orgs}>
+ 
    <Cards {config} {orgs}>

      <div class="orgs-empty">There are no orgs.</div>
- 
    </List>
+ 
    </Cards>

  {:catch}

    <div>

      <Message error>
deleted src/base/orgs/List.svelte
@@ -1,61 +0,0 @@
- 
<script lang="ts">
- 
  import { ethers } from 'ethers';
- 
  import { onMount } from 'svelte';
- 
  import type { Org } from '@app/base/orgs/Org';
- 
  import { Profile } from '@app/profile';
- 
  import type { Config } from '@app/config';
- 
  import Loading from '@app/Loading.svelte';
- 
  import Card from '@app/Card.svelte';
-
- 
  export let config: Config;
- 
  export let orgs: Org[] = [];
- 
  export let profiles: Profile[] = [];
-
- 
  const orgMembers: Record<string, string[]> = {};
- 
  const getOrgProfiles = Profile.getMulti(orgs.map(o => o.name ?? o.address), config);
-
- 
  onMount(async () => {
- 
    const promises = orgs.map(org => {
- 
      org.getMembers(config).then(members => {
- 
        orgMembers[ethers.utils.getAddress(org.address)] = members;
- 
      });
- 
    });
-
- 
    Promise.all(promises);
- 
  });
- 
</script>
-
- 
<style>
- 
  .list {
- 
    display: flex;
- 
    flex-direction: row;
- 
    flex-wrap: wrap;
- 
  }
- 
  .loading {
- 
    padding: 3rem 0;
- 
  }
- 
</style>
-
- 
{#await getOrgProfiles}
- 
  <div class="loading">
- 
    <Loading center />
- 
  </div>
- 
{:then orgProfiles}
- 
  <div class="list">
- 
    {#each orgProfiles as profile}
- 
      {#if orgMembers[profile.address]?.length}
- 
        <Card {profile} {config} path={`/orgs/${profile.nameOrAddress}`} members={orgMembers[profile.address]} />
- 
      {:else}
- 
        <Card {profile} {config} path={`/orgs/${profile.nameOrAddress}`} />
- 
      {/if}
- 
    {:else}
- 
      <slot />
- 
    {/each}
-
- 
    {#each profiles as profile}
- 
      <Card {profile} {config} path={`/users/${profile.nameOrAddress}`} />
- 
    {:else}
- 
      <slot />
- 
    {/each}
- 
  </div>
- 
{/await}