Merge pull request #219 from chingu-x/dev

bug fixes

CHANGELOG.md

@@ -0,0 +1,22 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/).
+
+## [1.0.0-alpha.1] - 2024-08-26
+
+### Added
+
+### Changed
+- Changed minimum character limit input field for adding new ideation https://github.com/chingu-x/chingu-dashboard/issues/171
+- Removed character count from password input https://github.com/chingu-x/chingu-dashboard/issues/173
+- Changed arrow direction of accordion in agenda section in sprints page https://github.com/chingu-x/chingu-dashboard/issues/187
+
+### Fixed
+- Fixed typo in placeholder text in new ideation form https://github.com/chingu-x/chingu-dashboard/issues/181
+- Fixed issue with saving meeting notes https://github.com/chingu-x/chingu-dashboard/issues/186
+- Fixed start meeting link https://github.com/chingu-x/chingu-dashboard/issues/188
+- Fixed display of date in error message in create meeting page when selecting a meeting time https://github.com/chingu-x/chingu-dashboard/issues/189
+- Fixed issue with weekly checkin widget displaying "due today" text in 1st week of voyage https://github.com/chingu-x/chingu-dashboard/issues/190

src/app/(main)/dashboard/components/Calendar/Calendar.test.tsx

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import { format } from "date-fns";
+import Calendar from "./Calendar";
+import { rootReducer } from "@/store/store";
+
+describe("Calendar Component", () => {
+  // not the best test. maybe refactor to e2e test later
+  it("displays the month and year on a single line", () => {
+    const store = configureStore({
+      reducer: rootReducer,
+    });
+
+    const { getByText } = render(
+      <Provider store={store}>
+        <Calendar />
+      </Provider>,
+    );
+
+    const currentDate = new Date();
+    const formattedDate = format(currentDate, "MMMM y");
+    const monthYearElement = getByText(formattedDate);
+
+    expect(monthYearElement.closest("div")).toHaveClass("whitespace-nowrap");
+  });
+});

src/app/(main)/dashboard/components/Calendar/Calendar.tsx

