sprint 3 second commit

.eslintrc.cjs

@@ -21,5 +21,7 @@ module.exports = {
         sourceType: "module",
     },
     plugins: ["@typescript-eslint"],
-    rules: {},
+    rules: {
+        "@typescript-eslint/no-namespace": "off",
+    },
 };

.stylelintcache

@@ -1 +1 @@
-[{"C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\chat\\styles.scss":"1","C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\registration\\styles.scss":"2","C:\\1\\middle.messenger.praktikum.yandex\\src\\components\\Input\\styles.scss":"3","C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\login\\styles.scss":"4","C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\account\\styles.scss":"5","C:\\1\\middle.messenger.praktikum.yandex\\src\\components\\Form\\styles.scss":"6","C:\\1\\middle.messenger.praktikum.yandex\\src\\components\\Link\\styles.scss":"7","C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\error\\styles.scss":"8","C:\\1\\middle.messenger.praktikum.yandex\\src\\components\\Modal\\styles.scss":"9","C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\account\\components\\AccountPhoto\\styles.scss":"10"},{"size":13372,"mtime":1708907856866,"hashOfConfig":"11"},{"size":135,"mtime":1708892428481,"hashOfConfig":"11"},{"size":853,"mtime":1708907080241,"hashOfConfig":"11"},{"size":128,"mtime":1708892428478,"hashOfConfig":"11"},{"size":3868,"mtime":1709391740708,"hashOfConfig":"11"},{"size":851,"mtime":1708907078157,"hashOfConfig":"11"},{"size":390,"mtime":1708907040933,"hashOfConfig":"11"},{"size":395,"mtime":1708892428472,"hashOfConfig":"11"},{"size":1122,"mtime":1709391740708,"hashOfConfig":"11"},{"size":390,"mtime":1708907040933,"hashOfConfig":"11"},"1v6j01t"]
+[{"C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\chat\\styles.scss":"1","C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\registration\\styles.scss":"2","C:\\1\\middle.messenger.praktikum.yandex\\src\\components\\Input\\styles.scss":"3","C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\login\\styles.scss":"4","C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\account\\styles.scss":"5","C:\\1\\middle.messenger.praktikum.yandex\\src\\components\\Form\\styles.scss":"6","C:\\1\\middle.messenger.praktikum.yandex\\src\\components\\Link\\styles.scss":"7","C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\error\\styles.scss":"8","C:\\1\\middle.messenger.praktikum.yandex\\src\\components\\Modal\\styles.scss":"9","C:\\1\\middle.messenger.praktikum.yandex\\src\\pages\\account\\components\\AccountPhoto\\styles.scss":"10","C:\\1\\middle.messenger.praktikum.yandex\\src\\components\\Button\\styles.scss":"11","C:\\1\\middle.messenger.praktikum.yandex\\src\\components\\Message\\styles.scss":"12"},{"size":11756,"mtime":1710702679458,"hashOfConfig":"13"},{"size":135,"mtime":1708892428481,"hashOfConfig":"13"},{"size":853,"mtime":1708907080241,"hashOfConfig":"13"},{"size":128,"mtime":1708892428478,"hashOfConfig":"13"},{"size":3868,"mtime":1709391740708,"hashOfConfig":"13"},{"size":851,"mtime":1708907078157,"hashOfConfig":"13"},{"size":390,"mtime":1708907040933,"hashOfConfig":"13"},{"size":395,"mtime":1708892428472,"hashOfConfig":"13"},{"size":1152,"mtime":1710584696300,"hashOfConfig":"13"},{"size":895,"mtime":1710102023778,"hashOfConfig":"13"},{"size":1159,"mtime":1709970950492,"hashOfConfig":"13"},{"size":1167,"mtime":1710702879251,"hashOfConfig":"13"},"1v6j01t"]

package.json

