fix: pages access (#754)

* fix: dashboard workspace activity mutation

* fix: page access operation

apps/app/components/pages/single-page-detailed-item.tsx

@@ -2,10 +2,11 @@ import React from "react";
 
 import Link from "next/link";
 import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
 
+// hooks
+import useUser from "hooks/use-user";
 // ui
-import { CustomMenu, Loader, Tooltip } from "components/ui";
+import { CustomMenu, Tooltip } from "components/ui";
 // icons
 import {
   LockClosedIcon,
@@ -29,15 +30,6 @@ type TSingleStatProps = {
   partialUpdatePage: (page: IPage, formData: Partial<IPage>) => void;
 };
 
-const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
-  ssr: false,
-  loading: () => (
-    <Loader className="p-4">
-      <Loader.Item height="100px" width="100%" />
-    </Loader>
-  ),
-});
-
 export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
   page,
   handleEditPage,
@@ -49,6 +41,8 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { user } = useUser();
+
   return (
     <div className="relative first:rounded-t last:rounded-b border">
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
@@ -106,29 +100,31 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   <StarIcon className="h-4 w-4 " color="#858E96" />
                 </button>
               )}
-              <Tooltip
+              {page.created_by === user?.id && (
-                tooltipContent={`${
+                <Tooltip
-                  page.access
+                  tooltipContent={`${
-                    ? "This page is only visible to you."
+                    page.access
-                    : "This page can be viewed by anyone in the project."
+                      ? "This page is only visible to you."
-                }`}
+                      : "This page can be viewed by anyone in the project."
-                theme="dark"
+                  }`}
-              >
+                  theme="dark"
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    partialUpdatePage(page, { access: page.access ? 0 : 1 });
-                  }}
                 >
-                  {page.access ? (
+                  <button
-                    <LockClosedIcon className="h-4 w-4" color="#858e96" />
+                    type="button"
-                  ) : (
+                    onClick={(e) => {
-                    <LockOpenIcon className="h-4 w-4" color="#858e96" />
+                      e.preventDefault();
-                  )}
+                      e.stopPropagation();
-                </button>
+                      partialUpdatePage(page, { access: page.access ? 0 : 1 });
-              </Tooltip>
+                    }}
+                  >
+                    {page.access ? (
+                      <LockClosedIcon className="h-4 w-4" color="#858e96" />
+                    ) : (
+                      <LockOpenIcon className="h-4 w-4" color="#858e96" />
+                    )}
+                  </button>
+                </Tooltip>
+              )}
               <CustomMenu verticalEllipsis>
                 <CustomMenu.MenuItem
                   onClick={(e: any) => {

apps/app/components/pages/single-page-list-item.tsx

@@ -3,6 +3,8 @@ import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
+// hooks
+import useUser from "hooks/use-user";
 // ui
 import { CustomMenu, Tooltip } from "components/ui";
 // icons
@@ -40,6 +42,8 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { user } = useUser();
+
   return (
     <li>
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
@@ -103,29 +107,32 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                       <StarIcon className="h-4 w-4 " color="#858e96" />
                     </button>
                   )}
-                  <Tooltip
+                  {page.created_by === user?.id && (
-                    tooltipContent={`${
+                    <Tooltip
-                      page.access
+                      tooltipContent={`${
-                        ? "This page is only visible to you."
+                        page.access
-                        : "This page can be viewed by anyone in the project."
+                          ? "This page is only visible to you."
-                    }`}
+                          : "This page can be viewed by anyone in the project."
-                    theme="dark"
+                      }`}
-                  >
+                      theme="dark"
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        partialUpdatePage(page, { access: page.access ? 0 : 1 });
-                      }}
                     >
-                      {page.access ? (
+                      <button
-                        <LockClosedIcon className="h-4 w-4" color="#858e96" />
+                        type="button"
-                      ) : (
+                        onClick={(e) => {
-                        <LockOpenIcon className="h-4 w-4" color="#858e96" />
+                          e.preventDefault();
-                      )}
+                          e.stopPropagation();
-                    </button>
+                          partialUpdatePage(page, { access: page.access ? 0 : 1 });
-                  </Tooltip>
+                        }}
+                      >
+                        {page.access ? (
+                          <LockClosedIcon className="h-4 w-4" color="#858e96" />
+                        ) : (
+                          <LockOpenIcon className="h-4 w-4" color="#858e96" />
+                        )}
+                      </button>
+                    </Tooltip>
+                  )}
+
                   <CustomMenu width="auto" verticalEllipsis>
                     <CustomMenu.MenuItem
                       onClick={(e: any) => {

apps/app/components/workspace/sidebar-dropdown.tsx

@@ -77,8 +77,8 @@ export const WorkspaceSidebarDropdown = () => {
         })
       )
       .finally(() => {
-        mutateUser();
         router.push("/signin");
+        mutateUser();
       });
   };
 

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -19,6 +19,7 @@ import pagesService from "services/pages.service";
 import issuesService from "services/issues.service";
 // hooks
 import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
@@ -61,6 +62,8 @@ const SinglePage: NextPage = () => {
 
   const { setToastAlert } = useToast();
 
+  const { user } = useUser();
+
   const { handleSubmit, reset, watch, setValue } = useForm<IPage>({
     defaultValues: { name: "" },
   });
@@ -411,18 +414,22 @@ const SinglePage: NextPage = () => {
                   )}
                 </Popover>
               </div>
-              {pageDetails.access ? (
+              {pageDetails.created_by === user?.id && (
-                <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
+                <>
-                  <LockClosedIcon className="h-4 w-4" />
+                  {pageDetails.access ? (
-                </button>
+                    <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
-              ) : (
+                      <LockClosedIcon className="h-4 w-4" />
-                <button
+                    </button>
-                  onClick={() => partialUpdatePage({ access: 1 })}
+                  ) : (
-                  type="button"
+                    <button
-                  className="z-10"
+                      onClick={() => partialUpdatePage({ access: 1 })}
-                >
+                      type="button"
-                  <LockOpenIcon className="h-4 w-4" />
+                      className="z-10"
-                </button>
+                    >
+                      <LockOpenIcon className="h-4 w-4" />
+                    </button>
+                  )}
+                </>
               )}
               {pageDetails.is_favorite ? (
                 <button onClick={handleRemoveFromFavorites} className="z-10">