Refactoring Phase 1 (#199)

* style: added cta at the bottom of sidebar, added missing icons as well, showing dynamic workspace member count on workspace dropdown

* refractor: running parallel request,

made create/edit label function to async function

* fix: sidebar dropdown content going below kanban items

outside click detection in need help dropdown

* refractor: making parallel api calls

fix: create state input comes at bottom, create state input gets on focus automatically, form is getting submitted on enter click

* refactoring file structure and signin page

* style: changed text and added spinner for signing in loading

* refractor: removed unused type

* fix: my issue cta in profile page sending to 404 page

* fix: added new s3 bucket url in next.config.js file

increased image modal height

* packaging UI components

* eslint config

* eslint fixes

* refactoring changes

* build fixes

* minor fixes

* adding todo comments for reference

* refactor: cleared unused imports and re ordered imports

* refactor: removed unused imports

* fix: added workspace argument to useissues hook

* refactor: removed api-routes file, unnecessary constants

* refactor: created helpers folder, removed unnecessary constants

* refactor: new context for issue view

* refactoring issues page

* build fixes

* refactoring

* refactor: create issue modal

* refactor: module ui

* fix: sub-issues mutation

* fix: create more option in create issue modal

* description form debounce issue

* refactor: global component for assignees list

* fix: link module interface

* fix: priority icons and sub-issues count added

* fix: cycle mutation in issue details page

* fix: remove issue from cycle mutation

* fix: create issue modal in home page

* fix: removed unnecessary props

* fix: updated create issue form status

* fix: settings auth breaking

* refactor: issue details page

Co-authored-by: Dakshesh Jain <dakshesh.jain14@gmail.com>
Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Co-authored-by: venkatesh-soulpage <venkatesh.marreboyina@soulpageit.com>
Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>

apps/app/layouts/app-layout.tsx

@@ -1,118 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// layouts
-import Container from "layouts/container";
-import Sidebar from "layouts/navbar/main-sidebar";
-import Header from "layouts/navbar/header";
-// services
-import projectService from "lib/services/project.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-// fetch keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-// ui
-import { Button, Spinner } from "ui";
-// components
-import CommandPalette from "components/command-palette";
-// types
-import type { Props } from "./types";
-
-const AppLayout: React.FC<Props> = ({
-  meta,
-  children,
-  noPadding = false,
-  bg = "primary",
-  noHeader = false,
-  breadcrumbs,
-  left,
-  right,
-}) => {
-  const [isJoiningProject, setIsJoiningProject] = useState(false);
-  const [toggleSidebar, setToggleSidebar] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUser();
-
-  const { data: projectMembers, mutate: projectMembersMutate } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null,
-    {
-      shouldRetryOnError: false,
-    }
-  );
-
-  return (
-    <Container meta={meta}>
-      <CommandPalette />
-      <div className="flex h-screen w-full overflow-x-hidden">
-        <Sidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
-        <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
-          {noHeader ? null : (
-            <Header
-              breadcrumbs={breadcrumbs}
-              left={left}
-              right={right}
-              setToggleSidebar={setToggleSidebar}
-            />
-          )}
-
-          {projectId && !projectMembers ? (
-            <div className="flex h-full w-full items-center justify-center">
-              <Spinner />
-            </div>
-          ) : projectMembers?.find((member) => member.member.id === user?.id) || !projectId ? (
-            <div
-              className={`w-full flex-grow ${noPadding ? "" : "p-5"} ${
-                bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
-              }`}
-            >
-              {children}
-            </div>
-          ) : (
-            <div className="flex h-full w-full items-center justify-center">
-              <div className="space-y-4 text-center">
-                <h1 className="text-2xl font-bold">You are not a member of this project</h1>
-                <p className="mx-auto w-full text-sm md:w-3/4">
-                  You are not a member of this project, but you can join this project by clicking
-                  the button below.
-                </p>
-                <div>
-                  <Button
-                    type="button"
-                    disabled={isJoiningProject}
-                    onClick={() => {
-                      setIsJoiningProject(true);
-                      projectService
-                        .joinProject(workspaceSlug as string, {
-                          project_ids: [projectId as string],
-                        })
-                        .then(() => {
-                          setIsJoiningProject(false);
-                          projectMembersMutate();
-                        })
-                        .catch((err) => {
-                          console.error(err);
-                        });
-                    }}
-                  >
-                    Click to join
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )}
-        </main>
-      </div>
-    </Container>
-  );
-};
-
-export default AppLayout;

apps/app/layouts/app-layout/app-header.tsx

