From 7307c2a67a055c76bc9ae1dd0b68ca6848f20a3b Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Fri, 20 Dec 2024 16:40:52 +0300
Subject: [PATCH] feature: added empty sets texts

---
 .../components/alert_window/alert_window.scss |  8 +++++
 .../components/alert_window/alert_window.tsx  |  8 +++--
 .../components/item_list/item_list.tsx        |  1 +
 .../pages/not_found_page/not_found_page.scss  | 30 +++++++++++++++++++
 .../pages/not_found_page/not_found_page.tsx   | 16 +++++++++-
 .../pages/vacancies_page/vacancies_page.scss  |  4 +++
 .../pages/vacancies_page/vacancies_page.tsx   |  5 ++++
 7 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 src/application/pages/not_found_page/not_found_page.scss

diff --git a/src/application/components/alert_window/alert_window.scss b/src/application/components/alert_window/alert_window.scss
index 07954a1..fcc319f 100644
--- a/src/application/components/alert_window/alert_window.scss
+++ b/src/application/components/alert_window/alert_window.scss
@@ -11,4 +11,12 @@
   &__text {
     font-size: var(--text-size-3);
   }
+
+  &__header {
+    font-size: var(--text-size-7);
+    font-weight: var(--text-weight-bold);
+    color: var(--color-main-100);
+    margin: 0;
+    text-align: center;
+  }
 }
diff --git a/src/application/components/alert_window/alert_window.tsx b/src/application/components/alert_window/alert_window.tsx
index 9206517..5c32186 100644
--- a/src/application/components/alert_window/alert_window.tsx
+++ b/src/application/components/alert_window/alert_window.tsx
@@ -7,14 +7,18 @@ export interface AlertWindowProps {
   text: string;
   href: string;
   buttonText: string;
+  header?: string;
 }
 export class AlertWindow extends Component {
-  constructor({ elementClass, text, href, buttonText }: AlertWindowProps) {
-    super({ elementClass, text, href, buttonText });
+  constructor({ elementClass, text, href, buttonText, header = '' }: AlertWindowProps) {
+    super({ elementClass, text, href, buttonText, header });
   }
   render() {
     return (
       <div className={`${this.props.elementClass} alert-window alert-window_theme-dark`}>
+        {(this.props.header || false) && (
+          <div className="alert-window__header">{this.props.header}</div>
+        )}
         <div className="alert-window__text">{this.props.text}</div>
         <a className="alert-window__button button button_main-primary" href={this.props.href}>
           {this.props.buttonText}
diff --git a/src/application/components/item_list/item_list.tsx b/src/application/components/item_list/item_list.tsx
index 94810d5..a791dab 100644
--- a/src/application/components/item_list/item_list.tsx
+++ b/src/application/components/item_list/item_list.tsx
@@ -31,6 +31,7 @@ export class ItemList extends Component {
       });
     return (
       <div className={`${this.props.elementClass} item-list`}>
+        {listItems && listItems.length === 0 && 'Пока ничего нет'}
         {this.props.isOwner && (
           <div className="item-list__add-button-container">
             <a
diff --git a/src/application/pages/not_found_page/not_found_page.scss b/src/application/pages/not_found_page/not_found_page.scss
new file mode 100644
index 0000000..7f8a2db
--- /dev/null
+++ b/src/application/pages/not_found_page/not_found_page.scss
@@ -0,0 +1,30 @@
+@use '@/scss/variables' as v;
+
+@media screen and (min-width: v.$mobile-breakpoint) {
+  .not-found-page {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: 0px;
+  }
+}
+
+.not-found-page {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  width: var(--4-col);
+  max-width: 425px;
+  margin-top: 16px;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  &__alert-window {
+    padding: 16px;
+    border-radius: var(--radius-m);
+  }
+}
diff --git a/src/application/pages/not_found_page/not_found_page.tsx b/src/application/pages/not_found_page/not_found_page.tsx
index d2feab8..3cb9357 100644
--- a/src/application/pages/not_found_page/not_found_page.tsx
+++ b/src/application/pages/not_found_page/not_found_page.tsx
@@ -1,5 +1,8 @@
 import { Component, VirtualNodeSpec } from '@/modules/vdom/virtual_node';
 import * as vdom from '@/modules/vdom/virtual_dom';
+import { AlertWindow } from '@/application/components/alert_window/alert_window';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
+import './not_found_page.scss';
 
 export interface NotFoundPageProps {
   url: URL;
@@ -11,6 +14,17 @@ export class NotFoundPage extends Component {
   }
 
   render(): VirtualNodeSpec {
-    return <div>{this.props.url.toString()} Not Found (404)</div>;
+    return (
+      <div key="not-found-page" className="not-found-page">
+        <AlertWindow
+          key="alert-window"
+          elementClass="not-found-page__alert-window"
+          header="Ой... Вы попали не туда"
+          text="Но всегда можно вернуться на главную"
+          href={resolveUrl('vacancies', null)}
+          buttonText="Вернуться на главную"
+        />
+      </div>
+    );
   }
 }
diff --git a/src/application/pages/vacancies_page/vacancies_page.scss b/src/application/pages/vacancies_page/vacancies_page.scss
index 8321ab6..9296495 100644
--- a/src/application/pages/vacancies_page/vacancies_page.scss
+++ b/src/application/pages/vacancies_page/vacancies_page.scss
@@ -67,6 +67,10 @@
     background-color: var(--color-background-900);
     color: var(--color-main-100);
   }
+
+  &__no-vacancies {
+    font-size: var(--text-size-5);
+  }
 }
 
 /* Vacancy-container component */
diff --git a/src/application/pages/vacancies_page/vacancies_page.tsx b/src/application/pages/vacancies_page/vacancies_page.tsx
index 266f8c6..25a755c 100644
--- a/src/application/pages/vacancies_page/vacancies_page.tsx
+++ b/src/application/pages/vacancies_page/vacancies_page.tsx
@@ -136,6 +136,11 @@ export class VacanciesPage extends Component {
               {this.getVacancyHeader(this.searchQuery, this.searchCategory)}
             </h1>
             <div className="content-body__vacancy-container vacancy-container ruler ruler_theme-dark ruler_direction-vertical">
+              {vacancyCards.length === 0 && (
+                <div className="content-body__no-vacancies">
+                  По вашему запросу ничего не найдено
+                </div>
+              )}
               {...vacancyCards}
             </div>
           </div>