create study upon clicking + new study (#77)

Co-authored-by: Ross Newman <[email protected]>

packages/api/src/models/study.ts

@@ -32,8 +32,8 @@ const sessionSchema = new Schema<ISession>({
 });
 
 const studySchema = new Schema<IStudy>({
-  name: { type: String, required: true },
-  description: { type: String, required: true },
+  name: { type: String, default: "" },
+  description: { type: String, default: "" },
   batteries: [{ type: Schema.Types.ObjectId, ref: "CustomizedBattery" }],
   sessions: [sessionSchema],
 });

packages/api/src/routes/studies.ts

@@ -46,22 +46,25 @@ router.get("/:id", isAuthenticated, (req, res, next) => {
     .catch(next);
 });
 
-router.post("/", (req, res, next) => {
-  Study.create(req.body)
-    .then((study) => res.status(201).json(study))
-    .catch(next);
+router.post("/new", isAuthenticated, async (req, res, next) => {
+  try {
+    const user = req.user as HydratedDocument<IUser>;
+    const study = await Study.create({});
+
+    await user.updateOne({ $push: { studies: study._id } });
+    res.status(201).json(study);
+  } catch (e) {
+    next(e);
+  }
 });
 
 router.put("/:id", isAuthenticated, async (req, res, next) => {
   try {
     const study = await Study.findOneAndUpdate(
       { _id: req.params["id"] },
       req.body,
-      { upsert: true, new: true }
+      { new: true }
     );
-    const user = req.user as HydratedDocument<IUser>;
-    if (!user.studies.includes(study._id))
-      await user.updateOne({ $push: { studies: study._id } });
     res.json(study);
   } catch (e) {
     next();

packages/ui/src/api/studies.ts

@@ -19,19 +19,6 @@ axiosInstance.interceptors.response.use(
   }
 );
 
-async function getStudies() {
-  const response = await axiosInstance.get("/studies/");
-  return response.data;
-}
-
-async function deleteStudy(id: string) {
-  await axiosInstance.delete(`/studies/${id}`);
-}
-
-async function saveStudy(id: string, studyData: GetStudyResponse) {
-  await axiosInstance.put(`/studies/${id}`, studyData);
-}
-
 export interface ITaskInstance {
   _id: string;
   task: string;
@@ -51,15 +38,33 @@ export interface ICustomizedBattery {
 }
 
 export interface GetStudyResponse {
+  _id: string;
   name: string;
   description: string;
   batteries: ICustomizedBattery[];
   sessions: ISession[];
 }
+async function getStudies() {
+  const response = await axiosInstance.get<GetStudyResponse[]>("/studies/");
+  return response.data;
+}
 
 async function getStudy(id: string) {
   const result = await axiosInstance.get<GetStudyResponse>(`studies/${id}`);
   return result.data;
 }
 
-export default { getStudies, deleteStudy, getStudy, saveStudy };
+async function createStudy() {
+  const response = await axiosInstance.post<GetStudyResponse>("/studies/new");
+  return response.data;
+}
+
+async function deleteStudy(id: string) {
+  await axiosInstance.delete(`/studies/${id}`);
+}
+
+async function saveStudy(id: string, studyData: GetStudyResponse) {
+  await axiosInstance.put(`/studies/${id}`, studyData);
+}
+
+export default { getStudies, deleteStudy, getStudy, saveStudy, createStudy };

packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { useAuthStore } from "../../stores/auth";
-import { RouterLink, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import MyStudiesItem from "./components/MyStudiesItem.vue";
 import { useQuery } from "@tanstack/vue-query";
 import studiesAPI from "@/api/studies";
+import { useMutation } from "@tanstack/vue-query";
+import AppButton from "@/components/ui/AppButton.vue";
 
 const router = useRouter();
 const authStore = useAuthStore();
@@ -17,20 +19,21 @@ const { data, refetch } = useQuery({
   queryFn: studiesAPI.getStudies,
 });
 
+const { mutate, isLoading } = useMutation({
+  mutationFn: () => studiesAPI.createStudy(),
+  onSuccess: (createdStudy) => {
+    router.push({ name: "study", params: { id: createdStudy._id } });
+  },
+});
+
 const studies = data;
 </script>
-
 <template>
-  <div class="mt-14 mx-auto w-3/4 min-w-[600px]">
+  <div v-loading="isLoading" class="mt-14 mx-auto w-3/4 min-w-[600px]">
     <div class="flex items-center">
       <h1 class="text-3xl font-bold">My Studies</h1>
       <div class="flex-1"></div>
-      <RouterLink
-        :to="{ name: 'study', params: { id: 'new' } }"
-        class="flex text-sm bg-neutral-300 border border-black rounded-lg py-1 w-30 p-4 h-8 justify-center"
-      >
-        + New Study
-      </RouterLink>
+      <AppButton @click="mutate">+ New Study</AppButton>
     </div>
 
     <div class="flex flex-col">

packages/ui/src/pages/MyStudiesPage/components/MyStudiesItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import studiesAPI from "@/api/studies";
 import { useMutation } from "@tanstack/vue-query";
+import AppButton from "@/components/ui/AppButton.vue";
 
 const emit = defineEmits(["deleted"]);
 const props = defineProps<{ name: string; description: string; id: string }>();
@@ -21,17 +22,10 @@ const { mutate } = useMutation({
       {{ description }}
     </h2>
     <div class="flex-1"></div>
-    <RouterLink
-      :to="{ name: 'study', params: { id } }"
-      class="flex flex-none text-sm bg-neutral-300 justify-center border border-black rounded-lg py-1 w-20"
-    >
-      Edit
+
+    <RouterLink :to="{ name: 'study', params: { id } }">
+      <AppButton>Edit</AppButton>
     </RouterLink>
-    <button
-      class="flex flex-none text-sm bg-neutral-300 justify-center border border-black rounded-lg py-1 w-20"
-      @click="mutate()"
-    >
-      Delete
-    </button>
+    <AppButton @click="mutate">Delete</AppButton>
   </div>
 </template>

packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue

@@ -49,10 +49,7 @@ const draggableProps = {
       <div
         class="flex-1 flex gap-2 items-end justify-end min-w-[200px] flex-wrap"
       >
-        <StudyServerCode
-          v-if="!studyBuilderStore.isNewStudy"
-          class="shrink grow-0 min-w-0"
-        />
+        <StudyServerCode class="shrink grow-0 min-w-0" />
         <AppButton class="flex-none" @click="studyBuilderStore.saveStudyStore">
           Save Changes
         </AppButton>

packages/ui/src/pages/StudyBuilderPage/components/StudyServerCode.vue

@@ -7,7 +7,6 @@ const studyBuilderStore = useStudyBuilderStore();
 const copied = ref(false);
 
 function copyCode() {
-  if (!studyBuilderStore.studyId) return;
   navigator.clipboard.writeText(studyBuilderStore.studyId).then(() => {
     copied.value = true;
     setTimeout(() => {

packages/ui/src/stores/studyBuilder.ts

@@ -22,11 +22,8 @@ export const useStudyBuilderStore = defineStore("studyBuilder", () => {
   const router = useRouter();
   const queryClient = useQueryClient();
   const { mutate } = useMutation({
-    mutationFn({
-      studyId,
-      ...studyData
-    }: { studyId: string } & GetStudyResponse) {
-      return studiesAPI.saveStudy(studyId, studyData);
+    mutationFn(studyData: GetStudyResponse) {
+      return studiesAPI.saveStudy(studyData._id, studyData);
     },
     onMutate() {
       isStudySaving.value = true;
@@ -51,17 +48,12 @@ export const useStudyBuilderStore = defineStore("studyBuilder", () => {
   });
 
   function routeStudyId() {
-    if (route.name === "study") {
-      const idParam = route.params.id;
-      if (idParam && idParam !== "new") {
-        return typeof idParam === "string" ? idParam : idParam[0];
-      }
-    }
-    return new mongoose.Types.ObjectId().toString();
+    if (route.name !== "study") return "";
+    const idParam = route.params.id;
+    return typeof idParam === "string" ? idParam : idParam[0];
   }
 
-  const isNewStudy = ref(true);
-  const studyId = ref<string>();
+  const studyId = ref<string>("");
   const isStudyLoading = ref(false);
   const isStudySaving = ref(false);
   const name = ref<string>();
@@ -73,65 +65,54 @@ export const useStudyBuilderStore = defineStore("studyBuilder", () => {
 
   function initialize() {
     if (route.name !== "study") return;
-    isNewStudy.value = route.params.id == "new";
+
     studyId.value = routeStudyId();
-    isStudyLoading.value = !isNewStudy.value;
+    isStudyLoading.value = true;
     name.value = undefined;
     description.value = undefined;
     taskData.value = {};
     taskBank.value = [];
     sessionData.value = {};
     sessions.value = [];
 
-    if (isNewStudy.value) {
-      const EMPTY_SESSION = {
-        _id: new mongoose.Types.ObjectId().toString(),
-        name: "",
-        tasks: [],
-      };
-
-      sessionData.value = { [EMPTY_SESSION._id]: EMPTY_SESSION };
-      sessions.value = [EMPTY_SESSION._id];
-    } else {
-      queryClient
-        .fetchQuery({
-          queryKey: ["studies", studyId],
-          queryFn: () => {
-            return studiesAPI.getStudy(studyId.value!);
-          },
-        })
-        .then((studyData) => {
-          name.value = studyData.name;
-          description.value = studyData.description;
-          taskData.value = {};
-          studyData.batteries.forEach((b) => {
-            taskData.value[b._id] = b;
+    queryClient
+      .fetchQuery({
+        queryKey: ["studies", studyId],
+        queryFn: () => {
+          return studiesAPI.getStudy(studyId.value!);
+        },
+      })
+      .then((studyData) => {
+        name.value = studyData.name;
+        description.value = studyData.description;
+        taskData.value = {};
+        studyData.batteries.forEach((b) => {
+          taskData.value[b._id] = b;
+        });
+        taskBank.value = studyData.batteries.map((b) => b._id);
+        sessionData.value = {};
+        studyData.sessions.forEach((s) => {
+          sessionData.value[s._id] = s;
+        });
+        sessions.value = studyData.sessions.map((s) => s._id);
+        isStudyLoading.value = false;
+      })
+      .catch((err: AxiosError<Error>) => {
+        router.push("/");
+        if (err.response?.status == 404) {
+          ElNotification({
+            title: "Error",
+            message: "Study not found",
+            type: "error",
           });
-          taskBank.value = studyData.batteries.map((b) => b._id);
-          sessionData.value = {};
-          studyData.sessions.forEach((s) => {
-            sessionData.value[s._id] = s;
+        } else {
+          ElNotification({
+            title: "Error",
+            message: "Error loading study",
+            type: "error",
           });
-          sessions.value = studyData.sessions.map((s) => s._id);
-          isStudyLoading.value = false;
-        })
-        .catch((err: AxiosError<Error>) => {
-          router.push("/");
-          if (err.response?.status == 404) {
-            ElNotification({
-              title: "Error",
-              message: "Study not found",
-              type: "error",
-            });
-          } else {
-            ElNotification({
-              title: "Error",
-              message: "Error loading study",
-              type: "error",
-            });
-          }
-        });
-    }
+        }
+      });
   }
 
   const createCustomTaskMutation = useMutation({
@@ -206,7 +187,7 @@ export const useStudyBuilderStore = defineStore("studyBuilder", () => {
   function saveStudyStore() {
     if (isStudyLoading.value || isStudySaving.value) return;
     mutate({
-      studyId: studyId.value!,
+      _id: studyId.value!,
       name: name.value ?? "",
       description: description.value ?? "",
       batteries: taskBank.value.map((id) => taskData.value[id]), // TODO: fix this
@@ -218,7 +199,6 @@ export const useStudyBuilderStore = defineStore("studyBuilder", () => {
 
   return {
     studyId,
-    isNewStudy,
     isStudyLoading,
     isStudySaving,
     name,