Merge pull request 'Connect Nostr account from My Contributions' (#78) from feature/connect_nostr_from_contributions_timeline into master

Reviewed-on: #78

app/components/contributions-timeline.gjs

@@ -1,48 +1,86 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import Icon from './icon';
 import ContributionPhoto from './contribution-photo';
+import Modal from './modal';
+import NostrConnect from './nostr-connect';
 import eq from 'ember-truth-helpers/helpers/eq';
 import not from 'ember-truth-helpers/helpers/not';
 import restoreScroll from '../modifiers/restore-scroll';
 
-<template>
-  <div class="sidebar">
-    <div class="sidebar-header has-back-btn">
-      <button type="button" class="back-btn" {{on "click" @onBack}}>
-        <Icon @name="arrow-left" @size={{20}} @color="#333" />
-      </button>
-      <h2 class="sidebar-header-text-centered">
-        <span class="sidebar-header-icon-wrapper">
-          <Icon @name="activity" @size={{20}} @color="#898989" />
-        </span>
-        My Contributions
-      </h2>
-      <button type="button" class="close-btn" {{on "click" @onClose}}>
-        <Icon @name="x" @size={{20}} @color="#333" />
-      </button>
+export default class ContributionsTimelineComponent extends Component {
+  @tracked isNostrConnectModalOpen = false;
+
+  @action
+  openNostrConnectModal(event) {
+    event.preventDefault();
+    this.isNostrConnectModalOpen = true;
+  }
+
+  @action
+  closeNostrConnectModal() {
+    this.isNostrConnectModalOpen = false;
+  }
+
+  @action
+  onNostrConnected() {
+    this.closeNostrConnectModal();
+    this.args.onNostrConnected?.();
+  }
+
+  <template>
+    <div class="sidebar">
+      <div class="sidebar-header has-back-btn">
+        <button type="button" class="back-btn" {{on "click" @onBack}}>
+          <Icon @name="arrow-left" @size={{20}} @color="#333" />
+        </button>
+        <h2 class="sidebar-header-text-centered">
+          <span class="sidebar-header-icon-wrapper">
+            <Icon @name="activity" @size={{20}} @color="#898989" />
+          </span>
+          My Contributions
+        </h2>
+        <button type="button" class="close-btn" {{on "click" @onClose}}>
+          <Icon @name="x" @size={{20}} @color="#333" />
+        </button>
+      </div>
+
+      <div class="sidebar-content" {{restoreScroll @scrollTop}}>
+        {{#if @isLoading}}
+          <div class="sidebar-loading">
+            <Icon @name="loading-ring" @size={{24}} @color="#898989" />
+          </div>
+        {{else if (not @isConnected)}}
+          <p class="empty-state">
+            <a
+              href="#"
+              role="button"
+              tabindex="0"
+              {{on "click" this.openNostrConnectModal}}
+            >Connect your Nostr account</a>
+            to see your contributions.
+          </p>
+        {{else if (not @items.length)}}
+          <p class="empty-state">No contributions yet. Start by adding photos to
+            places.</p>
+        {{else}}
+          <ul class="contributions-list">
+            {{#each @items as |item|}}
+              {{#if (eq item.type "photo")}}
+                <ContributionPhoto @item={{item}} @onSelect={{@onSelect}} />
+              {{/if}}
+            {{/each}}
+          </ul>
+        {{/if}}
+      </div>
     </div>
 
-    <div class="sidebar-content" {{restoreScroll @scrollTop}}>
-      {{#if @isLoading}}
-        <div class="sidebar-loading">
-          <Icon @name="loading-ring" @size={{24}} @color="#898989" />
-        </div>
-      {{else if (not @isConnected)}}
-        <p class="empty-state">
-          Connect your Nostr account to see your contributions.
-        </p>
-      {{else if (not @items.length)}}
-        <p class="empty-state">No contributions yet. Start by adding photos to
-          places.</p>
-      {{else}}
-        <ul class="contributions-list">
-          {{#each @items as |item|}}
-            {{#if (eq item.type "photo")}}
-              <ContributionPhoto @item={{item}} @onSelect={{@onSelect}} />
-            {{/if}}
-          {{/each}}
-        </ul>
-      {{/if}}
-    </div>
-  </div>
-</template>
+    {{#if this.isNostrConnectModalOpen}}
+      <Modal @onClose={{this.closeNostrConnectModal}}>
+        <NostrConnect @onConnect={{this.onNostrConnected}} />
+      </Modal>
+    {{/if}}
+  </template>
+}

app/controllers/contributions.js

@@ -43,6 +43,11 @@ export default class ContributionsController extends Controller {
     this.router.transitionTo(`/place/${item.placeIdentifier}`);
   }
 
+  @action
+  onNostrConnected() {
+    this.loadContributionsTask.perform(this.nostrAuth.pubkey);
+  }
+
   @action
   backToMenu() {
     this.router.transitionTo('menu');

app/templates/contributions.gjs

@@ -10,6 +10,7 @@ import ContributionsTimeline from '#components/contributions-timeline';
       @onSelect={{@controller.selectContribution}}
       @onBack={{@controller.backToMenu}}
       @onClose={{@controller.close}}
+      @onNostrConnected={{@controller.onNostrConnected}}
     />
   {{/if}}
 </template>

tests/integration/components/contributions-timeline-test.gjs

@@ -1,14 +1,23 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'marco/tests/helpers';
 import { render, click } from '@ember/test-helpers';
+import Service from '@ember/service';
 import ContributionsTimeline from 'marco/components/contributions-timeline';
+import { setupNostrMocks } from 'marco/tests/helpers/mock-nostr';
 
 function noop() {}
 
+class MockToastService extends Service {
+  show() {}
+}
+
 module('Integration | Component | contributions-timeline', function (hooks) {
   setupRenderingTest(hooks);
+  setupNostrMocks(hooks);
 
   hooks.beforeEach(function () {
+    this.owner.register('service:toast', MockToastService);
+
     this.noop = noop;
     this.emptyItems = [];
   });
@@ -48,6 +57,28 @@ module('Integration | Component | contributions-timeline', function (hooks) {
     assert.dom('.empty-state').includesText('Connect your Nostr account');
   });
 
+  test('clicking "Connect your Nostr account" opens the Nostr connect modal', async function (assert) {
+    await render(
+      <template>
+        <div id="modal-portal"></div>
+        <ContributionsTimeline
+          @items={{this.emptyItems}}
+          @isLoading={{false}}
+          @isConnected={{false}}
+          @onBack={{this.noop}}
+          @onClose={{this.noop}}
+          @onSelect={{this.noop}}
+        />
+      </template>
+    );
+
+    assert.dom('.nostr-connect-modal').doesNotExist();
+
+    await click('.empty-state a');
+
+    assert.dom('.nostr-connect-modal').exists();
+  });
+
   test('it renders an empty state when connected but no contributions', async function (assert) {
     await render(
       <template>