From b884f4a4165e7a81ce7be1c1dcf3e6c75294eb00 Mon Sep 17 00:00:00 2001 From: YarikMix <43493788+YarikMix@users.noreply.github.com> Date: Fri, 22 Mar 2024 22:11:38 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D1=81=D0=BA=D0=B5=D0=BB=D0=B5=D1=82=D0=BE=D0=BD=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 8 +- package.json | 2 +- public/src/components/Button/Button.sass | 2 +- public/src/components/Header/header.tsx | 19 +++-- .../src/components/NoteEditor/NoteEditor.tsx | 50 ++++++++---- .../src/components/SearchBar/SearchBar.sass | 2 +- public/src/modules/api.ts | 22 ++++- public/src/modules/router.tsx | 53 +----------- public/src/modules/stores/NotesStore.ts | 45 ++++++++--- public/src/modules/stores/UserStore.ts | 1 - public/src/pages/Auth/loader.ts | 26 ++++++ public/src/pages/Notes/index.tsx | 16 ++-- public/src/pages/Notes/loader.ts | 29 +++++++ public/src/pages/Notes/style.sass | 80 ++++++++++++------- 14 files changed, 230 insertions(+), 125 deletions(-) create mode 100644 public/src/pages/Auth/loader.ts create mode 100644 public/src/pages/Notes/loader.ts diff --git a/package-lock.json b/package-lock.json index 618e36d5..6ebf40b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "@types/webpack-dev-server": "^4.7.2", "@typescript-eslint/eslint-plugin": "^7.1.1", "@typescript-eslint/parser": "^7.1.1", - "@veglem/screact": "^1.0.5", + "@veglem/screact": "^1.0.9", "@webpack-cli/generators": "^3.0.7", "babel-loader": "^9.1.3", "css-loader": "^6.10.0", @@ -3967,9 +3967,9 @@ "dev": true }, "node_modules/@veglem/screact": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@veglem/screact/-/screact-1.0.5.tgz", - "integrity": "sha512-7esZg4HrkQJLNaQ3TNAG39w/5qPepGcbcSwI8IhrU4WmxoZFXl2i/PcTZ002Wcfi+dNWW+gYwPUQMIWSr88L3w==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@veglem/screact/-/screact-1.0.9.tgz", + "integrity": "sha512-Q8Ccj0O5j9Cm4x1obNq3Mpq7nNux7PSbxElq+GZaJMT2dDYeeUhPELVRDDwa3TC/Y3M23Mi7HojfFLpEZ4MEsg==", "dev": true }, "node_modules/@webassemblyjs/ast": { diff --git a/package.json b/package.json index 392ff124..68fe1fee 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@types/webpack-dev-server": "^4.7.2", "@typescript-eslint/eslint-plugin": "^7.1.1", "@typescript-eslint/parser": "^7.1.1", - "@veglem/screact": "^1.0.5", + "@veglem/screact": "^1.0.9", "@webpack-cli/generators": "^3.0.7", "babel-loader": "^9.1.3", "css-loader": "^6.10.0", diff --git a/public/src/components/Button/Button.sass b/public/src/components/Button/Button.sass index c2651ef2..fe56dbf4 100644 --- a/public/src/components/Button/Button.sass +++ b/public/src/components/Button/Button.sass @@ -9,7 +9,7 @@ color: $white text-align: center cursor: pointer - transition: 0.3s + transition: transform 0.3s &:hover transform: scale(1.05) diff --git a/public/src/components/Header/header.tsx b/public/src/components/Header/header.tsx index 713c1ffe..2ba565fd 100644 --- a/public/src/components/Header/header.tsx +++ b/public/src/components/Header/header.tsx @@ -5,23 +5,27 @@ import {AppRouter} from "../../modules/router"; import {Logo} from "../Logo/logo"; import {Profile} from "../Profile/Profile"; import {AuthPage} from "../../pages/Auth"; -import {AppUserStore} from "../../modules/stores/UserStore"; +import {AppUserStore, UserActions, UserStoreState} from "../../modules/stores/UserStore"; +import {AppDispatcher} from "../../modules/dispatcher"; export class Header extends ScReact.Component{ state = { isAuth: false, - avatarUrl: "" + userChecked: false, + avatarUrl: false } componentDidMount() { AppUserStore.SubscribeToStore(this.updateState) + AppDispatcher.dispatch(UserActions.CHECK_USER) } - updateState = (store) => { + updateState = (store:UserStoreState) => { this.setState(state => ({ ...state, isAuth: store.isAuth, - avatarUrl: store.avatarUrl + avatarUrl: store.avatarUrl, + userChecked: true })) } @@ -29,7 +33,12 @@ export class Header extends ScReact.Component{ return ( ) } diff --git a/public/src/components/NoteEditor/NoteEditor.tsx b/public/src/components/NoteEditor/NoteEditor.tsx index 0bb3be1a..2f5e7ad3 100644 --- a/public/src/components/NoteEditor/NoteEditor.tsx +++ b/public/src/components/NoteEditor/NoteEditor.tsx @@ -10,21 +10,19 @@ export class NoteEditor extends ScReact.Component { state = { open: false, selectedNote: undefined, - saving: undefined + saving: undefined, + content: undefined } componentDidMount() { AppNotesStore.SubscribeToStore(this.updateState) - const saveNote = debounce(this.handleKeypress, 1000) - document.querySelector(".note-editor").addEventListener("input", saveNote) + document.querySelector(".note-editor").addEventListener("input", debounce(this.handleKeypress, 1000)) } handleKeypress = () => { - if (!this.state.selectedNote) { - return + if (this.state.selectedNote) { + this.saveNote() } - - this.saveNote() } saveNote = () => { @@ -37,22 +35,42 @@ export class NoteEditor extends ScReact.Component { content: contentElem.innerText } - AppDispatcher.dispatch(NotesActions.SAVE_NOTE, data) + if (data.title !== this.state.selectedNote.data.title || data.content !== this.state.selectedNote.data.content) { + AppDispatcher.dispatch(NotesActions.SAVE_NOTE, data) + } + + this.setState(state => ({ + ...state, + selectedNote: { + id: state.selectedNote.id, + data: { + title: data.title, + content: data.content + }, + update_time: state.selectedNote.update_time + } + })) } closeEditor = () => { + this.saveNote() + AppDispatcher.dispatch(NotesActions.CLOSE_NOTE) } updateState = (store:NotesStoreState) => { - // if (this.state.open && store.) - - this.setState(state => ({ - ...state, - selectedNote: store.selectedNote, - open: store.selectedNote !== undefined, - saving: store.saving - })) + console.log("updateState") + console.log("2342342342342asdf") + console.log(this.state.selectedNote) + this.setState(state => { + return { + ...state, + selectedNote: store.selectedNote, + open: store.selectedNote !== undefined, + saving: store.saving + } + }) + console.log(this.state.selectedNote) } deleteNote = () => { diff --git a/public/src/components/SearchBar/SearchBar.sass b/public/src/components/SearchBar/SearchBar.sass index 6b2af275..02f8222a 100644 --- a/public/src/components/SearchBar/SearchBar.sass +++ b/public/src/components/SearchBar/SearchBar.sass @@ -1,7 +1,7 @@ @import "/public/src/utils/variables.sass" .search - width: calc(100% - 30px) + width: 100% display: flex align-items: center padding: 12px 16px diff --git a/public/src/modules/api.ts b/public/src/modules/api.ts index 7a130873..82521bcb 100644 --- a/public/src/modules/api.ts +++ b/public/src/modules/api.ts @@ -1,4 +1,4 @@ -import {decode} from "./utils"; +import {createUUID, decode} from "./utils"; import {Note} from "./stores/NotesStore"; export const isDebug = process.env.NODE_ENV === "development"; @@ -280,7 +280,6 @@ class NoteRequests { } Update = async(note, jwt: string)=> { - console.log(note) const response = await Ajax.Post(this.baseUrl + "/" + note.id + "/edit", { headers: { "Authorization": jwt @@ -293,6 +292,25 @@ class NoteRequests { response.body.data = decode(response.body.data); return response.body } + + Add = async (jwt:string) => { + const response = await Ajax.Post(this.baseUrl + "/add", { + headers: { + "Authorization": jwt + }, + body: { + data: { + content: createUUID(), + title: "Новая заметка" + } + } + }); + + console.log(response.status) + console.log(response.body) + response.body.data = decode(response.body.data); + return response.body + } } export const AppAuthRequests = new AuthRequests(); diff --git a/public/src/modules/router.tsx b/public/src/modules/router.tsx index 7dc423d8..d6ffbecb 100644 --- a/public/src/modules/router.tsx +++ b/public/src/modules/router.tsx @@ -9,10 +9,9 @@ import {Header} from "../components/Header/header"; import {Background} from "../components/Background/Background"; import {Toasts} from "./toasts"; import NotesPageSkeleton from "../pages/Notes/Skeleton"; -import {AppUserStore, UserActions, UserStoreState} from "./stores/UserStore"; -import {AppDispatcher} from "./dispatcher"; -import {AppNotesStore} from "./stores/NotesStore"; import AuthPageSkeleton from "../pages/Auth/Skeleton"; +import {AuthPageLoader} from "../pages/Auth/loader"; +import {NotesLoader} from "../pages/Notes/loader"; type routerState = { currPage: {new(): Component } @@ -25,53 +24,6 @@ type RouterMapValue = { skeleton: {new(): Component } } -const AuthPageLoader = async () => { - const p = new Promise((resolve, reject) => { - let isAuth = undefined; - const callback = (state: UserStoreState) => { - isAuth = state.isAuth; - - AppUserStore.UnSubscribeToStore(callback); - - if (isAuth) { - AppRouter.go("/") - reject() - } else { - resolve(null) - } - } - - AppUserStore.SubscribeToStore(callback); - AppDispatcher.dispatch(UserActions.CHECK_USER) - }) - - return await p; -} - -const NotesLoader = async () => { - const p = new Promise((resolve, reject) => { - let isAuth = undefined; - const callback = (state: UserStoreState) => { - isAuth = state.isAuth; - - AppUserStore.UnSubscribeToStore(callback); - - if (isAuth) { - AppNotesStore.init().then((store) => { - resolve({notes: store.notes}); - }) - } else { - AppRouter.go("/") - reject() - } - } - - AppUserStore.SubscribeToStore(callback); - AppDispatcher.dispatch(UserActions.CHECK_USER) - }) - - return await p; -} export class Router extends ScReact.Component { private pages: Map @@ -146,6 +98,7 @@ export class Router extends ScReact.Component { // } // })); }) + } else { this.setState(s => ({ ...s, diff --git a/public/src/modules/stores/NotesStore.ts b/public/src/modules/stores/NotesStore.ts index 6c325ba3..de42c45e 100644 --- a/public/src/modules/stores/NotesStore.ts +++ b/public/src/modules/stores/NotesStore.ts @@ -3,6 +3,7 @@ import {AppNoteRequests} from "../api"; import {AppUserStore} from "./UserStore"; import {AppDispatcher} from "../dispatcher"; import {AppToasts, Toasts} from "../toasts"; +import {createUUID} from "../utils"; export type Note = { id: number, @@ -69,6 +70,9 @@ class NotesStore extends BaseStore { case NotesActions.SAVE_NOTE: await this.saveNote(action.payload); break; + case NotesActions.CREATE_EMPTY_NOTE: + await this.createEmptyNote(); + break; } }); } @@ -167,20 +171,20 @@ class NotesStore extends BaseStore { async saveNote(data) { if (this.state.selectedNote.id == data.id) { - // this.SetState(state => ({ - // ...state, - // saving: true - // })) + this.SetState(state => ({ + ...state, + saving: true + })) const note = await AppNoteRequests.Update(data, AppUserStore.state.JWT) console.log(note) AppToasts.success("Заметка успешно сохранена") - // this.SetState(state => ({ - // ...state, - // saving: false - // })) + this.SetState(state => ({ + ...state, + saving: false + })) // TODO: Смена стейта вызывает анфокус заметки ;( @@ -199,6 +203,28 @@ class NotesStore extends BaseStore { // })) } } + + async createEmptyNote() { + // TODO + + const note = await AppNoteRequests.Add(AppUserStore.state.JWT) + + // const note = { + // data: { + // content: "", + // title: "Новая заметка" + // }, + // update_time: new Date().toISOString() + // } + // + + this.SetState(state => ({ + ...state, + notes: [note, ...state.notes] + })) + + console.log(this.state.notes) + } } export const NotesActions = { @@ -210,7 +236,8 @@ export const NotesActions = { OPEN_DELETE_NOTE_DIALOG: "OPEN_DELETE_NOTE_DIALOG", CLOSE_DELETE_NOTE_DIALOG: "CLOSE_DELETE_NOTE_DIALOG", DELETE_NOTE: "DELETE_NOTE", - SAVE_NOTE: "SAVE_NOTE" + SAVE_NOTE: "SAVE_NOTE", + CREATE_EMPTY_NOTE: "CREATE_EMPTY_NOTE" } export const AppNotesStore = new NotesStore(); \ No newline at end of file diff --git a/public/src/modules/stores/UserStore.ts b/public/src/modules/stores/UserStore.ts index 2061b6f1..cc0c6c48 100644 --- a/public/src/modules/stores/UserStore.ts +++ b/public/src/modules/stores/UserStore.ts @@ -31,7 +31,6 @@ class UserStore extends BaseStore{ super(); this.state.JWT = window.localStorage.getItem('Authorization'); this.registerEvents(); - this.checkUser() } private registerEvents(){ diff --git a/public/src/pages/Auth/loader.ts b/public/src/pages/Auth/loader.ts new file mode 100644 index 00000000..00f4fd8e --- /dev/null +++ b/public/src/pages/Auth/loader.ts @@ -0,0 +1,26 @@ +import {AppUserStore, UserActions, UserStoreState} from "../../modules/stores/UserStore"; +import {AppDispatcher} from "../../modules/dispatcher"; +import {AppRouter} from "../../modules/router"; + +export const AuthPageLoader = async () => { + const p = new Promise((resolve, reject) => { + let isAuth = undefined; + const callback = (state: UserStoreState) => { + isAuth = state.isAuth; + + AppUserStore.UnSubscribeToStore(callback); + + if (isAuth) { + AppRouter.go("/") + reject() + } else { + resolve(null) + } + } + + AppUserStore.SubscribeToStore(callback); + AppDispatcher.dispatch(UserActions.CHECK_USER) + }) + + return await p; +} \ No newline at end of file diff --git a/public/src/pages/Notes/index.tsx b/public/src/pages/Notes/index.tsx index b7ad71ae..1ea3e6ae 100644 --- a/public/src/pages/Notes/index.tsx +++ b/public/src/pages/Notes/index.tsx @@ -6,6 +6,7 @@ import {NoteEditor} from "../../components/NoteEditor/NoteEditor"; import {AppNotesStore, NotesActions, NotesStoreState} from "../../modules/stores/NotesStore"; import {AppDispatcher} from "../../modules/dispatcher"; import {Modal} from "../../components/Modal/Modal"; +import {Button} from "../../components/Button/Button"; export class NotesPage extends ScReact.Component { state = { @@ -18,10 +19,6 @@ export class NotesPage extends ScReact.Component { AppNotesStore.SubscribeToStore(this.updateState) - // AppNotesStore.init().then(() => { - // this.createObserver() - // }) - this.setState(state => ({ ...state, notes: this.props.notes @@ -32,7 +29,6 @@ export class NotesPage extends ScReact.Component { componentWillUnmount() { AppDispatcher.dispatch(NotesActions.EXIT) - AppNotesStore.UnSubscribeToStore(this.updateState) } @@ -80,12 +76,20 @@ export class NotesPage extends ScReact.Component { AppDispatcher.dispatch(NotesActions.SEARCH_NOTES, value) } + createEmptyNote = () => { + console.log("createEmptyNote") + AppDispatcher.dispatch(NotesActions.CREATE_EMPTY_NOTE) + } + render() { return (