Frontend bug fixes (#72)

* ensuring title and summary are never empty
* code editor fixes

Author: jedan2506

gui/src/app/(programmer)/code/Code.tsx

@@ -1,26 +1,26 @@
 'use client';
 import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
-import Loader from '@/components/CustomLoaders/Loader';
 import { Button } from '@nextui-org/react';
-import CustomImage from '@/components/ImageComponents/CustomImage';
 import imagePath from '@/app/imagePath';
+import Loader from '@/components/CustomLoaders/Loader';
+import CustomImage from '@/components/ImageComponents/CustomImage';
 import CustomModal from '@/components/CustomModal/CustomModal';
 import CustomInput from '@/components/CustomInput/CustomInput';
 import { createPullRequest } from '@/api/DashboardService';
 import toast from 'react-hot-toast';
 
 export default function Code() {
   const [projectURL, setProjectURL] = useState('');
-  const initialURL = useRef<string | null>(null);
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const pathName = usePathname();
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
   const [prTitle, setPRTitle] = useState<string | null>('');
   const [prDescription, setPRDescription] = useState<string | null>('');
   const [isCreatePRModalOpen, setIsCreatePRModalOpen] = useState<
     boolean | null
   >(false);
+  const initialURL = useRef<string | null>(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const pathName = usePathname();
 
   useEffect(() => {
     const storedURL = localStorage.getItem('projectURL');
@@ -96,7 +96,7 @@ export default function Code() {
         title={'Embedded Workspace'}
         style={{
           width: '100%',
-          height: 'calc(100vh - 92px)',
+          height: 'calc(100vh - 50px)',
           border: 'none',
           position: pathName === '/code' ? 'relative' : 'absolute',
           top: pathName === '/code' ? '0' : '-9999px',
@@ -109,9 +109,11 @@ export default function Code() {
 
   return (
     <div
-      className={`relative ${
-        pathName !== '/code' && 'hidden'
-      } proxima_nova h-screen w-full`}
+      className={
+        pathName !== '/code'
+          ? 'invisible'
+          : 'proxima_nova w-full` relative h-screen'
+      }
     >
       <CustomModal
         isOpen={isCreatePRModalOpen}
@@ -155,10 +157,11 @@ export default function Code() {
         </CustomModal.Footer>
       </CustomModal>
 
-      <div className={'code_header pl-2'}>
+      <div className={pathName !== '/code' ? 'hidden' : 'code_header pl-2'}>
         <span className={'secondary_color text-[13px] font-semibold'}>
           Code Editor
         </span>
+
         <Button
           className={
             'rounded-none bg-transparent px-3 text-[13px] font-semibold text-white hover:bg-gray-600'
@@ -175,8 +178,12 @@ export default function Code() {
       </div>
 
       {!isIframeLoaded && pathName === '/code' && (
-        <div className="absolute left-0 top-0 flex h-[720px] w-full items-center justify-center">
-          <Loader size={120} text="Please wait..." />
+        <div
+          className={
+            'absolute left-0 top-0 flex h-[720px] w-full items-center justify-center'
+          }
+        >
+          <Loader size={120} text={'Please wait...'} />
         </div>
       )}
       {iframeElement}

gui/src/app/(programmer)/design_workbench/page.tsx

@@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation';
 import { toGetAllStoriesOfProjectUtils } from '@/app/utils';
 import { StoryList } from '../../../../types/workbenchTypes';
 import { storyTypes } from '@/app/constants/ProjectConstants';
+import { Servers } from '@/app/constants/UtilsConstants';
 
 const DesignWorkBenchPage: React.FC = () => {
   const [storiesList, setStoriesList] = useState<StoryList | null>(null);
@@ -21,11 +22,11 @@ const DesignWorkBenchPage: React.FC = () => {
   };
 
   useEffect(() => {
-    toGetAllStoriesOfProjectUtils(setStoriesList, '', 'frontend')
+    toGetAllStoriesOfProjectUtils(setStoriesList, '', Servers.FRONTEND)
       .then()
       .catch();
     setTimeout(() => {
-      toGetAllStoriesOfProjectUtils(setStoriesList, '', 'frontend')
+      toGetAllStoriesOfProjectUtils(setStoriesList, '', Servers.FRONTEND)
         .then()
         .catch();
     }, 10000);

gui/src/app/(programmer)/layout.tsx

@@ -8,8 +8,8 @@ import { Toaster } from 'react-hot-toast';
 import { SocketProvider } from '@/context/SocketContext';
 
 export default function ProgrammerLayout({
-                                           children,
-                                         }: {
+  children,
+}: {
   children: React.ReactNode;
 }) {
   useEffect(() => {
@@ -19,18 +19,19 @@ export default function ProgrammerLayout({
   }, []);
 
   return (
-      <div className="layout">
-        <NavBar />
-        <div className="main_content">
-          <SideBar />
-          <SocketProvider>
-            <section className="content">
-              <Code />
-              {children}
-            </section>
-          </SocketProvider>
-          <Toaster />
-        </div>
+    <div className={'layout'}>
+      <NavBar />
+      <div className={'main_content'}>
+        <SideBar />
+        <SocketProvider>
+          <section className={'content'}>
+            <Code />
+            {children}
+          </section>
+        </SocketProvider>
+
+        <Toaster />
       </div>
+    </div>
   );
-}
+}

gui/src/app/constants/UtilsConstants.ts

@@ -0,0 +1,4 @@
+export const Servers = {
+  BACKEND: 'backend',
+  FRONTEND: 'frontend',
+};

gui/src/app/utils.tsx

@@ -8,6 +8,7 @@ import { removeCookie } from '@/utils/CookieUtils';
 import { ProjectTypes } from '../../types/projectsTypes';
 import toast from 'react-hot-toast';
 import { storyStatus } from '@/app/constants/BoardConstants';
+import { Servers } from '@/app/constants/UtilsConstants';
 
 export const logout = () => {
   if (typeof window !== 'undefined') {
@@ -58,19 +59,17 @@ export async function handleInProgressStoryStatus(
   setOpenSetupModelModal,
   numberOfStoriesInProgress: number,
   toUpdateStoryStatus,
+  id: string = Servers.BACKEND,
 ) {
   try {
-    const modelNotAdded = await checkModelNotAdded();
+    const modelNotAdded = await checkModelNotAdded(id);
     if (modelNotAdded) {
       setOpenSetupModelModal(true);
       return false;
     }
     if (numberOfStoriesInProgress >= 1) {
       toast.error('Cannot have two stories simultaneously In Progress', {
         style: {
-          border: '1px solid #713200',
-          padding: '16px',
-          color: '#713200',
           maxWidth: 'none',
           whiteSpace: 'nowrap',
         },
@@ -83,15 +82,15 @@ export async function handleInProgressStoryStatus(
       return true;
     }
   } catch (error) {
-    console.error(error);
+    console.error('Error while changing status: ' + error);
     return false;
   }
 }
 
 export async function toGetAllStoriesOfProjectUtils(
   setter,
   search = '',
-  type = 'backend',
+  type = Servers.BACKEND,
 ) {
   try {
     const project_id = localStorage.getItem('projectId');
@@ -154,16 +153,17 @@ export function setProjectDetails(project: ProjectTypes) {
   localStorage.setItem('projectName', project.project_name);
 }
 
-export async function checkModelNotAdded() {
+export async function checkModelNotAdded(id: string) {
   try {
     const organisation_id = localStorage.getItem('organisationId');
     const response = await getLLMAPIKeys(organisation_id);
     if (response) {
       const data = response.data;
       if (Array.isArray(data)) {
-        return data.every((model) => model.api_key === '');
+        if (id === Servers.FRONTEND)
+          return data.some((model) => model.api_key === '');
+        else return data.every((model) => model.api_key === '');
       }
-      return true;
     }
   } catch (error) {
     console.error('Error while fetching LLM API Keys: ', error);

gui/src/components/DesignStoryComponents/CreateEditDesignStory.tsx

@@ -45,6 +45,11 @@ const CreateEditDesignStory: React.FC<CreateEditDesignStoryProps> = ({
   }, [openCreateStoryModal]);
 
   const handleSubmit = () => {
+    if (!titleRef.current?.value) {
+      toast.error('Title cannot be empty');
+      return;
+    }
+
     setIsLoading(true);
     if (editTrue) {
       const data = {

gui/src/components/DesignStoryComponents/DesignStoryDetails.tsx

@@ -74,6 +74,7 @@ const DesignStoryDetails: React.FC<DesignStoryDetailsProps> = ({
       setOpenSetupModelModal,
       numberOfStoriesInProgress,
       toUpdateStoryStatus,
+      'frontend',
     );
     if (openWorkbench) {
       router.push(`/design_workbench`);

gui/src/components/StoryComponents/CreateEditStory.tsx

@@ -11,6 +11,7 @@ import { FormStoryPayload } from '../../../types/storyTypes';
 import { createStory, editStory } from '@/api/DashboardService';
 import { useBoardContext } from '@/context/Boards';
 import InputSection from '@/components/StoryComponents/InputSection';
+import toast from 'react-hot-toast';
 
 const DynamicInputSection: React.FC<DynamicInputSectionProps> = ({
   id,
@@ -90,6 +91,11 @@ const CreateEditStory: React.FC<CreateEditStoryProps> = ({
   const { editTrue, setEditTrue, storyDetails } = useBoardContext();
 
   const handleSubmit = () => {
+    if (!summaryRef.current?.value) {
+      toast.error('Summary cannot be empty');
+      return;
+    }
+
     const data = {
       story_id: story_id,
       project_id: Number(localStorage.getItem('projectId')),