···

       
1
       
1
       
-
       
import { createSignal, onMount, For, Show, type Component } from "solid-js";

     

       
1
       
1
       
+
       
import {

     

       
2
       
2
       
+
       
  createSignal,

     

       
3
       
3
       
+
       
  onMount,

     

       
4
       
4
       
+
       
  For,

     

       
5
       
5
       
+
       
  Show,

     

       
6
       
6
       
+
       
  type Component,

     

       
7
       
7
       
+
       
  createEffect,

     

       
8
       
8
       
+
       
} from "solid-js";

     

       
2
       
9
       
 
       
import { createStore } from "solid-js/store";

     

       
3
       
10
       
 
       


     

       
4
       
11
       
 
       
import {

     
···

       
25
       
32
       
 
       
  uri: string;

     

       
26
       
33
       
 
       
  status: RepoStatus;

     

       
27
       
34
       
 
       
  status_label: string;

     

       
28
       
28
       
-
       
  toBeDeleted: boolean;

     

       
35
       
35
       
+
       
  toDelete: boolean;

     

       
29
       
36
       
 
       
  visible: boolean;

     

       
30
       
37
       
 
       
};

     

       
31
       
38
       
 
       


     

       
32
       
39
       
 
       
const [followRecords, setFollowRecords] = createStore<FollowRecord[]>([]);

     

       
33
       
40
       
 
       
const [loginState, setLoginState] = createSignal(false);

     

       
41
       
41
       
+
       
const [fetchState, setFetchState] = createSignal(false);

     

       
34
       
42
       
 
       
let agent: Agent;

     

       
35
       
43
       
 
       


     

       
36
       
44
       
 
       
const resolveDid = async (did: string) => {

     
···

       
218
       
226
       
 
       
            uri: record.uri,

     

       
219
       
227
       
 
       
            status: status,

     

       
220
       
228
       
 
       
            status_label: status_label,

     

       
221
       
221
       
-
       
            toBeDeleted: false,

     

       
229
       
229
       
+
       
            toDelete: false,

     

       
222
       
230
       
 
       
            visible: status == RepoStatus.NONMUTUAL ? false : true,

     

       
223
       
231
       
 
       
          });

     

       
224
       
232
       
 
       
        }

     

       
225
       
233
       
 
       
        setProgress(progress() + 1);

     

       
234
       
234
       
+
       
        if (progress() == followCount()) setFetchState(true);

     

       
226
       
235
       
 
       
      });

     

       
227
       
236
       
 
       
    });

     

       
228
       
237
       
 
       
  };

     

       
229
       
238
       
 
       


     

       
230
       