@@ -23,10 +23,12 @@
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.0"
+    "vite": "^5.1.0",
+    "vite-plugin-mkcert": "^1.17.4"
   },
   "dependencies": {
     "@types/uuid": "^9.0.8",
+    "autoprefixer": "^10.4.18",
     "express": "^4.18.2",
     "uuid": "^9.0.1",
     "vite-express": "^0.15.0",

src/assets/scss/reset.scss

@@ -57,6 +57,11 @@ textarea {
     white-space: revert;
 }
 
+select {
+    -webkit-appearance: none;
+    appearance: none;
+}
+
 /* minimum style to allow to style meter element */
 meter {
     appearance: revert;

src/assets/scss/shared.scss

@@ -7,6 +7,11 @@
     flex-wrap: wrap;
 }
 
+section {
+    max-width: 1800px;
+    margin: 0 auto;
+}
+
 h2 {
     font-size: 16px;
 }
@@ -15,26 +20,6 @@ h3 {
     font-size: 15px;
 }
 
-.btn {
-    transition: 0.2s;
-    cursor: pointer;
-    width: 280px;
-    max-width: 100%;
-    height: 37px;
-    line-height: 37px;
-    padding: 0 10px;
-    border-radius: 8px;
-    font-size: 13px;
-    text-align: center;
-    color: #fff;
-    background-color: $primary-color;
-
-    &:hover {
-        transition: 0.2s;
-        background-color: $dark-primary-color;
-    }
-}
-
 .title {
     font-size: 20px;
     width: 100%;

src/components/Button/index.ts

@@ -1,10 +1,19 @@
-import Block, { BlockProps, setDefaultClassName } from "../../services/Block";
+import Block, { BlockProps } from "../../services/Block";
 import tpl from "./tpl.hbs?raw";
 import "./styles.scss";
 
 export default class Button extends Block {
     constructor(props: BlockProps) {
-        super(setDefaultClassName(props, "btn", { type: "submit" }), "button");
+        super(
+            {
+                ...props,
+                attrs: {
+                    class: props.attrs?.class ?? "btn",
+                    type: "submit",
+                },
+            },
+            "button"
+        );
     }
     render() {
         return this.compile(tpl, this.props);

src/components/Button/tpl.hbs

@@ -1 +1,2 @@
 {{text}}
+{{!-- <div id="avatar"></div> --}}

src/components/Dropdown/index.ts

@@ -2,8 +2,12 @@ import Block, { BlockProps, setDefaultClassName } from "../../services/Block";
 import tpl from "./tpl.hbs?raw";
 import "./styles.scss";
 
+type DropdownProps = BlockProps & {
+    icon: Block | string;
+    dropdown: Block;
+};
 export default class Dropdown extends Block {
-    constructor(props: BlockProps) {
+    constructor(props: DropdownProps) {
         super(setDefaultClassName(props, "dropdown"), "div");
     }
     render() {

src/components/Form/styles.scss

@@ -27,7 +27,7 @@
         margin-top: 60px;
     }
 
-    .error {
+    .error-message {
         margin: 0 auto;
         margin-top: 14px;
         text-align: center;

src/components/Image/index.ts

@@ -5,6 +5,6 @@ export default class Image extends Block {
         super(props, "img");
     }
     render() {
-        return this._createDocumentElement("img");
+        return this.createDocumentElement("img");
     }
 }

src/components/Input/index.ts

@@ -12,7 +12,7 @@ export default class Input extends Block {
             this.element
                 .querySelector("input")
                 ?.addEventListener("blur", (e) => {
-                    (this.props.onChange as (e?: EventTarget) => void)(
+                    (this.props.onChange as (target?: EventTarget) => void)(
                         e.target ?? undefined
                     );
                 });

src/components/Message/index.ts

@@ -1,8 +1,8 @@
-import Block from "../../services/Block";
-import tpl from "./tpl.hbs?raw";
+import IndexPage from "./indexPage";
+import { Connect } from "../../services/Store";
 
-export default class Message extends Block {
-    render() {
-        return this.compile(tpl, this.props);
-    }
-}
+const Message = Connect(IndexPage, (state) => {
+    return { currentUserId: state.user.id };
+});
+
+export default Message;

src/components/Message/tpl.hbs

@@ -1,9 +1,8 @@
 {{!-- TODO: paste date here --}}
 {{!-- <div class="date">19 июня</div> --}}
 {{!-- {{{date}}} --}}
-<div class="message {{userId}}{{#if checked}} checked{{/if}}">
-    <div class="content">
-        {{{message}}}
-    </div>
-    <div class="time">{{date}}</div>
+<div class="content">
+    {{message}}
 </div>
+<div class="time">{{time}}</div>
+

src/components/Modal/styles.scss

@@ -40,6 +40,7 @@
 
     .title {
         font-size: 15px;
+        margin-bottom: 16px;
 
         &.error {
             color: $red-color;

src/index.html

@@ -8,7 +8,6 @@
   </head>
   <body>
     <main id="app"></main>
-    <!-- <div class="overlay"></div> -->
     <script type="module" src="/main.ts"></script>
   </body>
 </html>

src/main.ts

@@ -1,35 +1,52 @@
-import Block from "./services/Block";
 import LoginPage from "./pages/login";
 import RegistrationPage from "./pages/registration";
 import ChatPage from "./pages/chat";
+import AccountPage from "./pages/account";
 import ErrorPage from "./pages/error";
 import "./assets/scss/styles.scss";
+import router from "./services/Router/Router";
+import { getUserInfo } from "./api/auth";
+import { setCurrentUser } from "./services/Store";
 
-const routes: Record<string, Block> = {
-    homepage: LoginPage,
-    registration: RegistrationPage,
-    chat: ChatPage,
-    error500: new ErrorPage({
-        errorCode: "500 ",
+router
+    .use("*", ErrorPage, {
+        justification: "Не туда попали",
+        errorCode: "404",
+    })
+    .use("/", LoginPage)
+    .use("/sign-up", RegistrationPage)
+    .use("/messenger", ChatPage)
+    .use("/settings", AccountPage)
+    .use("/error500", ErrorPage, {
         justification: "Мы уже фиксим",
-    }),
-};
+        errorCode: "500",
+    })
+    .start();
 
-const pathName = window.location.pathname.slice(1);
+document.addEventListener("click", (e) => {
+    if ((e.target as HTMLElement).tagName.toLowerCase() === "a") {
+        e.preventDefault();
+        const link = (e.target as HTMLElement).getAttribute("href");
+        if (link) {
+            router.go(link);
+        }
+    }
+});
 
-const res = pathName
-    ? routes[pathName]
-        ? routes[pathName]
-        : new ErrorPage({
-              errorCode: "404",
-              justification: "Не туда попали",
-          })
-    : routes.homepage;
+getUserInfo()
+    .then((user) => {
+        if (
+            user &&
+            (router._currentRoute?._pathname === "/" ||
+                router._currentRoute?._pathname === "/sign-up")
+        ) {
+            router.go("/messenger");
+        }
 
-function render(query: string, block: Block) {
-    const root = document.querySelector(query);
-    root?.appendChild(block.getContent());
-    return root;
-}
-
-render("#app", res);
+        setCurrentUser(user);
+    })
+    .catch(() => {
+        if (router._currentRoute?._pathname !== "/sign-up") {
+            router.go("/");
+        }
+    });

src/pages/account/components/AccountPhoto/index.ts

@@ -1,15 +1,18 @@
 import Block, { BlockProps } from "../../../../services/Block";
 import tpl from "./tpl.hbs?raw";
 import "./styles.scss";
+import { RESOURCES_URL } from "../../../../api/HTTPTransportYaPraktikum";
 
 export default class AccountPhoto extends Block {
     constructor(props: BlockProps) {
         super(
             {
                 ...props,
-                src: "img/noImage.svg",
+                avatar: props.avatar
+                    ? `${RESOURCES_URL}${props.avatar}`
+                    : "img/noImage.svg",
                 attrs: {
-                    class: "image",
+                    class: "user-avatar",
                 },
             },
             "div"