@@ -0,0 +1,37 @@
+// ui
+import { Button } from "components/ui";
+// icons
+import { Bars3Icon } from "@heroicons/react/24/outline";
+
+type Props = {
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => {
+  return (
+    <>
+      <div className="flex w-full flex-col gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex items-center gap-2">
+          <div className="block md:hidden">
+            <Button
+              type="button"
+              theme="secondary"
+              className="h-8 w-8"
+              onClick={() => setToggleSidebar((prevData) => !prevData)}
+            >
+              <Bars3Icon className="h-5 w-5" />
+            </Button>
+          </div>
+          {breadcrumbs}
+          {left}
+        </div>
+        {right}
+      </div>
+    </>
+  );
+};
+
+export default Header;

apps/app/layouts/app-layout/app-sidebar.tsx

@@ -0,0 +1,44 @@
+import { Dispatch, SetStateAction } from "react";
+
+// hooks
+import useTheme from "hooks/use-theme";
+// components
+import {
+  WorkspaceHelpSection,
+  WorkspaceSidebarDropdown,
+  WorkspaceSidebarMenu,
+} from "components/workspace";
+import { ProjectSidebarList } from "components/project";
+
+export interface SidebarProps {
+  toggleSidebar: boolean;
+  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) => {
+  // theme
+  const { collapsed: sidebarCollapse } = useTheme();
+
+  return (
+    <nav className="relative z-20 h-screen">
+      <div
+        className={`${sidebarCollapse ? "" : "w-auto md:w-60"} fixed inset-y-0 top-0 ${
+          toggleSidebar ? "left-0" : "-left-60 md:left-0"
+        } flex h-full flex-col bg-white duration-300 md:relative`}
+      >
+        <div className="flex h-full flex-1 flex-col border-r border-gray-200">
+          <div className="flex h-full flex-1 flex-col pt-2">
+            <div className="px-2">
+              <WorkspaceSidebarDropdown />
+            </div>
+            <WorkspaceSidebarMenu />
+            <ProjectSidebarList />
+            <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Sidebar;

apps/app/layouts/app-layout/index.tsx

@@ -0,0 +1,120 @@
+import React, { FC, useState } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import projectService from "services/project.service";
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { Spinner } from "components/ui";
+// components
+import CommandPalette from "components/command-palette";
+import { JoinProject } from "components/project";
+// local components
+import Container from "layouts/container";
+import AppSidebar from "./app-sidebar";
+import AppHeader from "./app-header";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+export type Meta = {
+  title?: string | null;
+  description?: string | null;
+  image?: string | null;
+  url?: string | null;
+};
+
+export interface AppLayoutProps {
+  meta?: Meta;
+  children: React.ReactNode;
+  noPadding?: boolean;
+  bg?: "primary" | "secondary";
+  noHeader?: boolean;
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+}
+
+const AppLayout: FC<AppLayoutProps> = ({
+  meta,
+  children,
+  noPadding = false,
+  bg = "primary",
+  noHeader = false,
+  breadcrumbs,
+  left,
+  right,
+}) => {
+  // states
+  const [toggleSidebar, setToggleSidebar] = useState(false);
+  const [isJoiningProject, setIsJoiningProject] = useState(false);
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // user info
+  const { user } = useUser();
+  // fetching Project Members information
+  const { data: projectMembers, mutate: projectMembersMutate } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null,
+    {
+      shouldRetryOnError: false,
+    }
+  );
+  // flags
+  const isMember = projectMembers?.find((member) => member.member.id === user?.id) || !projectId;
+
+  const handleJoin = () => {
+    setIsJoiningProject(true);
+    projectService
+      .joinProject(workspaceSlug as string, {
+        project_ids: [projectId as string],
+      })
+      .then(() => {
+        setIsJoiningProject(false);
+        projectMembersMutate();
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  return (
+    <Container meta={meta}>
+      <CommandPalette />
+      <div className="flex h-screen w-full overflow-x-hidden">
+        <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
+        <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
+          {!noHeader && (
+            <AppHeader
+              breadcrumbs={breadcrumbs}
+              left={left}
+              right={right}
+              setToggleSidebar={setToggleSidebar}
+            />
+          )}
+
+          {projectId && !projectMembers ? (
+            <div className="flex h-full w-full items-center justify-center">
+              <Spinner />
+            </div>
+          ) : isMember ? (
+            <div
+              className={`w-full flex-grow ${noPadding ? "" : "p-5"} ${
+                bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
+              }`}
+            >
+              {children}
+            </div>
+          ) : (
+            <JoinProject isJoiningProject={isJoiningProject} handleJoin={handleJoin} />
+          )}
+        </main>
+      </div>
+    </Container>
+  );
+};
+
+export default AppLayout;

apps/app/layouts/container.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 // next
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -11,7 +12,7 @@ import {
   TWITTER_USER_NAME,
   SITE_KEYWORDS,
   SITE_TITLE,
-} from "constants/seo/seo-variables";
+} from "constants/seo-variables";
 
 const Container = ({ meta, children }: Props) => {
   const router = useRouter();

apps/app/layouts/default-layout.tsx

@@ -1,19 +1,14 @@
-import React from "react";
-
 // layouts
 import Container from "layouts/container";
-
 // types
 import type { Props } from "./types";
 
-const DefaultLayout: React.FC<Props> = ({ meta, children }) => {
-  return (
-    <Container meta={meta}>
-      <div className="w-full h-screen overflow-auto bg-gray-50">
-        <>{children}</>
-      </div>
-    </Container>
-  );
-};
+const DefaultLayout: React.FC<Props> = ({ meta, children }) => (
+  <Container meta={meta}>
+    <div className="w-full h-screen overflow-auto bg-gray-50">
+      <>{children}</>
+    </div>
+  </Container>
+);
 
 export default DefaultLayout;

apps/app/layouts/navbar/header.tsx

@@ -1,5 +1,5 @@
 // ui
-import { Button } from "ui";
+import { Button } from "components/ui";
 // icons
 import { Bars3Icon } from "@heroicons/react/24/outline";
 

apps/app/layouts/navbar/main-sidebar.tsx

@@ -1,11 +1,9 @@
-import React, { useState } from "react";
-
+import { useRef, useState } from "react";
 import Link from "next/link";
-
 import { Transition } from "@headlessui/react";
-
 // hooks
-import useTheme from "lib/hooks/useTheme";
+import useTheme from "hooks/use-theme";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import ProjectsList from "components/sidebar/projects-list";
 import WorkspaceOptions from "components/sidebar/workspace-options";
@@ -24,7 +22,7 @@ import {
   DiscordIcon,
   GithubIcon,
   CommentIcon,
-} from "ui/icons";
+} from "components/icons";
 
 type Props = {
   toggleSidebar: boolean;
@@ -78,12 +76,16 @@ const navigation = (workspaceSlug: string, projectId: string) => [
 ];
 
 const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
+  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
+
   const { collapsed: sidebarCollapse, toggleCollapsed } = useTheme();
 
+  useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
+
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
 
   return (
-    <nav className="relative z-20 h-screen md:z-0">
+    <nav className="relative z-20 h-screen">
       <div
         className={`${sidebarCollapse ? "" : "w-auto md:w-60"} fixed inset-y-0 top-0 ${
           toggleSidebar ? "left-0" : "-left-60 md:left-0"
@@ -145,7 +147,10 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
                   leaveFrom="transform opacity-100 scale-100"
                   leaveTo="transform opacity-0 scale-95"
                 >
-                  <div className="absolute bottom-0 left-full space-y-2 rounded-sm bg-white py-3 shadow-md">
+                  <div
+                    className="absolute bottom-0 left-full space-y-2 rounded-sm bg-white py-3 shadow-md"
+                    ref={helpOptionsRef}
+                  >
                     {helpOptions.map(({ name, Icon, href }) => (
                       <Link href={href} key={name}>
                         <a

apps/app/layouts/settings-layout.tsx

@@ -12,9 +12,10 @@ import SettingsSidebar from "layouts/navbar/settings-sidebar";
 import { NotAuthorizedView } from "components/core";
 import CommandPalette from "components/command-palette";
 // ui
-import { Button } from "ui";
+import { Button } from "components/ui";
 // types
 import { Meta } from "./types";
+import AppSidebar from "./app-layout/app-sidebar";
 
 type Props = {
   meta?: Meta;
@@ -98,6 +99,7 @@ const SettingsLayout: React.FC<Props> = ({
   memberType,
 }) => {
   const [toggleSidebar, setToggleSidebar] = useState(false);
+
   const { isMember, isOwner, isViewer, isGuest } = memberType ?? {
     isMember: false,
     isOwner: false,
@@ -112,7 +114,7 @@ const SettingsLayout: React.FC<Props> = ({
   return (
     <Container meta={meta}>
       <div className="flex h-screen w-full overflow-x-hidden">
-        <Sidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
+        <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
         <CommandPalette />
         {isMember || isOwner ? (
           <>