Articles editor & manage articles

client/src/app/routes/constants/routes.ts

@@ -10,10 +10,13 @@ export enum ROUTES_V1 {
 
 export enum ROUTES_HOME_V1 {
   PROJECT = '/:project_id',
+  EDITOR = '/editor',
+  EDITOR_WITH_ID = '/editor/:project_id',
 }
 
 export enum ROUTES_SETTINGS_V1 {
   PROFILE = '/profile',
+  MANAGE_ARTICLES = '/manage-articles',
   INTEGRATIONS = '/integrations',
 }
 

client/src/modules/editor/components/project-editor.tsx → client/src/modules/home/modules/editor/v1/components/project-editor.tsx

@@ -2,14 +2,24 @@ import { Box, Divider, useTheme } from '@mui/material';
 import TitleIcon from '@mui/icons-material/Title';
 import LinkIcon from '@mui/icons-material/Link';
 import HttpIcon from '@mui/icons-material/Http';
-import { defaultLightThumbnail, defaultDarkThumbnail } from '../constants';
-import EditorNavbar from './editor-navbar';
-import { useA2ZTheme } from '../../../shared/hooks/use-theme';
-import InputBox from '../../../shared/components/atoms/input-box';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import PublishIcon from '@mui/icons-material/Publish';
+import SaveIcon from '@mui/icons-material/Save';
+import { Link } from 'react-router-dom';
+import {
+  defaultDarkThumbnail,
+  defaultLightThumbnail,
+} from '../../../../../../shared/constants';
+import Header from '../../../../../../shared/components/organisms/header';
+import { useA2ZTheme } from '../../../../../../shared/hooks/use-theme';
+import InputBox from '../../../../../../shared/components/atoms/input-box';
 import A2ZTextEditor from './text-editor';
 import { useProjectEditor } from '../hooks/use-project-editor';
 import { useAtomValue } from 'jotai';
 import { EditorContentAtom } from '../states';
+import A2ZTypography from '../../../../../../shared/components/atoms/typography';
+import A2ZButton from '../../../../../../shared/components/atoms/button';
+import { ROUTES_V1 } from '../../../../../../app/routes/constants/routes';
 
 const ProjectEditor = () => {
   const theme = useTheme();
@@ -26,10 +36,80 @@ const ProjectEditor = () => {
 
   return (
     <>
-      <EditorNavbar
-        title={editorContent?.title}
-        onSaveDraft={handleDraftProject}
-        onPublish={handlePublishEvent}
+      <Header
+        leftSideChildren={
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+              width: '100%',
+              minWidth: 0,
+            }}
+          >
+            <Box
+              component={Link}
+              to={ROUTES_V1.HOME}
+              sx={{
+                display: 'flex',
+                flexShrink: 0,
+                width: 40,
+              }}
+            >
+              <ArrowBackIcon
+                sx={{
+                  color: theme.palette.text.primary,
+                  fontSize: 32,
+                }}
+              />
+            </Box>
+
+            <A2ZTypography
+              variant="body1"
+              noWrap
+              text={
+                editorContent?.title?.length
+                  ? editorContent.title
+                  : 'New Project'
+              }
+            />
+          </Box>
+        }
+        rightSideActions={[
+          {
+            key: 'publish',
+            label: 'Publish',
+            icon: <PublishIcon />,
+            mobileIcon: <PublishIcon />,
+            onClick: handlePublishEvent,
+            desktopNode: (
+              <A2ZButton
+                variant="contained"
+                color="primary"
+                size="medium"
+                onClick={handlePublishEvent}
+              >
+                Publish
+              </A2ZButton>
+            ),
+          },
+          {
+            key: 'save-draft',
+            label: 'Save Draft',
+            icon: <SaveIcon />,
+            mobileIcon: <SaveIcon />,
+            onClick: handleDraftProject,
+            desktopNode: (
+              <A2ZButton
+                variant="outlined"
+                size="medium"
+                onClick={handleDraftProject}
+              >
+                Save Draft
+              </A2ZButton>
+            ),
+          },
+        ]}
       />
 
       <Box

client/src/modules/editor/components/publish-form.tsx → client/src/modules/home/modules/editor/v1/components/publish-form.tsx

@@ -2,20 +2,19 @@ import { Box, TextareaAutosize, Chip } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { useTheme } from '@mui/material/styles';
 import { useProjectEditor } from '../hooks/use-project-editor';
-import {
-  characterLimit,
-  defaultDarkThumbnail,
-  defaultLightThumbnail,
-  tagLimit,
-} from '../constants';
-import A2ZIconButton from '../../../shared/components/atoms/icon-button';
-import A2ZTypography from '../../../shared/components/atoms/typography';
-import InputBox from '../../../shared/components/atoms/input-box';
-import A2ZButton from '../../../shared/components/atoms/button';
+import { CHARACTER_LIMIT, TAG_LIMIT } from '../constants';
+import A2ZIconButton from '../../../../../../shared/components/atoms/icon-button';
+import A2ZTypography from '../../../../../../shared/components/atoms/typography';
+import InputBox from '../../../../../../shared/components/atoms/input-box';
+import A2ZButton from '../../../../../../shared/components/atoms/button';
 import { useEditor } from '../hooks';
-import { useA2ZTheme } from '../../../shared/hooks/use-theme';
+import { useA2ZTheme } from '../../../../../../shared/hooks/use-theme';
 import { useAtomValue } from 'jotai';
 import { EditorContentAtom } from '../states';
+import {
+  defaultDarkThumbnail,
+  defaultLightThumbnail,
+} from '../../../../../../shared/constants';
 
 const PublishForm = () => {
   const theme = useTheme();
@@ -156,7 +155,7 @@ const PublishForm = () => {
         />
         <TextareaAutosize
           placeholder="Your Project Description"
-          maxLength={characterLimit}
+          maxLength={CHARACTER_LIMIT}
           defaultValue={editorContent?.description}
           onChange={handleDescriptionChange}
           style={{
@@ -173,7 +172,7 @@ const PublishForm = () => {
           }}
         />
         <A2ZTypography
-          text={`${characterLimit - (editorContent?.description?.length || 0)} characters left`}
+          text={`${CHARACTER_LIMIT - (editorContent?.description?.length || 0)} characters left`}
           variant="caption"
           props={{
             color: 'text.secondary',
@@ -242,7 +241,7 @@ const PublishForm = () => {
 
         <A2ZTypography
           variant="caption"
-          text={`${tagLimit - (editorContent?.tags?.length || 0)} Tags left`}
+          text={`${TAG_LIMIT - (editorContent?.tags?.length || 0)} Tags left`}
           props={{
             color: 'text.secondary',
             sx: {

client/src/modules/editor/components/tools.tsx → client/src/modules/home/modules/editor/v1/components/tools.tsx

@@ -13,7 +13,7 @@ import Warning from '@editorjs/warning';
 import Attaches from '@editorjs/attaches';
 import LinkTool from '@editorjs/link';
 
-import { uploadImage } from '../../../infra/rest/apis/media';
+import { uploadImage } from '../../../../../../infra/rest/apis/media';
 
 const uploadImageByFile = async (e: File) => {
   return await uploadImage(e).then(({ data }) => {

client/src/modules/home/modules/editor/v1/constants/index.ts

@@ -0,0 +1,2 @@
+export const CHARACTER_LIMIT = 200;
+export const TAG_LIMIT = 10;

client/src/modules/editor/hooks/index.ts → client/src/modules/home/modules/editor/v1/hooks/index.ts

@@ -1,17 +1,13 @@
-import { useState } from 'react';
 import { useAtom } from 'jotai';
 import { EditorPageAtom, EditorPageState } from '../states';
 
 export const useEditor = () => {
-  const [loading, setLoading] = useState<boolean>(false);
   const [editorPageState, setEditorPageState] = useAtom(EditorPageAtom);
 
   const handlePublish = () => setEditorPageState(EditorPageState.PUBLISH);
   const handleBackToEditor = () => setEditorPageState(EditorPageState.EDITOR);
 
   return {
-    loading,
-    setLoading,
     editorPageState,
     setEditorPageState,
     handlePublish,