Добавил скелетон для хедера

frontend-park-mail-ru · Mar 22, 2024 · b884f4a · b884f4a
1 parent a2ec1f6
commit b884f4a
Show file tree

Hide file tree

Showing 14 changed files with 230 additions and 125 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -5,31 +5,40 @@ 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<any, any>{
     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
         }))
     }
 
     render() {
         return (
             <header id="header">
                 <Logo />
-                { this.state.isAuth ? <Profile avatarUrl={this.state.avatarUrl}/> : (this.props.currPage !== AuthPage ? <Button label="Вход" onClick={() => AppRouter.go("/login")} /> : "") }
+                { this.state.userChecked ? (
+                    this.state.isAuth ? <Profile avatarUrl={this.state.avatarUrl}/> : (
+                        this.props.currPage !== AuthPage ? <Button label="Вход" onClick={() => AppRouter.go("/login")} /> : ""
+                    )
+                 ) : ""
+                }
             </header>
         )
     }

diff --git a/public/src/components/NoteEditor/NoteEditor.tsx b/public/src/components/NoteEditor/NoteEditor.tsx
@@ -10,21 +10,19 @@ export class NoteEditor extends ScReact.Component<any, any> {
     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<any, any> {
             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
@@ -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
@@ -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
@@ -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<any, any> }
@@ -25,53 +24,6 @@ type RouterMapValue = {
     skeleton: {new(): Component<any, any> }
 }
 
-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<any, routerState> {
     private pages: Map<string, RouterMapValue>
@@ -146,6 +98,7 @@ export class Router extends ScReact.Component<any, routerState> {
                 //     }
                 // }));
             })
+
         } else {
             this.setState(s => ({
                 ...s,

diff --git 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<NotesStoreState> {
                 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<NotesStoreState> {
     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<NotesStoreState> {
             // }))
         }
     }
+
+    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();
diff --git a/public/src/modules/stores/UserStore.ts b/public/src/modules/stores/UserStore.ts
@@ -31,7 +31,6 @@ class UserStore extends BaseStore<UserStoreState>{
         super();
         this.state.JWT = window.localStorage.getItem('Authorization');
         this.registerEvents();
-        this.checkUser()
     }
 
     private registerEvents(){