@@ -50,7 +50,7 @@ export default function Calendar({
       {/* CALENDAR */}
       <div className="flex h-full min-w-[400px] max-w-[400px] flex-col items-center border-base-100 p-6 min-[1200px]:min-w-[600px] min-[1200px]:border-r-2 min-[1200px]:px-28 min-[1470px]:min-w-[400px] min-[1470px]:px-6">
         <div className="flex w-full items-center">
-          <div className="flex w-full items-center justify-between gap-10 min-[1200px]:relative">
+          <div className="flex w-full items-center justify-between whitespace-nowrap min-[1200px]:relative">
             {/* CALENDAR CONTROLS */}
             <button
               type="button"

src/app/(main)/dashboard/components/voyage-dashboard/CheckInWidget.tsx

@@ -4,13 +4,14 @@ import { ArrowRightIcon, DocumentCheckIcon } from "@heroicons/react/24/outline";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import React from "react";
 import Link from "next/link";
-import { getDay } from "date-fns";
+import { isSameDay, sub } from "date-fns";
 import Button from "@/components/Button";
 import Badge from "@/components/badge/Badge";
 import routePaths from "@/utils/routePaths";
 import { getSprintCheckinIsStatus } from "@/utils/getFormStatus";
 import type { User } from "@/store/features/user/userSlice";
-import { useUser } from "@/store/hooks";
+import { useSprint, useUser } from "@/store/hooks";
+import convertStringToDate from "@/utils/convertStringToDate";
 
 interface CheckInWidgetProps {
   user: User | null;
@@ -22,7 +23,8 @@ function CheckInWidget({
   currentSprintNumber,
   teamId,
 }: CheckInWidgetProps) {
-  const { currentDate } = useUser();
+  const { timezone, currentDate } = useUser();
+  const sprintsData = useSprint();
   const userDate = currentDate ?? new Date();
 
   const sprintCheckinIsSubmitted = getSprintCheckinIsStatus(
@@ -55,14 +57,26 @@ function CheckInWidget({
   }
 
   const getBadgeValue = (userDate: Date): string => {
-    const dayOfWeek = getDay(userDate);
+    const currentSprintEndDate = sprintsData.voyage.sprints.find(
+      (sprint) => sprint.number === currentSprintNumber,
+    )?.endDate;
 
-    if (dayOfWeek >= 2 && dayOfWeek <= 6) {
-      return "";
-    } else if (dayOfWeek === 0) {
-      return "Pending Submission";
-    } else if (dayOfWeek === 1) {
-      return "Due today";
+    if (currentSprintEndDate) {
+      const currentSprintEndDateInUserTimezone = convertStringToDate(
+        currentSprintEndDate,
+        timezone,
+      );
+
+      if (isSameDay(userDate, currentSprintEndDateInUserTimezone)) {
+        return "Due today";
+      } else if (
+        isSameDay(
+          userDate,
+          sub(currentSprintEndDateInUserTimezone, { days: 1 }),
+        )
+      ) {
+        return "Pending Submission";
+      }
     }
 
     return "";

src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationForm.tsx

@@ -28,7 +28,7 @@ const validationSchema = z.object({
   title: validateTextInput({
     inputName: "Title",
     required: true,
-    minLen: 10,
+    minLen: 3,
     maxLen: 50,
   }),
   description: validateTextInput({
@@ -315,7 +315,7 @@ export default function IdeationForm() {
           <Textarea
             id="visionStatement"
             label="vision statement"
-            placeholder="Share your insoiring vision. How will you provide value and benefits to users? What long term impact do you hope to achieve?"
+            placeholder="Share your inspiring vision. How will you provide value and benefits to users? What long term impact do you hope to achieve?"
             {...register("vision")}
             errorMessage={errors.vision?.message}
             defaultValue={ideationData?.vision ?? ""}

src/app/(main)/my-voyage/[teamId]/sprints/components/meetingOverview/MeetingOverview.tsx

@@ -28,9 +28,9 @@ export default function MeetingOverview({
         </p>
       </div>
       <a
-        href={`//${meetingLink}`}
+        href={meetingLink}
         target={"_blank"}
-        rel={"noreferrer"}
+        rel={"noopener noreferrer"}
         className="w-full"
       >
         <Button

src/app/(main)/my-voyage/[teamId]/sprints/components/sections/Notes.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { z } from "zod";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -13,7 +13,7 @@ import Spinner from "@/components/Spinner";
 import { validateTextInput } from "@/utils/form/validateInput";
 import useServerAction from "@/hooks/useServerAction";
 import { editMeeting } from "@/myVoyage/sprints/sprintsService";
-import { useAppDispatch } from "@/store/hooks";
+import { useAppDispatch, useSprint } from "@/store/hooks";
 import { onOpenModal } from "@/store/features/modal/modalSlice";
 
 const validationSchema = z.object({
@@ -25,11 +25,8 @@ const validationSchema = z.object({
 
 export type ValidationSchema = z.infer<typeof validationSchema>;
 
-interface NotesProps {
-  data?: string;
-}
-
-export default function Notes({ data }: NotesProps) {
+export default function Notes() {
+  const [data, setData] = useState<string>();
   const dispatch = useAppDispatch();
   const params = useParams<{
     sprintNumber: string;
@@ -41,6 +38,14 @@ export default function Notes({ data }: NotesProps) {
     Number(params.meetingId),
   ];
 
+  const {
+    voyage: { sprints },
+  } = useSprint();
+
+  useEffect(() => {
+    setData(sprints[sprintNumber - 1].teamMeetings[0].notes);
+  }, [sprints, sprintNumber]);
+
   const {
     register,
     handleSubmit,

src/app/(main)/my-voyage/[teamId]/sprints/components/sections/Planning.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { z } from "zod";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -18,7 +18,7 @@ import {
   editSection,
   type EditSectionBody,
 } from "@/myVoyage/sprints/sprintsService";
-import { useAppDispatch } from "@/store/hooks";
+import { useAppDispatch, useSprint } from "@/store/hooks";
 import { onOpenModal } from "@/store/features/modal/modalSlice";
 
 const validationSchema = z.object({
@@ -34,11 +34,8 @@ const validationSchema = z.object({
 
 export type ValidationSchema = z.infer<typeof validationSchema>;
 
-interface PlanningProps {
-  data?: Section;
-}
-
-export default function Planning({ data }: PlanningProps) {
+export default function Planning() {
+  const [data, setData] = useState<Section>();
   const dispatch = useAppDispatch();
   const params = useParams<{
     sprintNumber: string;
@@ -50,6 +47,18 @@ export default function Planning({ data }: PlanningProps) {
     Number(params.meetingId),
   ];
 
+  const {
+    voyage: { sprints },
+  } = useSprint();
+
+  useEffect(() => {
+    setData(
+      sprints[sprintNumber - 1].teamMeetings[0].formResponseMeeting?.find(
+        (form) => form.form.id === Number(Forms.planning),
+      ),
+    );
+  }, [sprints, sprintNumber]);
+
   const goal = data?.responseGroup.responses.find(
     (response) => response.question.id === Number(PlanningQuestions.goal),
   )?.text;

src/app/(main)/my-voyage/[teamId]/sprints/components/sections/Review.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { z } from "zod";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -19,7 +19,7 @@ import {
   editSection,
 } from "@/myVoyage/sprints/sprintsService";
 import { onOpenModal } from "@/store/features/modal/modalSlice";
-import { useAppDispatch } from "@/store/hooks";
+import { useAppDispatch, useSprint } from "@/store/hooks";
 
 const validationSchema = z.object({
   what_right: validateTextInput({
@@ -38,11 +38,8 @@ const validationSchema = z.object({
 
 export type ValidationSchema = z.infer<typeof validationSchema>;
 
-interface ReviewProps {
-  data?: Section;
-}
-
-export default function Review({ data }: ReviewProps) {
+export default function Review() {
+  const [data, setData] = useState<Section>();
   const dispatch = useAppDispatch();
   const params = useParams<{
     sprintNumber: string;
@@ -54,6 +51,18 @@ export default function Review({ data }: ReviewProps) {
     Number(params.meetingId),
   ];
 
+  const {
+    voyage: { sprints },
+  } = useSprint();
+
+  useEffect(() => {
+    setData(
+      sprints[sprintNumber - 1].teamMeetings[0].formResponseMeeting?.find(
+        (form) => form.form.id === Number(Forms.review),
+      ),
+    );
+  }, [sprints, sprintNumber]);
+
   const what_right = data?.responseGroup.responses.find(
     (response) => response.question.id === Number(ReviewQuestions.what_right),
   )?.text;

src/app/(main)/my-voyage/[teamId]/sprints/components/sections/SectionBase.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { AnimatePresence, type Variants, motion } from "framer-motion";
 import {
   ChevronDownIcon,
@@ -58,6 +58,10 @@ export default function SectionBase({
     setIsLoading: setEditMeetingLoading,
   } = useServerAction(editMeeting);
 
+  useEffect(() => {
+    if (isAdded) setIsOpen(true);
+  }, [isAdded]);
+
   const handleAddSection = async () => {
     if (id !== Number(Forms.notes)) {
       const [res, error] = await addSectionAction({
@@ -174,10 +178,10 @@ export default function SectionBase({
               aria-expanded={isOpen}
               aria-controls={`accordion-panel-${title}`}
               type="button"
-              onClick={handleToggle}
+              onClick={() => handleToggle()}
               aria-label={`close ${title} panel`}
             >
-              <ChevronUpIcon className="h-10 w-10 text-base-300" />
+              <ChevronDownIcon className="h-10 w-10 text-base-300" />
             </motion.button>
           )}
           {isAdded && !isOpen && (
@@ -191,10 +195,10 @@ export default function SectionBase({
               aria-expanded={isOpen}
               aria-controls={`accordion-panel-${title}`}
               type="button"
-              onClick={handleToggle}
+              onClick={() => handleToggle()}
               aria-label={`open ${title} panel`}
             >
-              <ChevronDownIcon className="h-10 w-10 text-base-300" />
+              <ChevronUpIcon className="h-10 w-10 text-base-300" />
             </motion.button>
           )}
         </AnimatePresence>

src/app/(main)/my-voyage/[teamId]/sprints/components/sections/Sections.tsx

@@ -37,21 +37,21 @@ export default function Sections({
       title: "notes",
       icon: <DocumentTextIcon aria-hidden="true" />,
       isAdded: notes !== null,
-      children: <Notes data={notes} />,
+      children: <Notes />,
     },
     {
       id: Forms.planning,
       title: "sprint planning",
       icon: <LightBulbIcon aria-hidden="true" />,
       isAdded: planning !== undefined,
-      children: <Planning data={planning} />,
+      children: <Planning />,
     },
     {
       id: Forms.review,
       title: "retrospective & review",
       icon: <ArrowPathRoundedSquareIcon aria-hidden="true" />,
       isAdded: review !== undefined,
-      children: <Review data={review} />,
+      children: <Review />,
     },
   ];
 

src/components/inputs/TextInput.tsx

@@ -57,7 +57,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 
     function handleOnChange(e: ChangeEvent<HTMLInputElement>) {
       // Max length suggestion message
-      if (maxLength) {
+      if (maxLength && e.target.type !== "password") {
         const currentLength = e.target.value.length;
         if (currentLength > 0) {
           setCurrentSuggestion(

src/store/store.ts

@@ -34,7 +34,8 @@ const persistConfig = {
   whitelist: ["ideation", "sprint"],
 };
 
-const rootReducer = combineReducers({
+// Root reducer should be used as import directly only for tests
+export const rootReducer = combineReducers({
   modal: modalReducer,
   auth: authReducer,
   user: userReducer,

src/stories/components/Modal.stories.tsx

@@ -128,7 +128,7 @@ export const WithFormInsideWithVerticalScroll: Story = {
             <Textarea
               id="visionStatement"
               label="vision statement"
-              placeholder="Share your insoiring vision. How will you provide value and benefits to users? What long term impact do you hope to achieve?"
+              placeholder="Share your inspiring vision. How will you provide value and benefits to users? What long term impact do you hope to achieve?"
               maxLength={50}
             />
             <TextInput