feature: typescript

package.json

@@ -48,6 +48,8 @@
     "sass": "^1.80.6",
     "sass-loader": "^16.0.3",
     "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.3",
     "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0"

src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormController.js

@@ -1,7 +1,7 @@
 import { ComponentController } from '../../modules/Components/Component.js';
 import { REGISTER_APPLICANT } from '../../modules/Events/Events.js';
 import router from '/src/modules/Router/Router.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import eventBus from '../../modules/Events/EventBus.js';
 import { NOTIFICATION_OK } from '../../modules/Events/Events.js';
 import { NOTIFICATION_TIMEOUT } from '../NotificationBox/NotificationBox.js';

src/Components/AppliersList/AppliersListView.js

@@ -1,5 +1,5 @@
 import { ComponentView } from '../../modules/Components/Component.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import USER_TYPE from '../../modules/UserSession/UserType.js';
 import AppliersListViewHbs from './appliers-list.hbs';
 

src/Components/CvArticle/CvArticleController.js

@@ -1,6 +1,6 @@
 import { ComponentController } from '../../modules/Components/Component.js';
 import { GO_TO, REDIRECT_TO, CV_DELETE, CV_EDIT } from '../../modules/Events/Events.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { CvPage } from '../../Pages/CvPage/CvPage.js';
 import eventBus from '../../modules/Events/EventBus.js';
 

src/Components/CvForm/CvFormController.js

@@ -7,7 +7,7 @@ import {
 } from '../../modules/Events/Events.js';
 import { CvPage } from '../../Pages/CvPage/CvPage.js';
 import { Cv } from '../../modules/models/Cv.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import eventBus from '../../modules/Events/EventBus.js';
 import { NOTIFICATION_TIMEOUT } from '../NotificationBox/NotificationBox.js';
 import { catchStandardResponseError } from '../../modules/Api/Errors.js';

src/Components/CvForm/CvFormModel.js

@@ -1,7 +1,7 @@
 import { Api } from '../../modules/Api/Api.js';
 import { ComponentModel } from '../../modules/Components/Component.js';
 import { Cv } from '../../modules/models/Cv.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { zip } from '../../modules/ObjectUtils/Zip.js';
 import eventBus from '../../modules/Events/EventBus.js';
 import { REDIRECT_TO } from '../../modules/Events/Events.js';

src/Components/EmployerRegistrationForm/EmployerRegistrationFormController.js

