Skip to content

Commit

Permalink
refactor: fix build issue, update notes and notebook features
Browse files Browse the repository at this point in the history
- Remove duplicate title in SingleNote component
- Update Sidebar styles for notebook items
  • Loading branch information
qridwan committed Sep 27, 2024
1 parent 51c4419 commit 52ebaac
Show file tree
Hide file tree
Showing 14 changed files with 3,834 additions and 1,415 deletions.
Binary file modified bun.lockb
Binary file not shown.
75 changes: 33 additions & 42 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "xbook-fe",
"name": "xnote-fe",
"private": true,
"version": "0.0.0",
"type": "module",
Expand All @@ -12,50 +12,41 @@
"prepare": "husky"
},
"dependencies": {
"@emotion/react": "^11.11.1",
"@mantine/core": "^6.0.16",
"@mantine/dates": "^6.0.16",
"@mantine/dropzone": "^6.0.16",
"@mantine/form": "^6.0.16",
"@mantine/hooks": "^6.0.16",
"@mantine/modals": "^6.0.16",
"@mantine/notifications": "^6.0.16",
"@mantine/tiptap": "^6.0.16",
"@reduxjs/toolkit": "^1.9.5",
"@tabler/icons-react": "^2.25.0",
"@tiptap/extension-highlight": "^2.1.12",
"@tiptap/extension-link": "^2.0.3",
"@tiptap/extension-subscript": "^2.1.12",
"@tiptap/extension-superscript": "^2.1.12",
"@tiptap/extension-text-align": "^2.1.12",
"@tiptap/extension-underline": "^2.1.12",
"@tiptap/pm": "^2.1.12",
"@tiptap/react": "^2.1.12",
"@tiptap/starter-kit": "^2.1.12",
"@types/node": "^20.9.0",
"@types/react-redux": "^7.1.25",
"@emotion/react": "^11.13.3",
"@mantine/core": "^6.0.22",
"@mantine/dates": "^6.0.22",
"@mantine/dropzone": "^6.0.22",
"@mantine/form": "^6.0.22",
"@mantine/hooks": "^6.0.22",
"@mantine/modals": "^6.0.22",
"@mantine/notifications": "^6.0.22",
"@reduxjs/toolkit": "^1.9.7",
"@tabler/icons-react": "^2.47.0",
"@types/node": "^20.16.9",
"@types/react-redux": "^7.1.34",
"@types/react-router-dom": "^5.3.3",
"@types/redux-logger": "^3.0.9",
"dayjs": "^1.11.9",
"emoji-picker-react": "^4.5.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.1",
"react-router-dom": "^6.14.1",
"reactjs-tiptap-editor": "^0.0.37"
"@types/redux-logger": "^3.0.13",
"dayjs": "^1.11.13",
"emoji-picker-react": "^4.12.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-redux": "^8.1.3",
"react-router-dom": "^6.26.2",
"reactjs-tiptap-editor": "^0.0.37",
"vite-plugin-dts": "^4.2.2"
},
"devDependencies": {
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"@typescript-eslint/eslint-plugin": "^5.61.0",
"@typescript-eslint/parser": "^5.61.0",
"@vitejs/plugin-react": "^4.0.1",
"eslint": "^8.44.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.1",
"husky": "^9.0.11",
"typescript": "^5.0.2",
"vite": "^4.5.5"
"@types/react": "^18.3.9",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"@vitejs/plugin-react": "^4.3.1",
"eslint": "^8.57.1",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.12",
"husky": "^9.1.6",
"typescript": "^5.6.2",
"vite": "^v5.4.8"
},
"packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
}
82 changes: 0 additions & 82 deletions src/atoms/Editor.tsx

This file was deleted.

72 changes: 72 additions & 0 deletions src/atoms/NotebookAction.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { ActionIcon, Modal, Flex } from '@mantine/core';
import { IconCheck, IconEdit, IconX } from '@tabler/icons-react';
import { useDisclosure } from '@mantine/hooks';
import { useAddtrashMutation } from '../redux/features/trash/trashApi';
import notify from '../utils/notify';
import { notebookType } from '../types/notebook';
import EditNotebookForm from '../components/NoteBook/EditNoteBookForm';



const NotebookAction = ({ notebook, css }: { notebook: notebookType, css: CSSModuleClasses[''] }) => {
const [opened, { open, close }] = useDisclosure(false);
const [addtrash] = useAddtrashMutation();
return (
<>
<Modal fullScreen
radius={0}

transitionProps={{ transition: 'fade', duration: 200 }}
shadow='sm' bg={'dark'} opened={opened} onClose={close}>
<h2>Edit NoteBook</h2>
<EditNotebookForm existingNb={notebook} />
{/* <EditNote note={note} close={close} /> */}
</Modal>
<Flex justify={'space-evenly'}>
<ActionIcon color='gray' className={css}>
<IconEdit onClick={open} size="1rem" />
</ActionIcon>
<ActionIcon color='gray' className={css}>
<IconX onClick={async () => {
const res: any = await addtrash({ note_id: notebook.id as number });
const isSuccess = Boolean(res?.data?.status === 'Success');
const icon = isSuccess ? <IconCheck /> : <IconX color="red" />;
notify(isSuccess, "Notebook moved to trash, you can retrieve it later", icon);
}} size="1rem" color='red' />
</ActionIcon>
</Flex>
{/* <Menu width={200} shadow="md">
<Menu.Target>
<ActionIcon variant='transparent' color="gray" radius="xl" size="xs">
<IconDotsVertical size={18} />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
icon={<IconEdit size={rem(14)} />}
onClick={open}
>
Edit Notebook
</Menu.Item>
<Menu.Item
color='red'
disabled={isLoading}
icon={isLoading ? <IconLoader /> : <IconX size={rem(14)} />}
onClick={async () => {
const res: any = await addtrash({ note_id: notebook.id as number });
const isSuccess = Boolean(res?.data?.status === 'Success');
const icon = isSuccess ? <IconCheck /> : <IconX color="red" />;
notify(isSuccess, "Notebook moved to trash, you can retrieve it later", icon);
}}
>
Delete
</Menu.Item>
</Menu.Dropdown>
</Menu> */}
</>

);
};

