Сделал страницу просмотра шереной заметки

public/src/components/Editor/Editor.sass

@@ -50,7 +50,7 @@
 
 	.note-title
 		width: 100%
-		font-size: 28px
+		font-size: 32px
 		color: $text-main-color
 		font-weight: bold
 		margin-bottom: 5px
@@ -61,6 +61,14 @@
 			cursor: text
 
 	.note-body
+		#note-editor-inner > div:empty
+			&:hover
+				&:before
+					content: "Введите '/' для комманд"
+					color: rgba(255, 255, 255, 0.7)
+					cursor: text
+					animation: fadeIn 0.3s
+
 		.blockplaceholder
 			caret-color: transparent
 

public/src/components/Editor/Editor.ts

@@ -12,31 +12,28 @@ import {AppUserStore} from "../../modules/stores/UserStore";
 import {getCaretPosition} from "../../modules/utils";
 import {debounce} from "../../utils/debauncer";
 import {AppNotesStore} from "../../modules/stores/NotesStore";
-import {AppNoteStore} from "../../modules/stores/NoteStore";
 
 export class Editor {
     private readonly editable: HTMLElement;
     private observer: MutationObserver;
     private dropdownObserver: MutationObserver
     private dropdownCallbacks: {open: (elem: HTMLElement) => void, close: () => void}
     private tippyCallbacks: {open: (elem: HTMLElement) => void, close: () => void}
-    private open
 
-    constructor(note: PluginProps[],
-                parent: HTMLElement,
-                dropdown: {open: (elem: HTMLElement) => void, close: () => void },
-                onChange: (schema: PluginProps[]) => void,
-                tippy: {open: (elem: HTMLElement) => void, close: () => void},
-                open: boolean) {
+    constructor(
+        note: PluginProps[],
+        parent: HTMLElement,
+        dropdown: {open: (elem: HTMLElement) => void, close: () => void },
+        onChange: (schema: PluginProps[]) => void,
+        tippy: {open: (elem: HTMLElement) => void, close: () => void}
+    ) {
 
         // TODO: при наборе символов в поисковую строку фокусится редактор заметки (отключить)
 
         this.dropdownCallbacks = dropdown;
         this.tippyCallbacks = tippy;
         this.addPlugins();
 
-        this.open = open
-
         this.editable = document.createElement('div');
         this.editable.id = "note-editor-inner"
         this.editable.contentEditable = "true";

public/src/components/Editor/EditorWrapper.tsx

@@ -73,8 +73,7 @@ export class EditorWrapper extends Component<any, EditorState> {
                 this.self,
                 {open: this.openDropdown, close: this.closeDropdown},
                 this.props.onChangeContent,
-                {open: this.openTippy, close: this.closeTippy},
-                this.props.open
+                {open: this.openTippy, close: this.closeTippy}
             );
         }
     }

public/src/components/NoteEditor/NoteEditor.tsx

@@ -264,7 +264,7 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
                        handleClose={this.closeShareModal}
                        reset={false}
                        hideTitle={true}
-                       content={<SharePanel />}
+                       content={<SharePanel public={this.state.selectedNote?.public}/>}
                 />
 
                 <div className="note-background" style={`background: ${this.state.selectedNote?.header};`}>
@@ -321,7 +321,7 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
                                 showHoverTooltip={false}
                                 icon="link.svg"
                                 label="Поделиться"
-                                content={<SharePanel />}
+                                content={<SharePanel public={this.state.selectedNote?.public} />}
                             /> : ""
                         }
                     </div>

public/src/components/SharePanel/SharePanel.tsx

@@ -3,17 +3,22 @@ import {Button} from "../Button/Button";
 import "./SharePanel.sass"
 import {ToggleButton} from "../ToggleButton/ToggleButton";
 import {Img} from "../Image/Image";
-import {AppNotesStore} from "../../modules/stores/NotesStore";
+import {AppNotesStore, NotesActions} from "../../modules/stores/NotesStore";
 import {parseNoteTitle} from "../../modules/utils";
