From 458cae935114ebb18729983d45caeb247646500d Mon Sep 17 00:00:00 2001 From: Zeyad Abuamer Date: Wed, 5 Jun 2024 16:40:09 +0100 Subject: [PATCH] Refactor to depend on exported Tutorial types --- .../src/CreateTaskButton.tsx | 4 +-- .../src/CreateTaskDialog.tsx | 4 +-- .../src/DeleteProjectButton.tsx | 4 +-- .../src/DeleteProjectDialog.tsx | 4 +-- .../template-tutorial-todo-app/src/Home.tsx | 4 +-- .../src/ProjectSelect.tsx | 8 ++--- .../src/TaskList.tsx | 4 +-- .../src/TaskListItem.tsx | 6 ++-- .../template-tutorial-todo-app/src/mocks.ts | 10 +++--- .../template-tutorial-todo-app/src/types.ts | 4 +++ .../src/useProjectTasks.ts | 17 ++++++---- .../src/useProjects.ts | 33 ++++++++++--------- 12 files changed, 57 insertions(+), 45 deletions(-) create mode 100644 packages/create-app/templates/template-tutorial-todo-app/src/types.ts diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/CreateTaskButton.tsx b/packages/create-app/templates/template-tutorial-todo-app/src/CreateTaskButton.tsx index c1d36fd24..2db0bca6d 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/CreateTaskButton.tsx +++ b/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) { diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/CreateTaskDialog.tsx b/packages/create-app/templates/template-tutorial-todo-app/src/CreateTaskDialog.tsx index b75497bea..d63ce1ed2 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/CreateTaskDialog.tsx +++ b/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; } diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/DeleteProjectButton.tsx b/packages/create-app/templates/template-tutorial-todo-app/src/DeleteProjectButton.tsx index f18c101ae..3888355cb 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/DeleteProjectButton.tsx +++ b/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) { diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/DeleteProjectDialog.tsx b/packages/create-app/templates/template-tutorial-todo-app/src/DeleteProjectDialog.tsx index f09f08d69..fc0413753 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/DeleteProjectDialog.tsx +++ b/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; } diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/Home.tsx b/packages/create-app/templates/template-tutorial-todo-app/src/Home.tsx index 755154fd9..ecbcff042 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/Home.tsx +++ b/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), [], ); diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/ProjectSelect.tsx b/packages/create-app/templates/template-tutorial-todo-app/src/ProjectSelect.tsx index aaac41f81..26e251adc 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/ProjectSelect.tsx +++ b/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({ diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/TaskList.tsx b/packages/create-app/templates/template-tutorial-todo-app/src/TaskList.tsx index ba46df82d..832e5ac9b 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/TaskList.tsx +++ b/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) { diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/TaskListItem.tsx b/packages/create-app/templates/template-tutorial-todo-app/src/TaskListItem.tsx index 14956f816..74f606feb 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/TaskListItem.tsx +++ b/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; + task: TutorialTask; + deleteTask: (task: TutorialTask) => Promise; } function TaskListItem({ task, deleteTask }: TaskListItemProps) { diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/mocks.ts b/packages/create-app/templates/template-tutorial-todo-app/src/mocks.ts index afe21c7c0..9928386bb 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/mocks.ts +++ b/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 { +async function getProjects(): Promise { 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 { +}): Promise { await delay(); const id = randomId(); projects.push({ @@ -105,7 +107,7 @@ async function createTask({ }: { title: string; projectId: string; -}): Promise { +}): Promise { await delay(); const project = projects.find((p) => p.id === projectId); if (project == null) { diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/types.ts b/packages/create-app/templates/template-tutorial-todo-app/src/types.ts new file mode 100644 index 000000000..8cbc1354e --- /dev/null +++ b/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; diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/useProjectTasks.ts b/packages/create-app/templates/template-tutorial-todo-app/src/useProjectTasks.ts index c314c2572..270d163f8 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/useProjectTasks.ts +++ b/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( +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 = useCallback( - async (title) => { + ) => Promise = 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 = useCallback( - async (task) => { + const deleteTask: (task: TutorialTask) => Promise = useCallback( + async (task: TutorialTask) => { if (project == null) { return; } diff --git a/packages/create-app/templates/template-tutorial-todo-app/src/useProjects.ts b/packages/create-app/templates/template-tutorial-todo-app/src/useProjects.ts index 2d3647ea7..d89054d5c 100644 --- a/packages/create-app/templates/template-tutorial-todo-app/src/useProjects.ts +++ b/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 = + const createProject: ( + name: string, + ) => Promise = 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 = 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 = useCallback( - async (project) => { - // Try to implement this with the Ontology SDK! - await Mocks.deleteProject(project.$primaryKey); - await mutate(); - }, - [mutate], - ); - return { projects: data, isLoading,