@@ -1,6 +1,6 @@
 import { ComponentController } from '../../modules/Components/Component.js';
 import router from '/src/modules/Router/Router.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { REGISTER_EMPLOYER } from '../../modules/Events/Events.js';
 
 export class EmployerRegistrationFormController extends ComponentController {

src/Components/Lists/ApplicantCvList/ApplicantCvList.js

@@ -3,7 +3,7 @@ import { ApplicantCvListModel } from './ApplicantCvListModel.js';
 import { ApplicantCvListController } from './ApplicantCvListController.js';
 import { ApplicantCvListView } from './ApplicantCvListView.js';
 import { ListMixin } from '../List/ListMixin.js';
-import { resolveUrl } from '../../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 
 export class ApplicantCvList extends Component {
   constructor({ userId, isListOwner, elementClass, existingElement }) {

src/Components/Lists/ApplicantCvList/ApplicantCvListModel.js

@@ -1,7 +1,7 @@
 import { ComponentModel } from '../../../modules/Components/Component.js';
 import { Api } from '../../../modules/Api/Api.js';
 import { Minicard } from '../../Minicard/Minicard.js';
-import { resolveUrl } from '../../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { Cv } from '../../../modules/models/Cv.js';
 import { CvPage } from '../../../Pages/CvPage/CvPage.js';
 

src/Components/Lists/EmployerVacancyList/EmployerVacancyList.js

@@ -3,7 +3,7 @@ import { EmployerVacancyListModel } from './EmployerVacancyListModel.js';
 import { EmployerVacancyListController } from './EmployerVacancyListController.js';
 import { EmployerVacancyListView } from './EmployerVacancyListView.js';
 import { ListMixin } from '../List/ListMixin.js';
-import { resolveUrl } from '../../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 
 export class EmployerVacancyList extends Component {
   constructor({ userId, isListOwner, elementClass, existingElement }) {

src/Components/Lists/EmployerVacancyList/EmployerVacancyListModel.js

@@ -1,7 +1,7 @@
 import { ComponentModel } from '../../../modules/Components/Component.js';
 import { Api } from '../../../modules/Api/Api.js';
 import { Minicard } from '../../Minicard/Minicard.js';
-import { resolveUrl } from '../../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { Vacancy } from '../../../modules/models/Vacancy.js';
 import { VacancyPage } from '../../../Pages/VacancyPage/VacancyPage.js';
 

src/Components/LoginForm/LoginFormController.js

@@ -1,6 +1,6 @@
 import { ComponentController } from '../../modules/Components/Component.js';
 import { USER_WANTS_LOGIN } from '../../modules/Events/Events.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import router from '/src/modules/Router/Router.js';
 import { NOTIFICATION_OK } from '../../modules/Events/Events.js';
 import eventBus from '../../modules/Events/EventBus.js';

src/Components/VacancyArticle/VacancyArticleController.js

@@ -7,8 +7,8 @@ import {
   VACANCY_EDIT,
   VACANCY_RESET_APPLY,
 } from '../../modules/Events/Events.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
-import eventBus from '../../modules/Events/EventBus.js';
+import { resolveUrl } from '../../modules/UrlUtils/UrlUtils';
+import eventBus from '@/modules/Events/EventBus.js';
 import { VacancyEditPage } from '../../Pages/VacancyEditPage/VacancyEditPage.js';
 
 export class VacancyArticleController extends ComponentController {

src/Components/VacancyForm/VacancyFormController.js

@@ -2,7 +2,7 @@ import { ComponentController } from '../../modules/Components/Component.js';
 import { NOTIFICATION_OK, REDIRECT_TO, SUBMIT_FORM } from '../../modules/Events/Events.js';
 import { Vacancy } from '../../modules/models/Vacancy.js';
 import { VacancyPage } from '../../Pages/VacancyPage/VacancyPage.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import eventBus from '../../modules/Events/EventBus.js';
 import { NOTIFICATION_ERROR } from '../../modules/Events/Events.js';
 import { NOTIFICATION_TIMEOUT } from '../NotificationBox/NotificationBox.js';

src/Components/VacancyForm/VacancyFormModel.js

@@ -1,7 +1,7 @@
 import { Api } from '../../modules/Api/Api.js';
 import { ComponentModel } from '../../modules/Components/Component.js';
 import { Vacancy } from '../../modules/models/Vacancy.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { zip } from '../../modules/ObjectUtils/Zip.js';
 import eventBus from '../../modules/Events/EventBus.js';
 import { REDIRECT_TO } from '../../modules/Events/Events.js';

src/Pages/CvEditPage/CvEditPage.js

@@ -2,7 +2,7 @@ import { Header } from '../../Components/Header/Header.js';
 import state from '../../modules/AppState/AppState.js';
 import { Page } from '../../modules/Page/Page.js';
 import { ForbiddenPage, NotFoundError } from '../../modules/Router/Router.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { CvEditPageController } from './CvEditPageController.js';
 import { CvEditPageModel } from './CvEditPageModel.js';
 import { CvEditPageView } from './CvEditPageView.js';

src/Pages/ProfilePage/ProfilePage.js

@@ -4,7 +4,7 @@ import { ProfilePageController } from './ProfilePageController.js';
 import { ProfilePageModel } from './ProfilePageModel.js';
 import { ProfilePageView } from './ProfilePageView.js';
 import state from '/src/modules/AppState/AppState.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { FrameSeries } from '../../Components/FrameSeries/FrameSeries.js';
 import { CrudFormBox } from '../../Components/CrudFormBox/CrudFormBox.js';
 import { ApplicantProfileForm } from '/src/Components/ApplicantProfileForm/ApplicantProfileForm.js';

src/Pages/VacanciesPage/VacanciesPageModel.js

@@ -1,7 +1,7 @@
 import { PageModel } from '../../modules/Page/Page.js';
 import state from '/src/modules/AppState/AppState.js';
 import USER_TYPE from '/src/modules/UserSession/UserType.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { AlertWindow } from '../../Components/AlertWindow/AlertWindow.js';
 import { VacancyCard } from '/src/Components/VacancyCard/VacancyCard.js';
 import { Vacancy } from '../../modules/models/Vacancy.js';

src/Pages/VacancyEditPage/VacancyEditPage.js

@@ -2,7 +2,7 @@ import { Header } from '../../Components/Header/Header.js';
 import state from '../../modules/AppState/AppState.js';
 import { Page } from '../../modules/Page/Page.js';
 import { ForbiddenPage, NotFoundError } from '../../modules/Router/Router.js';
-import { resolveUrl } from '../../modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { VacancyEditPageController } from './VacancyEditPageController.js';
 import { VacancyEditPageModel } from './VacancyEditPageModel.js';
 import { VacancyEditPageView } from './VacancyEditPageView.js';

src/index.js → src/index.ts

@@ -1,4 +1,4 @@
-import router from '/src/modules/Router/Router.js';
+import router from '@/modules/Router/Router.js';
 import eventBus from './modules/Events/EventBus.js';
 import appState from './modules/AppState/AppState.js';
 import { LoginPage } from './Pages/LoginPage/LoginPage.js';
@@ -7,7 +7,7 @@ import { VacanciesPage } from './Pages/VacanciesPage/VacanciesPage.js';
 import { ProfilePage } from './Pages/ProfilePage/ProfilePage.js';
 import { VacancyPage } from './Pages/VacancyPage/VacancyPage.js';
 import { VacancyEditPage } from './Pages/VacancyEditPage/VacancyEditPage.js';
-import { resolveUrl } from './modules/UrlUtils/UrlUtils.js';
+import { resolveUrl } from './modules/UrlUtils/UrlUtils';
 import { REDIRECT_TO, GO_TO } from './modules/Events/Events.js';
 import { CvPage } from './Pages/CvPage/CvPage.js';
 import { CvEditPage } from './Pages/CvEditPage/CvEditPage.js';
@@ -19,23 +19,23 @@ const notificationBox = new NotificationBox({
   existingElement: document.querySelector('.notification-box'),
 });
 
-router.addRoute(resolveUrl('vacancies').pathname, VacanciesPage);
-router.addRoute(resolveUrl('login').pathname, LoginPage);
-router.addRoute(resolveUrl('register').pathname, RegistrationPage);
-router.addRoute(resolveUrl('myProfile').pathname, ProfilePage);
-router.addRoute(resolveUrl('profile').pathname, ProfilePage);
-router.addRoute(resolveUrl('vacancy').pathname, VacancyPage);
-router.addRoute(resolveUrl('createVacancy').pathname, VacancyEditPage);
-router.addRoute(resolveUrl('editVacancy').pathname, VacancyEditPage);
-router.addRoute(resolveUrl('cv').pathname, CvPage);
-router.addRoute(resolveUrl('createCv').pathname, CvEditPage);
-router.addRoute(resolveUrl('editCv').pathname, CvEditPage);
+router.addRoute(resolveUrl('vacancies', null).pathname, VacanciesPage);
+router.addRoute(resolveUrl('login', null).pathname, LoginPage);
+router.addRoute(resolveUrl('register', null).pathname, RegistrationPage);
+router.addRoute(resolveUrl('myProfile', null).pathname, ProfilePage);
+router.addRoute(resolveUrl('profile', null).pathname, ProfilePage);
+router.addRoute(resolveUrl('vacancy', null).pathname, VacancyPage);
+router.addRoute(resolveUrl('createVacancy', null).pathname, VacancyEditPage);
+router.addRoute(resolveUrl('editVacancy', null).pathname, VacancyEditPage);
+router.addRoute(resolveUrl('cv', null).pathname, CvPage);
+router.addRoute(resolveUrl('createCv', null).pathname, CvEditPage);
+router.addRoute(resolveUrl('editCv', null).pathname, CvEditPage);
 
-eventBus.on(REDIRECT_TO, ({ redirectUrl }) => {
+eventBus.on(REDIRECT_TO, ({ redirectUrl }: { redirectUrl: URL }) => {
   router.navigate(redirectUrl, true, true);
 });
 
-eventBus.on(GO_TO, ({ redirectUrl }) => {
+eventBus.on(GO_TO, ({ redirectUrl }: { redirectUrl: URL }) => {
   router.navigate(redirectUrl, false, true);
 });
 

src/modules/UrlUtils/UrlUtils.ts

@@ -0,0 +1,17 @@
+import urls from '@/config/routes.json';
+const knownUrls = new Map(Object.entries(urls));
+
+/**
+ * Helper function for resolving url with it's name.
+ * @param {string} resourceName Name of the resource to be resolved.
+ * @param {Object} queryParams Optional query parameters.
+ * @throws {TypeError} Arguments have wrong type.
+ * @returns {URL|undefined} Resolved url or undefined if it's not exists.
+ */
+export const resolveUrl = (resourceName: string, queryParams: Object): URL | null => {
+  if (!knownUrls.has(resourceName)) {
+    return undefined;
+  }
+  const searchParams = queryParams ? '?' + new URLSearchParams(Object.entries(queryParams)) : '';
+  return new URL(location.origin + knownUrls.get(resourceName) + searchParams);
+};

src/modules/UserSession/UserSession.js

@@ -1,5 +1,5 @@
 import { Api } from '../Api/Api.js';
-import { resolveUrl } from '../UrlUtils/UrlUtils.js';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import router from '/src/modules/Router/Router.js';
 import { ForbiddenPage } from '/src/modules/Router/Router.js';
 import { Applicant } from '../models/Applicant.js';