+import {AppDispatcher} from "../../modules/dispatcher";
 
 export class SharePanel extends ScReact.Component<any, any> {
 
+    handleToggle = (value:boolean) => {
+        AppDispatcher.dispatch(value ? NotesActions.SET_PUBLIC : NotesActions.SET_PRIVATE)
+    }
+
     shareToVK = () => {
         const url = "https://vk.com/share.php?url=" + window.location.href + "&title=" + parseNoteTitle(AppNotesStore.state.selectedNote.title)
         this.openShareWindow(url)
     }
 
-    shareToOdnoklassniki = () => {
+    shareToOK= () => {
         const url = "https://connect.ok.ru/offer?url=" + window.location.href + "&title=" + parseNoteTitle(AppNotesStore.state.selectedNote.title)
         this.openShareWindow(url)
     }
@@ -45,7 +50,7 @@ export class SharePanel extends ScReact.Component<any, any> {
                     <h3>Поделиться ссылкой</h3>
                     <div className="share_panel__share-link-container__center-container">
                         <span>Просматривать могут все, у кого есть ссылка</span>
-                        <ToggleButton />
+                        <ToggleButton value={this.props.public} onToggle={this.handleToggle}/>
                     </div>
                     <input type="text" disabled className="share_panel__share-link-container__input" value="https://you-note.ru/notes/4a644626-c335-4728-bb82-f63e9844eb74"/>
                     <Button label="Скопировать"/>
@@ -54,7 +59,7 @@ export class SharePanel extends ScReact.Component<any, any> {
                     <h3>Поделиться через соц. сети</h3>
                     <div className="share_panel__social-btns-container__bottom-container">
                         <Img src="vk.png" className="social-icon" onClick={this.shareToVK}/>
-                        <Img src="odnoklassniki.png" className="social-icon" onClick={this.shareToOdnoklassniki} />
+                        <Img src="odnoklassniki.png" className="social-icon" onClick={this.shareToOK} />
                         <Img src="whatsapp.png" className="social-icon" onClick={this.shareToWhatsApp} />
                     </div>
                 </div>

public/src/components/ToggleButton/ToggleButton.tsx

@@ -1,7 +1,13 @@
 import {ScReact} from '@veglem/screact';
 import './ToggleButton.sass';
 
-export class ToggleButton extends ScReact.Component<any, any> {
+type ToggleButtonProps = {
+    label?: string
+    value: boolean
+    onToggle: (value) => void
+}
+
+export class ToggleButton extends ScReact.Component<ToggleButtonProps, any> {
     state = {
         select: false
     };

public/src/modules/api.ts

@@ -83,7 +83,7 @@ const Ajax = {
         return Ajax.Request(RequestMethods.POST, url, params);
     },
 
-    Get:  async (url: string, params: RequestParams): Promise<Response> => {
+    Get:  async (url: string, params?: RequestParams): Promise<Response> => {
         return Ajax.Request(RequestMethods.GET, url, params);
     },
 
@@ -363,7 +363,7 @@ class NoteRequests {
                     content: [
                         {
                             pluginName: "textBlock",
-                            content: "Hello You-note"
+                            content: " "
                         },
                         {
                             pluginName: "div",
@@ -656,6 +656,64 @@ class NoteRequests {
 
         throw Error(response.body.message);
     }
+
+    SetPublic = async (note_id: string, jwt:string, csrf:string) => {
+        const response = await Ajax.Put(this.baseUrl + '/' + note_id + '/set_public/', {
+            headers: {
+                'Authorization': jwt,
+                'x-csrf-token': csrf
+            }
+        });
+
+        if (response.status == 200) {
+            response.body.data = JSON.parse(response.body.data)
+
+            return {
+                note: response.body,
+                status: response.status,
+                csrf: response.headers['x-csrf-token']
+            }
+        }
+
+        throw Error(response.body.message);
+    }
+
+    SetPrivate = async (note_id: string, jwt:string, csrf:string) => {
+        const response = await Ajax.Put(this.baseUrl + '/' + note_id + '/set_private/', {
+            headers: {
+                'Authorization': jwt,
+                'x-csrf-token': csrf
+            }
+        });
+
+        if (response.status == 200) {
+            response.body.data = JSON.parse(response.body.data)
+
+            return {
+                note: response.body,
+                status: response.status,
+                csrf: response.headers['x-csrf-token']
+            }
+        }
+
+        throw Error(response.body.message);
+    }
+}
+
+class SharedNoteRequests {
+    private baseUrl = '/shared';
+
+    Get = async (id: string) => {
+        const response = await fetch(baseUrl + this.baseUrl + '/' + id);
+
+        if (response.status === 200) {
+            const data = await response.json()
+            data.data = JSON.parse(data.data);
+            return data;
+        }
+
+        throw Error(response.statusText);
+    };
 }
 
 class TagRequests {
@@ -717,6 +775,8 @@ export const AppAuthRequests = new AuthRequests();
 
 export const AppNoteRequests = new NoteRequests();
 
+export const AppSharedNoteRequests = new SharedNoteRequests();
+
 export const AppTagRequests = new TagRequests();
 
 export const AppProfileRequests = new ProfileRequests();

public/src/modules/router.tsx

@@ -15,6 +15,8 @@ import {HomePageLoader} from '../pages/Home/loader';
 import {NotesActions} from './stores/NotesStore';
 import {AppDispatcher} from './dispatcher';
 import NotFoundPage from '../pages/Error';
+import {NoteType} from "../utils/types";
+import {SharedNotePage} from "../pages/SharedNote";
 
 type routerState = {
     currPage: {new(): Component<any, any> }
@@ -67,8 +69,6 @@ export class Router extends ScReact.Component<any, routerState> {
 
         const path = this.normalizeURL(window.location.pathname)
 
-
-
         if (path.includes('notes/')) {
             const noteId = path.split('/').at(-1);
             AppDispatcher.dispatch(NotesActions.FETCH_NOTE, noteId);
@@ -79,8 +79,6 @@ export class Router extends ScReact.Component<any, routerState> {
 
         const page: RouterMapValue = this.pages[path];
 
-
-
         if (page.loader !== undefined) {
 
             this.setState(s => ({
@@ -110,21 +108,15 @@ export class Router extends ScReact.Component<any, routerState> {
     }
 
     public go(raw: string): void {
-
-
 
         const path = this.normalizeURL(raw)
 
-
-
         let page: RouterMapValue = this.pages[path];
 
         if (path.includes('notes/')) {
             page = this.pages['notes'];
         }
 
-
-
         history.pushState(null, null, path);
         if (page === undefined) {
             this.setState(s => ({
@@ -151,7 +143,6 @@ export class Router extends ScReact.Component<any, routerState> {
                     PageProps: props
                 }));
 
-
             }).catch(() => {
                 this.setState(s => ({
                     ...s,
@@ -168,6 +159,14 @@ export class Router extends ScReact.Component<any, routerState> {
 
     }
 
+    public openSharedNotePage (note:NoteType) {
+        this.setState(s => ({
+            ...s,
+            currPage: SharedNotePage,
+            PageProps: {note: note}
+        }));
+    }
+
     render(): VDomNode {
         // @ts-ignore
         const isNotesPage = this.state.currPage === NotesPage;