239
       
 
       
  const unfollow = async () => {

     

       
231
       
240
       
 
       
    const writes = followRecords

     

       
232
       
232
       
-
       
      .filter((record) => record.toBeDeleted)

     

       
241
       
241
       
+
       
      .filter((record) => record.toDelete)

     

       
233
       
242
       
 
       
      .map((record) => {

     

       
234
       
243
       
 
       
        return {

     

       
235
       
244
       
 
       
          $type: "com.atproto.repo.applyWrites#delete",

     
···

       
247
       
256
       
 
       
    }

     

       
248
       
257
       
 
       


     

       
249
       
258
       
 
       
    setFollowRecords([]);

     

       
259
       
259
       
+
       
    setFetchState(false);

     

       
250
       
260
       
 
       
    setProgress(0);

     

       
251
       
261
       
 
       
    setFollowCount(0);

     

       
252
       
262
       
 
       
    setNotice(

     
···

       
287
       
297
       
 
       
};

     

       
288
       
298
       
 
       


     

       
289
       
299
       
 
       
const Follows: Component = () => {

     

       
300
       
300
       
+
       
  const [selectedCount, setSelectedCount] = createSignal(0);

     

       
301
       
301
       
+
       


     

       
302
       
302
       
+
       
  createEffect(() => {

     

       
303
       
303
       
+
       
    setSelectedCount(followRecords.filter((record) => record.toDelete).length);

     

       
304
       
304
       
+
       
  });

     

       
305
       
305
       
+
       


     

       
290
       
306
       
 
       
  function editRecords(

     

       
291
       
307
       
 
       
    status: RepoStatus,

     

       
292
       
308
       
 
       
    field: keyof FollowRecord,

     

       
293
       
309
       
 
       
    value: boolean,

     

       
294
       
310
       
 
       
  ) {

     

       
295
       
295
       
-
       
    followRecords.forEach((record, index) => {

     

       
296
       
296
       
-
       
      if (record.status & status) setFollowRecords(index, field, value);

     

       
311
       
311
       
+
       
    const range = followRecords.map((record, index) => {

     

       
312
       
312
       
+
       
      if (record.status & status) return index;

     

       
297
       
313
       
 
       
    });

     

       
314
       
314
       
+
       
    setFollowRecords(

     

       
315
       
315
       
+
       
      range.filter((i) => i !== undefined),

     

       
316
       
316
       
+
       
      field,

     

       
317
       
317
       
+
       
      value,

     

       
318
       
318
       
+
       
    );

     

       
298
       
319
       
 
       
  }

     

       
299
       
320
       
 
       


     

       
300
       
321
       
 
       
  const options: { status: RepoStatus; label: string }[] = [

     
···

       
348
       
369
       
 
       
                  onChange={(e) =>

     

       
349
       
370
       
 
       
                    editRecords(

     

       
350
       
371
       
 
       
                      option.status,

     

       
351
       
351
       
-
       
                      "toBeDeleted",

     

       
372
       
372
       
+
       
                      "toDelete",

     

       
352
       
373
       
 
       
                      e.currentTarget.checked,

     

       
353
       
374
       
 
       
                    )

     

       
354
       
375
       
 
       
                  }

     
···

       
360
       
381
       
 
       
            </div>

     

       
361
       
382
       
 
       
          )}

     

       
362
       
383
       
 
       
        </For>

     

       
384
       
384
       
+
       
        <div class="min-w-36 pt-3 sm:pt-0">

     

       
385
       
385
       
+
       
          <span>

     

       
386
       
386
       
+
       
            Selected: {selectedCount()}/{followRecords.length}

     

       
387
       
387
       
+
       
          </span>

     

       
388
       
388
       
+
       
        </div>

     

       
363
       
389
       
 
       
      </div>

     

       
364
       
390
       
 
       
      <div class="sm:min-w-96">

     

       
365
       
391
       
 
       
        <For each={followRecords}>

     
···

       
371
       
397
       
 
       
                    type="checkbox"

     

       
372
       
398
       
 
       
                    id={"record" + index()}

     

       
373
       
399
       
 
       
                    class="h-4 w-4 rounded"

     

       
374
       
374
       
-
       
                    checked={record.toBeDeleted}

     

       
400
       
400
       
+
       
                    checked={record.toDelete}

     

       
375
       
401
       
 
       
                    onChange={(e) =>

     

       
376
       
402
       
 
       
                      setFollowRecords(

     

       
377
       
403
       
 
       
                        index(),

     

       
378
       
378
       
-
       
                        "toBeDeleted",

     

       
404
       
404
       
+
       
                        "toDelete",

     

       
379
       
405
       
 
       
                        e.currentTarget.checked,

     

       
380
       
406
       
 
       
                      )

     

       
381
       
407
       
 
       
                    }

     

       
382
       
408
       
 
       
                  />

     

       
383
       
409
       
 
       
                </div>

     

       
384
       
384
       
-
       
                <div classList={{ "bg-red-300": record.toBeDeleted }}>

     

       
410
       
410
       
+
       
                <div classList={{ "bg-red-300": record.toDelete }}>

     

       
385
       
411
       
 
       
                  <label for={"record" + index()} class="flex flex-col">

     

       
386
       
412
       
 
       
                    <span>@{record.handle}</span>

     

       
387
       
413
       
 
       
                    <span>{record.did}</span>

     
···

       
430
       
456
       
 
       
      <Login />

     

       
431
       
457
       
 
       
      <Show when={loginState()}>

     

       
432
       
458
       
 
       
        <Fetch />

     

       
433
       
433
       
-
       
        <Show when={followRecords.length}>

     

       
459
       
459
       
+
       
        <Show when={fetchState()}>

     

       
434
       
460
       
 
       
          <Follows />

     

       
435
       
461
       
 
       
        </Show>

     

       
436
       
462
       
 
       
      </Show>