Merge pull request #252 from effectai/dev

Dev

components/CampaignList.vue

@@ -1,9 +1,4 @@
 <template>
-  <TasksAvailableBanner :totalTasks="totalTasks"/>
-
-  <h2 class="title mb-0">
-    All Datasets
-  </h2>
   <div class="campaign-list">
     <div v-if="loading">
       <slot name="loading" />
@@ -57,6 +52,7 @@ const updateTotalTasks = (tasks: number) => {
 </script>
 
 <style scoped>
+
 .campaign-pagination {
   display: inline-flex;
   gap: 5px;

components/CampaignTableRow.vue

@@ -18,15 +18,15 @@
 			</div>
 		</td>
 		<td>
-			<span v-if="tasksAvailable.campaignTasksAvailable === null">
+			<span v-if="campaign.campaignTasksAvailable === null">
 				{{ campaign.total_tasks }} tasks
 			</span>
 			<span v-else>
-				{{ tasksAvailable.campaignTasksAvailable }}/{{ campaign.total_tasks }} left
-				<small v-if="tasksAvailable.campaignTasksAvailable > tasksAvailable.batchTaskAvailable">
+				{{ campaign.campaignTasksAvailable }}/{{ campaign.total_tasks }} left
+				<small v-if="campaign.campaignTasksAvailable > campaign.batchTaskAvailable">
 					<br>
-					<span v-if="tasksAvailable.batchTaskAvailable">
-						{{ tasksAvailable.batchTaskAvailable }} tasks in current batch
+					<span v-if="campaign.batchTaskAvailable">
+						{{ campaign.batchTaskAvailable }} tasks in current batch
 					</span>
 					<span v-else>
 						Wait for current batch to finish
@@ -46,90 +46,15 @@
 <script setup lang='ts'>
 import { getPrice, type CampaignWithInfo } from "@effectai/sdk";
 
-const {
-	useReservations,
-	useReservationsCampaign,
-	isLoggedIn,
-	useBatch,
-	vAccount,
-} = useEffectClient();
-const { isReserved } = useReservations();
-const emit = defineEmits(['tasks-counted']);
-
 const efxPrice = await getPrice();
 
 const props = defineProps<{
 	campaign: CampaignWithInfo;
 	accTaskIndex: number;
 }>();
 
-const fetchBatch = ref(false);
-const { data: batch } = useBatch(props.campaign.active_batch, fetchBatch);
-
-const { data: campaignReservations } = useReservationsCampaign(
-	ref(props.campaign.id),
-);
-
 const router = useRouter();
 
-const tasksAvailable = computed(() => {
-	let campaignTasksAvailable =
-		props.campaign.total_tasks - props.campaign.reservations_done;
-	let batchTaskAvailable = campaignTasksAvailable;
-	let current_task_idx = props.campaign.reservations_done - 1;
-	const batch_reservations = campaignReservations.value?.filter(
-		(r) => r.batch_id == props.campaign.active_batch,
-	);
-	if (isLoggedIn.value) {
-		if (campaignTasksAvailable || batch_reservations?.length) {
-			fetchBatch.value = true;
-			if (!batch.value)
-				return { campaignTasksAvailable: null, batchTaskAvailable: null };
-
-			const user_did_tasks_in_batch =
-				props.accTaskIndex >= batch.value.start_task_idx;
-			if (user_did_tasks_in_batch) {
-				// User already did tasks in active batch
-				if (props.accTaskIndex > current_task_idx) {
-					// Update current_task_idx if we are further than the completed tasks `
-					current_task_idx = props.accTaskIndex;
-				}
-			}
-			batchTaskAvailable =
-				batch.value.start_task_idx +
-				batch.value.num_tasks -
-				1 -
-				current_task_idx;
-			if (user_did_tasks_in_batch) {
-				// Also lower the campaign available tasks if user already did tasks in active batch that are not completed yet
-				campaignTasksAvailable -=
-					current_task_idx - (props.campaign.reservations_done - 1);
-			}
-		}
-	}
-	if (batch_reservations) {
-		for (const reservation of batch_reservations) {
-			if (
-				Date.now() > reservation.reserved_on + props.campaign.max_task_time ||
-				reservation.account_id == vAccount.value?.id
-			) {
-				// Reservation expired or your own reservation
-				if (reservation.task_idx <= current_task_idx) {
-					// TODO: Check if we need <= instead of <
-					// Only bump batch/campaign task_available if we were already passed the task_idx
-					batchTaskAvailable++;
-					campaignTasksAvailable++;
-				}
-			}
-		}
-	}
-	return {
-		campaignTasksAvailable,
-		batchTaskAvailable,
-	};
-});
-
-emit('tasks-counted', tasksAvailable.value.campaignTasksAvailable);
 
 </script>
 

components/ProgressBar.vue

@@ -34,7 +34,6 @@ const props = defineProps<{
   width: 0;
   height: 10px;
   background-color: #4caf50;
-  /* height: 100%; */
   border-radius: 10px;
   transition: 0.5s
 }

components/ReservationCard.vue

@@ -15,7 +15,7 @@
       </div>
       <ProgressBar
         :reverse="false"
-        :progress= getProgress(campaign)
+        :progress="getProgress(campaign)"
       />
       <ForceButton
         :is-loading="loading"
@@ -82,11 +82,6 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-button {
-  width: 100%;
-  margin-top: auto;
-}
-
 .card-title {
   margin: 10px 0 5px 0;
   font-size: 1.2em;
@@ -105,7 +100,6 @@ button {
   height:100%;
 }
 
-
 .reservation {
   display: block;
   min-width:auto;

components/ReservationsList.vue

@@ -38,7 +38,7 @@ const sortedReservations = computed(() => {
 <style>
 
 .reservation-list{
-  margin-top: var(--spacing-4);
+  margin: var(--spacing-4) 0;
 }
 
 .reservation-container{

components/TasksAvailableBanner.vue

@@ -1,14 +1,16 @@
 <template>
 <div class="tasks-available-banner">
-    <p>You have {{ totalTasks }} new tasks available!</p>
-    <button class="button">View tasks</button>
+    <p>You have {{ totalTasksAvailable }} new tasks available!</p>
 </div>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
-	totalTasks: number;
-}>();
+    const {useCampaigns} = useEffectClient();
+
+    const { totalTasksAvailable, data: campaigns } = useCampaigns({
+        calculateAvailableTasks: true
+    });
+
 </script>
 
 <style scoped>

composables/useEffectClient.ts

@@ -29,6 +29,9 @@ import {
 	getAccountAssets,
 	getAllCampaigns,
 	getBatchById,
+	type CampaignWithInfo,
+	type Campaign,
+	type NameType,
 } from "@effectai/sdk";
 
 import {
@@ -46,21 +49,32 @@ export const persister = experimental_createPersister({
 	storage: window?.localStorage ? localStorage : undefined,
 });
 
+export interface CampaignWithTasks extends Campaign {
+	campaignTasksAvailable?: number | null;
+	batchTaskAvailable?: number | null;
+}
+
 export interface ClientStore {
 	client: Ref<Client>;
 	isLoggedIn: Ref<boolean>;
 	isWalletConnecting: Ref<boolean>;
 
-	userName: Ref<Name | null>;
-	permission: Ref<Name | null>;
+	userName: Ref<NameType | null>;
+	permission: Ref<NameType | null>;
 	vAccount: Ref<Account | null>;
 
 	useForceSettings: () => UseQueryReturnType<Settings, Error>;
 
-	useCampaigns: () => UseQueryReturnType<
-		Awaited<ReturnType<typeof getAllCampaigns>>,
+	useCampaigns: ({
+		calculateAvailableTasks,
+	}: {
+		calculateAvailableTasks: boolean
+	}) => UseQueryReturnType<
+		Awaited<ReturnType<typeof getAllCampaigns> | CampaignWithTasks>,
 		Error
-	>;
+	> & {
+		totalTasksAvailable: Ref<number | false | undefined>;
+	}
 
 	useCampaign: (
 		campaignId: number,
@@ -188,18 +202,18 @@ export const createEffectClient = async (): Promise<ClientStore> => {
 				ipfsCacheDurationInMs: 600000,
 			},
 		}
-	));
+		));
 
 
 	/* --------- REACTIVE DATA --------- */
 
 	const session: Ref<EffectSession | null> = ref(null);
 
-	const userName: Ref<Name | null> = computed(
+	const userName: Ref<NameType | null> = computed(
 		() => session.value?.actor || null,
 	);
 
-	const permission: Ref<Name | null> = computed(
+	const permission: Ref<NameType | null> = computed(
 		() => session.value?.permission || null,
 	);
 
@@ -346,26 +360,54 @@ export const createEffectClient = async (): Promise<ClientStore> => {
 			},
 		});
 	};
-
-	const useCampaigns = () => {
+
+	const useCampaigns = ({
+		calculateAvailableTasks,
+	}: {
+		calculateAvailableTasks: boolean
+	} = {
+		calculateAvailableTasks: false
+	}) => {
 		const config = useRuntimeConfig();
-		return useQuery({
+
+		const query = useQuery({
 			staleTime: config.public.CAMPAIGN_CACHE_DURATION,
 			gcTime: config.public.CAMPAIGN_CACHE_DURATION,
 			queryKey: ["campaigns"],
 			queryFn: async () => {
 				const campaigns = await getAllCampaigns({
 					client: client.value,
-				});
+				}) as Campaign[];
 
 				const config = useRuntimeConfig();
 				const authorizedRequesters = config.public.AUTHORIZED_REQUESTERS;
 
-				return campaigns.filter((campaign) => {
+				const filteredCampaigns = campaigns.filter((campaign) => {
 					return authorizedRequesters.includes(campaign.owner[1]);
 				});
+
+				// add available tasks to the campaign
+				if (calculateAvailableTasks) {
+					for (const campaign of filteredCampaigns as CampaignWithTasks[]) {
+						const availableTask = await getTaskAvailableForCampaign(client.value, campaign, vAccount.value);
+						campaign.campaignTasksAvailable = availableTask.campaignTasksAvailable;
+						campaign.batchTaskAvailable = availableTask.batchTaskAvailable;
+					}
+				}
+
+				return filteredCampaigns;
 			},
 		});
+
+		const totalTasksAvailable = computed(() => calculateAvailableTasks && query.data.value && query.data.value.reduce((acc, campaign) => {
+			if(!campaign.campaignTasksAvailable) return false;
+			return acc + campaign.campaignTasksAvailable;
+		}, 0));
+
+		return {
+			...query,
+			totalTasksAvailable,
+		}
 	};
 
 	const useCampaign = (