fix ToDo sample to allow build on lesson level

.changeset/happy-lizards-sneeze.md

@@ -0,0 +1,6 @@
+---
+"@osdk/create-app.template.tutorial-todo-aip-app.beta": patch
+"@osdk/create-app.template.tutorial-todo-app.beta": patch
+---
+
+update todo sample to allow build on a lesson level

examples/example-tutorial-todo-aip-app-sdk-2.x/src/CreateTaskButton.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useState } from "react";
 import css from "./CreateTaskButton.module.css";
 import CreateTaskDialog from "./CreateTaskDialog";
-import type { MockProject } from "./mocks";
+import { IProject } from "./useProjects";
 import { useProjectTasks } from "./useProjectTasks";
 
 interface CreateTaskButtonProps {
-  project: MockProject;
+  project: IProject;
   onTaskCreated: (taskId: string) => void;
 }
 

examples/example-tutorial-todo-aip-app-sdk-2.x/src/CreateTaskDialog.tsx

@@ -3,11 +3,11 @@ import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import css from "./CreateTaskDialog.module.css";
 import Dialog from "./Dialog";
-import type { MockProject } from "./mocks";
+import { IProject } from "./useProjects";
 import { useProjectTasks } from "./useProjectTasks";
 
 interface CreateTaskDialogProps {
-  project: MockProject;
+  project: IProject;
   isOpen: boolean;
   onClose: () => void;
   onTaskCreated: (taskId: string) => void;

examples/example-tutorial-todo-aip-app-sdk-2.x/src/DeleteProjectButton.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useState } from "react";
 import css from "./DeleteProjectButton.module.css";
 import DeleteProjectDialog from "./DeleteProjectDialog";
-import type { MockProject } from "./mocks";
-import useProjects from "./useProjects";
+import useProjects, { IProject } from "./useProjects";
 
 interface DeleteProjectButtonProps {
-  project: MockProject;
+  project: IProject;
 }
 
 function DeleteProjectButton({ project }: DeleteProjectButtonProps) {

examples/example-tutorial-todo-aip-app-sdk-2.x/src/DeleteProjectDialog.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useState } from "react";
 import css from "./DeleteProjectDialog.module.css";
 import Dialog from "./Dialog";
-import type { MockProject } from "./mocks";
-import useProjects from "./useProjects";
+import useProjects, { IProject } from "./useProjects";
 
 interface DeleteProjectDialogProps {
-  project: MockProject;
+  project: IProject;
   isOpen: boolean;
   onClose: () => void;
 }

examples/example-tutorial-todo-aip-app-sdk-2.x/src/Home.tsx

@@ -3,10 +3,9 @@ import CreateProjectButton from "./CreateProjectButton";
 import DeleteProjectButton from "./DeleteProjectButton";
 import css from "./Home.module.css";
 import Layout from "./Layout";
-import type { MockProject } from "./mocks";
 import { ProjectDetails } from "./ProjectDetails";
 import ProjectSelect from "./ProjectSelect";
