fix: reworked statemachine using spawned actor

ThatConference · Sep 12, 2022 · 342cb63 · 342cb63
1 parent 2e1ded2
commit 342cb63
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 188 deletions.
diff --git a/src/_components/activities/UpNext.svelte b/src/_components/activities/UpNext.svelte
diff --git a/src/routes/partners/[partner]/index.svelte b/src/routes/partners/[partner]/index.svelte
@@ -133,7 +133,7 @@
 
 			<div in:fade={{ delay: getDelay(true) }}>
 				<div in:fade={{ delay: getDelay() }}>
-					<Followers stateMachineService={$state.context.followMachineServices} />
+					<Followers followers={$state.context.followers} />
 				</div>
 
 				<CTA

diff --git a/src/routes/partners/_components/_Followers.svelte b/src/routes/partners/_components/_Followers.svelte
@@ -1,15 +1,9 @@
 <script>
-	export let stateMachineService;
-
-	import { useService } from '@xstate/svelte';
-
+	export let followers = [];
 	import { Avatars } from '$elements';
-	import { debug } from '$utils/config';
-
-	const { state } = useService(stateMachineService, { devTools: debug.xstate });
 </script>
 
-{#if $state.matches('loaded')}
+{#if followers.length > 0}
 	<div class="bg-that-offWhite bg-opacity-50">
 		<section class="mx-auto max-w-screen-xl py-12 px-4 sm:px-6 lg:px-8 lg:py-24">
 			<div class="lg:grid lg:grid-cols-12 lg:gap-8">
@@ -23,16 +17,8 @@
 				<div class="lg:col-span-9 lg:col-start-4">
 					<div class="flex flex-col">
 						<div class="my-8 lg:my-0">
-							<Avatars attendees={$state.context.items} />
+							<Avatars attendees={followers} />
 						</div>
-
-						<!-- 
-              <div class="flex flex-row-reverse">
-                  <StandardButton class="h-3/4" on:click>
-                    View Everyone
-                  </StandardButton>
-              </div> 
-            -->
 					</div>
 				</div>
 			</div>

diff --git a/src/routes/partners/_machines/followers.js b/src/routes/partners/_machines/followers.js
diff --git a/src/routes/partners/_machines/partner.js b/src/routes/partners/_machines/partner.js
@@ -1,5 +1,5 @@
 import { goto } from '$app/navigation';
-import { createMachine, assign, spawn, send } from 'xstate';
+import { createMachine, assign } from 'xstate';
 
 import { isValidSlug } from '$machines/guards/slug';
 import { log } from '$utils/error';
@@ -9,10 +9,9 @@ import partnerLeadsMutationsApi from '$dataSources/api.that.tech/partner/leads/m
 import meQueryApi from '$dataSources/api.that.tech/me/queries';
 
 import createPartnerConfig from './partnerConfig';
-import createFollowMachine from './followers';
 
 function createServices() {
-	const { getPartner } = partnerQueryApi();
+	const { getPartner, queryFollowers } = partnerQueryApi();
 	const { toggleFollow } = partnerMutationsApi();
 	const { queryMeFollowingPartners } = meQueryApi();
 	const { addLead } = partnerLeadsMutationsApi();
@@ -22,14 +21,14 @@ function createServices() {
 			isValidSlug,
 			profileFound: (_, { data }) => data !== null,
 			profileNotFound: (_, { data }) => data === null,
-
 			isAuthenticated: (context) => context.isAuthenticated,
 			isUnAuthenticated: (context) => context.isAuthenticated
 		},
 
 		services: {
 			queryProfile: (context) => getPartner(context.slug),
 			queryMyFollowing: () => queryMeFollowingPartners(),
+			queryFollowers: (context) => queryFollowers(context.profile.id),
 			toggleFollow: (context) => toggleFollow(context.profile.id),
 			addLeadMutate: (context) => addLead(context.profile.id)
 		},
@@ -47,10 +46,6 @@ function createServices() {
 				isAuthenticated: (_, event) => event.status
 			}),
 
-			refreshFollowers: send('REFRESH', {
-				to: (context) => context.followMachineServices
-			}),
-
 			queryProfileSuccess: assign({
 				profile: (_, { data }) => data
 			}),
@@ -59,16 +54,16 @@ function createServices() {
 				isFollowing: (context, { data }) => data.includes(context.profile.id)
 			}),
 
+			queryFollowersSuccess: assign({
+				followers: (_, { data: { followers } }) => followers.members
+			}),
+
 			toggleFollowSuccess: assign({
 				isFollowing: (_, event) => event.data
 			}),
 
 			addLeadSuccess: assign({
 				leadAdded: (_, event) => event.result
-			}),
-
-			createFollowMachineServices: assign({
-				followMachineServices: (context) => spawn(createFollowMachine(context.profile))
 			})
 		}
 	};

diff --git a/src/routes/partners/_machines/partnerConfig.js b/src/routes/partners/_machines/partnerConfig.js
@@ -18,7 +18,7 @@ function createConfig(slug) {
 			slug: slug || undefined,
 			profile: undefined,
 			isAuthenticated: false,
-			followMachineServices: undefined
+			followers: []
 		},
 
 		on: {
@@ -46,7 +46,7 @@ function createConfig(slug) {
 					onDone: [
 						{
 							cond: 'profileFound',
-							actions: ['queryProfileSuccess', 'createFollowMachineServices'],
+							actions: ['queryProfileSuccess'],
 							target: 'profileLoaded'
 						},
 						{
@@ -92,20 +92,36 @@ function createConfig(slug) {
 
 						states: {
 							loadFollowing: {
-								invoke: {
-									id: 'queryMyFollowing',
-									src: 'queryMyFollowing',
-									onDone: [
-										{
-											actions: ['queryMyFollowingSuccess'],
-											target: 'loaded'
+								invoke: [
+									{
+										id: 'queryMyFollowing',
+										src: 'queryMyFollowing',
+										onDone: [
+											{
+												actions: ['queryMyFollowingSuccess'],
+												target: 'loaded'
+											}
+										],
+
+										onError: {
+											target: 'error'
+										}
+									},
+									{
+										id: 'queryFollowers',
+										src: 'queryFollowers',
+										onDone: [
+											{
+												actions: ['queryFollowersSuccess'],
+												target: 'loaded'
+											}
+										],
+
+										onError: {
+											target: 'error'
 										}
-									],
-
-									onError: {
-										target: 'error'
 									}
-								}
+								]
 							},
 
 							toggleFollow: {
@@ -114,7 +130,6 @@ function createConfig(slug) {
 									src: 'toggleFollow',
 									onDone: [
 										{
-											actions: ['refreshFollowers'],
 											target: 'loadFollowing'
 										}
 									],