export default NotebookAction;
11 changes: 5 additions & 6 deletions src/components/Home/AddNote.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,16 @@ import { noteType } from '../../types/note';
import { IconCheck, IconX } from '@tabler/icons-react';
import { useState } from 'react';
import { useAddnoteMutation } from '../../redux/features/notes/noteApi';
import Editor from '../../atoms/Editor';
import notify from '../../utils/notify';

const AddNote = () => {
const [addnote, { isLoading }] = useAddnoteMutation();
const [tags, setTags] = useState<string[]>([]);
const [content, setContent] = useState<string>('');

const handleChangeEditor = ({ editor }: any) => {
setContent(editor?.getHTML() as string);
};
// const handleChangeEditor = ({ editor }: any) => {
// setContent(editor?.getHTML() as string);
// };

const form = useForm({
initialValues: {
Expand Down Expand Up @@ -74,10 +73,10 @@ const AddNote = () => {
/> */}
<Box >
<Text color='dark' align='start' fz={14} fw={500}>Description *</Text>
<Editor
{/* <Editor
handleChangeEditor={handleChangeEditor}
content={content}
/>
/> */}
</Box>

<NativeSelect
Expand Down
12 changes: 7 additions & 5 deletions src/components/Home/EditNote.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,15 @@ import {
} from '@mantine/core';
import { noteType } from '../../types/note';
import { IconX, IconCheck } from '@tabler/icons-react';
import { useCallback, useState } from 'react';
import { lazy, Suspense, useCallback, useState } from 'react';
import { useEditnoteMutation } from '../../redux/features/notes/noteApi';
import isColorLight from '../../utils/isColorLight';
import notify from '../../utils/notify';
import { convertSchema } from '../../utils/convertSchema';
import { useGetnotebookQuery } from '../../redux/features/notebook/notebookApi';
import { notebookType } from '../../types/notebook';
import NoteTiptap from '../Note/NoteTiptap';
const NoteTiptap = lazy(() => import('../Note/NoteTiptap'));

import { debounce } from '../../utils/debounce';

const EditNote = ({ note, close }: { note: noteType, close?: () => void }) => {
Expand Down Expand Up @@ -108,8 +109,9 @@ const EditNote = ({ note, close }: { note: noteType, close?: () => void }) => {
handleChangeEditor={handleChangeEditor}
content={content}
/> */}

<NoteTiptap onValueChange={onValueChange} content={content} />
<Suspense fallback={<div>Loading...</div>}>
<NoteTiptap onValueChange={onValueChange} content={content} />
</Suspense>
</Box>

{/* <NativeSelect
Expand Down Expand Up @@ -144,4 +146,4 @@ const EditNote = ({ note, close }: { note: noteType, close?: () => void }) => {
);
};

export default EditNote;
export default EditNote;
2 changes: 1 addition & 1 deletion src/components/Home/SingleNote.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export function SingleNote({ note }: { note: noteType }) {
<Card.Section mt={-20}>
<Box sx={{ minHeight: 50, width: '100%', background: color ?? 'grey', display: 'flex', justifyContent: 'center', alignItems: 'center', }} >
<Text truncate="end" className={classes.title} color={isLightBG ? '#4A6098' : 'white'} fw={700} >
{title}{title}
{title}
</Text>
</Box>
{create_time && <Text align='center' fz="xs" fw={600} color={'#4A6098'}>
Expand Down
11 changes: 5 additions & 6 deletions src/components/Note/NoteAddPreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ import {
} from '@mantine/core';
import { noteType } from '../../types/note';
import { IconCheck, IconX } from '@tabler/icons-react';
import { useCallback, useState } from 'react';
import { lazy, Suspense, useCallback, useState } from 'react';
import { useAddnoteMutation } from '../../redux/features/notes/noteApi';
import notify from '../../utils/notify';
import { useNavigate } from 'react-router-dom';
import { useGetnotebookQuery } from '../../redux/features/notebook/notebookApi';
import { notebookType } from '../../types/notebook';
import { convertSchema } from '../../utils/convertSchema';
import NoteTiptap from './NoteTiptap';
const NoteTiptap = lazy(() => import('./NoteTiptap'));
import { debounce } from '../../utils/debounce';
import { getTitleFromContent } from '../../utils/getTitleFromContent';

Expand Down Expand Up @@ -136,8 +136,9 @@ const NoteAddForm = ({ content, setContent, readonly }: { content: string, setCo
/> */}
</Box>
}

<NoteTiptap readonly={readonly} onValueChange={onValueChange} content={content} />
<Suspense fallback={<div>Loading...</div>}>
<NoteTiptap readonly={readonly} onValueChange={onValueChange} content={content} />
</Suspense>

<Button disabled={isLoading} fullWidth gradient={{ from: 'indigo', to: 'cyan' }} mt="xl" color='grey' type='submit' >
{!isLoading ? 'SAVE' : 'SAVING...'}
Expand All @@ -149,5 +150,3 @@ const NoteAddForm = ({ content, setContent, readonly }: { content: string, setCo
};

export default NoteAddForm;


Loading

0 comments on commit 52ebaac

Please sign in to comment.