Refactor to depend on exported Tutorial types

packages/create-app/templates/template-tutorial-todo-app/src/CreateTaskButton.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useState } from "react";
 import CreateTaskDialog from "./CreateTaskDialog";
-import { MockProject } from "./mocks";
+import { TutorialProject } from "./types";
 import { useProjectTasks } from "./useProjectTasks";
 
 interface CreateTaskButtonProps {
-  project: MockProject;
+  project: TutorialProject;
 }
 
 function CreateTaskButton({ project }: CreateTaskButtonProps) {

packages/create-app/templates/template-tutorial-todo-app/src/CreateTaskDialog.tsx

@@ -1,10 +1,10 @@
 import { ChangeEvent, useCallback, useEffect, useState } from "react";
 import Dialog from "./Dialog";
-import { MockProject } from "./mocks";
+import { TutorialProject } from "./types";
 import { useProjectTasks } from "./useProjectTasks";
 
 interface CreateTaskDialogProps {
-  project: MockProject;
+  project: TutorialProject;
   isOpen: boolean;
   onClose: () => void;
 }

packages/create-app/templates/template-tutorial-todo-app/src/DeleteProjectButton.tsx

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

packages/create-app/templates/template-tutorial-todo-app/src/DeleteProjectDialog.tsx

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

packages/create-app/templates/template-tutorial-todo-app/src/Home.tsx

@@ -4,9 +4,9 @@ import CreateTaskButton from "./CreateTaskButton";
 import DeleteProjectButton from "./DeleteProjectButton";
 import css from "./Home.module.css";
 import Layout from "./Layout";
-import { MockProject } from "./mocks";
 import ProjectSelect from "./ProjectSelect";
 import TaskList from "./TaskList";
+import { TutorialProject } from "./types";
 import useProjects from "./useProjects";
 
 function Home() {
@@ -15,7 +15,7 @@ function Home() {
   const project = projects?.find((p) => p.id === projectId);
 
   const handleSelectProject = useCallback(
-    (p: MockProject) => setProjectId(p.id),
+    (p: TutorialProject) => setProjectId(p.id),
     [],
   );
 

packages/create-app/templates/template-tutorial-todo-app/src/ProjectSelect.tsx

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

packages/create-app/templates/template-tutorial-todo-app/src/TaskList.tsx

@@ -1,10 +1,10 @@
-import { MockProject } from "./mocks";
 import css from "./TaskList.module.css";
 import TaskListItem from "./TaskListItem";
+import { TutorialProject } from "./types";
 import { useProjectTasks } from "./useProjectTasks";
 
 interface TaskListProps {
-  project: MockProject;
+  project: TutorialProject;
 }
 
 function TaskList({ project }: TaskListProps) {

packages/create-app/templates/template-tutorial-todo-app/src/TaskListItem.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useState } from "react";
-import { MockTask } from "./mocks";
 import css from "./TaskListItem.module.css";
+import { TutorialTask } from "./types";
 
 interface TaskListItemProps {
-  task: MockTask;
-  deleteTask: (task: MockTask) => Promise<void>;
+  task: TutorialTask;
+  deleteTask: (task: TutorialTask) => Promise<void>;
 }
 
 function TaskListItem({ task, deleteTask }: TaskListItemProps) {

packages/create-app/templates/template-tutorial-todo-app/src/mocks.ts

@@ -1,3 +1,5 @@
+import { TutorialProject, TutorialTask } from "./types";
+
 export interface MockProject {
   $apiName: string;
   $primaryKey: string;
@@ -13,7 +15,7 @@ export interface MockTask {
   title: string;
 }
 
-const projects: MockProject[] = [
+const projects: TutorialProject[] = [
   {
     $apiName: "MockProject",
     $primaryKey: "1",
@@ -67,7 +69,7 @@ function randomId(): string {
   return `${Math.floor(Math.random() * 2 ** 31)}`;
 }
 
-async function getProjects(): Promise<MockProject[]> {
+async function getProjects(): Promise<TutorialProject[]> {
   await delay();
   const result = [...projects];
   result.sort((p1, p2) => p1.name.localeCompare(p2.name));
@@ -78,7 +80,7 @@ async function createProject({
   name,
 }: {
   name: string;
-}): Promise<MockTask["$primaryKey"]> {
+}): Promise<TutorialTask["$primaryKey"]> {
   await delay();
   const id = randomId();
   projects.push({
@@ -105,7 +107,7 @@ async function createTask({
 }: {
   title: string;
   projectId: string;
-}): Promise<MockTask["$primaryKey"]> {
+}): Promise<TutorialTask["$primaryKey"]> {
   await delay();
   const project = projects.find((p) => p.id === projectId);
   if (project == null) {

packages/create-app/templates/template-tutorial-todo-app/src/types.ts

@@ -0,0 +1,4 @@
+import { MockProject, MockTask } from "./mocks";
+
+export type TutorialProject = MockProject;
+export type TutorialTask = MockTask;

packages/create-app/templates/template-tutorial-todo-app/src/useProjectTasks.ts

@@ -1,9 +1,12 @@
 import { useCallback } from "react";
 import useSWR from "swr";
-import Mocks, { MockProject, MockTask } from "./mocks";
+import Mocks from "./mocks";
+import { TutorialProject, TutorialTask } from "./types";
 
-export function useProjectTasks(project: MockProject | undefined) {
-  const { data, isLoading, isValidating, error, mutate } = useSWR<MockTask[]>(
+export function useProjectTasks(project: TutorialProject | undefined) {
+  const { data, isLoading, isValidating, error, mutate } = useSWR<
+    TutorialTask[]
+  >(
     project != null ? `projects/${project.id}/tasks` : null,
     // Try to implement this with the Ontology SDK!
     async () => {
@@ -16,8 +19,8 @@ export function useProjectTasks(project: MockProject | undefined) {
 
   const createTask: (
     title: string,
-  ) => Promise<MockTask["$primaryKey"] | undefined> = useCallback(
-    async (title) => {
+  ) => Promise<TutorialTask["$primaryKey"] | undefined> = useCallback(
+    async (title: string) => {
       if (project == null) {
         return undefined;
       }
@@ -32,8 +35,8 @@ export function useProjectTasks(project: MockProject | undefined) {
     [project, mutate],
   );
 
-  const deleteTask: (task: MockTask) => Promise<void> = useCallback(
-    async (task) => {
+  const deleteTask: (task: TutorialTask) => Promise<void> = useCallback(
+    async (task: TutorialTask) => {
       if (project == null) {
         return;
       }

packages/create-app/templates/template-tutorial-todo-app/src/useProjects.ts

@@ -1,35 +1,38 @@
 import { useCallback } from "react";
 import useSWR from "swr";
-import Mocks, { MockProject } from "./mocks";
+import Mocks from "./mocks";
+import { TutorialProject } from "./types";
 
 function useProjects() {
   const { data, isLoading, isValidating, error, mutate } = useSWR<
-    MockProject[]
+    TutorialProject[]
   >("projects", async () => {
     // Try to implement this with the Ontology SDK!
     return Mocks.getProjects();
   });
 
-  const createProject: (name: string) => Promise<MockProject["$primaryKey"]> =
+  const createProject: (
+    name: string,
+  ) => Promise<TutorialProject["$primaryKey"]> = useCallback(
+    async (name: string) => {
+      // Try to implement this with the Ontology SDK!
+      const id = await Mocks.createProject({ name });
+      await mutate();
+      return id;
+    },
+    [mutate],
+  );
+
+  const deleteProject: (project: TutorialProject) => Promise<void> =
     useCallback(
-      async (name) => {
+      async (project: TutorialProject) => {
         // Try to implement this with the Ontology SDK!
-        const id = await Mocks.createProject({ name });
+        await Mocks.deleteProject(project.$primaryKey);
         await mutate();
-        return id;
       },
       [mutate],
     );
 
-  const deleteProject: (project: MockProject) => Promise<void> = useCallback(
-    async (project) => {
-      // Try to implement this with the Ontology SDK!
-      await Mocks.deleteProject(project.$primaryKey);
-      await mutate();
-    },
-    [mutate],
-  );
-
   return {
     projects: data,
     isLoading,