-import useProjects from "./useProjects";
+import useProjects, { IProject } from "./useProjects";
 
 function Home() {
   const [projectId, setProjectId] = useState<string | undefined>(undefined);
@@ -15,7 +14,7 @@ function Home() {
   const project = projects?.find((p) => p.id === projectId);
 
   const handleSelectProject = useCallback(
-    (p: MockProject) => setProjectId(p.id),
+    (p: IProject) => setProjectId(p.id),
     [],
   );
 

examples/example-tutorial-todo-aip-app-sdk-2.x/src/ProjectDetails.tsx

@@ -1,14 +1,13 @@
 import aipLogo from "/aip-icon.svg";
 import { useCallback, useEffect, useRef, useState } from "react";
 import CreateTaskButton from "./CreateTaskButton";
-import type { MockProject } from "./mocks";
 import css from "./ProjectDetails.module.css";
 import TaskList from "./TaskList";
-import useProjects from "./useProjects";
+import useProjects, { IProject } from "./useProjects";
 import { useProjectTasks } from "./useProjectTasks";
 
 interface ProjectDetailsProps {
-  project: MockProject;
+  project: IProject;
 }
 
 export function ProjectDetails({ project }: ProjectDetailsProps) {

examples/example-tutorial-todo-aip-app-sdk-2.x/src/ProjectSelect.tsx

@@ -1,10 +1,10 @@
 import { ChangeEvent, useCallback } from "react";
-import { MockProject } from "./mocks";
+import { IProject } from "./useProjects";
 
 interface ProjectSelectProps {
-  project: MockProject | undefined;
-  projects: MockProject[];
-  onSelectProject: (project: MockProject) => void;
+  project: IProject | undefined;
+  projects: IProject[];
+  onSelectProject: (project: IProject) => void;
 }
 
 function ProjectSelect({

examples/example-tutorial-todo-aip-app-sdk-2.x/src/TaskList.tsx

@@ -1,10 +1,10 @@
-import type { MockProject } from "./mocks";
 import css from "./TaskList.module.css";
 import TaskListItem from "./TaskListItem";
+import { IProject } from "./useProjects";
 import { useProjectTasks } from "./useProjectTasks";
 
 interface TaskListProps {
-  project: MockProject;
+  project: IProject;
   onTaskDeleted: (taskId: string | undefined) => void;
 }
 

examples/example-tutorial-todo-aip-app-sdk-2.x/src/TaskListItem.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { MockTask } from "./mocks";
 import css from "./TaskListItem.module.css";
+import { ITask } from "./useProjectTasks";
 
 interface TaskListItemProps {
-  task: MockTask;
-  deleteTask: (task: MockTask) => Promise<void>;
+  task: ITask;
+  deleteTask: (task: ITask) => Promise<void>;
   onTaskDeleted: (taskId: string | undefined) => void;
 }
 

examples/example-tutorial-todo-aip-app-sdk-2.x/src/mocks.ts

@@ -1,69 +1,57 @@
-export interface MockProject {
-  $apiName: string;
-  $primaryKey: string;
-  id: string;
-  name: string;
-  description: string;
-  tasks: MockTask[];
-}
-
-export interface MockTask {
-  $apiName: string;
-  $primaryKey: string;
-  id: string;
-  title: string;
-  description: string;
-}
+import { IProject } from "./useProjects";
+import { ITask } from "./useProjectTasks";
 
-const projects: MockProject[] = [
+const projects: IProject[] = [
   {
     $apiName: "MockProject",
     $primaryKey: "1",
     id: "1",
     name: "Mock project",
     description: "This is a mock description",
-    tasks: [
-      {
-        $apiName: "MockTask",
-        $primaryKey: "1",
-        id: "1",
-        title: "Try to",
-        description: "task description 1",
-      },
-      {
-        $apiName: "MockTask",
-        $primaryKey: "2",
-        id: "2",
-        title: "Implement this",
-        description: "task description 2",
-      },
-      {
-        $apiName: "MockTask",
-        $primaryKey: "3",
-        id: "3",
-        title: "With the Ontology SDK!",
-        description: "task description 3",
-      },
-    ],
   },
   {
     $apiName: "MockProject",
     $primaryKey: "2",
     id: "2",
     name: "Yet another mock project",
     description: "This is another mock description",
-    tasks: [
-      {
-        $apiName: "MockTask",
-        $primaryKey: "4",
-        id: "4",
-        title: "More tasks here",
-        description: "More task description",
-      },
-    ],
   },
 ];
 
+const tasks: ITask[] = [
+  {
+    $apiName: "MockTask",
+    $primaryKey: "1",
+    id: "1",
+    title: "Try to",
+    description: "task description 1",
+    projectId: "1",
+  },
+  {
+    $apiName: "MockTask",
+    $primaryKey: "2",
+    id: "2",
+    title: "Implement this",
+    description: "task description 2",
+    projectId: "1",
+  },
+  {
+    $apiName: "MockTask",
+    $primaryKey: "3",
+    id: "3",
+    title: "With the Ontology SDK!",
+    description: "task description 3",
+    projectId: "1",
+  },
+  {
+    $apiName: "MockTask",
+    $primaryKey: "4",
+    id: "4",
+    title: "More tasks here",
+    description: "More task description",
+    projectId: "2",
+  },
+];
 async function delay(): Promise<void> {
   return new Promise((resolve) =>
     setTimeout(() => resolve(), 500 + Math.random() * 1000)
@@ -75,7 +63,7 @@ function randomId(): string {
   return `${Math.floor(Math.random() * 2 ** 31)}`;
 }
 
-async function getProjects(): Promise<MockProject[]> {
+async function getProjects(): Promise<IProject[]> {
   await delay();
   const result = [...projects];
   result.sort((p1, p2) => p1.name.localeCompare(p2.name));
@@ -84,36 +72,35 @@ async function getProjects(): Promise<MockProject[]> {
 
 async function createProject({
   name,
-  description = "",
 }: {
   name: string;
   description?: string;
-}): Promise<MockProject["$primaryKey"]> {
+}): Promise<IProject["$primaryKey"]> {
   await delay();
   const id = randomId();
   projects.push({
     $apiName: "MockProject",
     $primaryKey: id,
     id,
     name,
-    description,
-    tasks: [],
+    description: "",
   });
   return id;
 }
 
 async function getRecommendedProjectDescription(
-  project: MockProject,
+  project: IProject,
 ): Promise<string> {
   await delay();
-  if (project.tasks != null && project.tasks.length === 0) {
+  const projectTasks = tasks.filter((t) => t.projectId === project.id);
+  if (projectTasks.length === 0) {
     throw new Error("Project description recommendation requires tasks");
   }
   return `AIP Logic mock description for project`;
 }
 
 async function updateProjectDescription(
-  project: MockProject,
+  project: IProject,
 ): Promise<void> {
   await delay();
   project.description = await getRecommendedProjectDescription(project);
@@ -127,6 +114,11 @@ async function deleteProject(id: string): Promise<void> {
   }
 }
 
+async function getProjectTasks(projectId: string): Promise<ITask[]> {
+  await delay();
+  return tasks.filter((t) => t.projectId === projectId);
+}
+
 async function createTask({
   title,
   description = "",
@@ -135,19 +127,20 @@ async function createTask({
   title: string;
   description: string;
   projectId: string;
-}): Promise<MockTask["$primaryKey"]> {
+}): Promise<ITask["$primaryKey"]> {
   await delay();
   const project = projects.find((p) => p.id === projectId);
   if (project == null) {
     throw new Error(`Project ${projectId} not found!`);
   }
   const id = randomId();
-  project.tasks.unshift({
+  tasks.unshift({
     $apiName: "MockTask",
     $primaryKey: id,
     id,
     title,
     description,
+    projectId,
   });
   return id;
 }
@@ -164,11 +157,9 @@ async function getRecommendedTaskDescription(
 
 async function deleteTask(id: string): Promise<void> {
   await delay();
-  for (const project of projects) {
-    const idx = project.tasks.findIndex((t) => t.id === id);
-    if (idx !== -1) {
-      project.tasks.splice(idx, 1);
-    }
+  const idx = tasks.findIndex((t) => t.id === id);
+  if (idx !== -1) {
+    tasks.splice(idx, 1);
   }
 }
 
@@ -177,6 +168,7 @@ const Mocks = {
   createProject,
   getRecommendedProjectDescription,
   deleteProject,
+  getProjectTasks,
   createTask,
   deleteTask,
   getRecommendedTaskDescription,