Criteria Objekt überarbeitet

This commit is contained in:
2024-07-17 20:19:13 +02:00
parent bdafb03165
commit f88eebe8d3
22 changed files with 121 additions and 192 deletions

View File

@@ -117,16 +117,17 @@
</a>
<div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<!-- Filter button -->
@if(isListingUrl()){
<button
type="button"
#triggerButton
(click)="openModal()"
id="filterDropdownButton"
class="max-sm:hidden px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 md:me-2"
class="max-sm:hidden px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 md:me-2"
>
<i class="fas fa-filter mr-2"></i>Filter (1)
</button>
}
<button
type="button"
class="flex text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
@@ -233,16 +234,18 @@
</div>
</div>
<!-- Mobile filter button -->
<!-- <div class="md:hidden flex justify-center pb-4">
@if(isListingUrl()){
<div class="md:hidden flex justify-center pb-4">
<button
data-dropdown-toggle="filterDropdown"
(click)="openModal()"
type="button"
id="filterDropdownMobileButton"
class="w-full mx-4 px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
class="w-full mx-4 px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<i class="fas fa-filter mr-2"></i>Filter (1)
</button>
</div> -->
</div>
}
</nav>
<!-- ############################### -->

View File

@@ -6,13 +6,14 @@ import { NavigationEnd, Router, RouterModule } from '@angular/router';
import { faUserGear } from '@fortawesome/free-solid-svg-icons';
import { Collapse, Dropdown, initFlowbite } from 'flowbite';
import { KeycloakService } from 'keycloak-angular';
import { Observable, Subject, Subscription } from 'rxjs';
import onChange from 'on-change';
import { filter, Observable, Subject, Subscription } from 'rxjs';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
import { emailToDirName, KeycloakUser } from '../../../../../bizmatch-server/src/models/main.model';
import { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../environments/environment';
import { SharedService } from '../../services/shared.service';
import { UserService } from '../../services/user.service';
import { createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, map2User } from '../../utils/utils';
import { createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaStateObject, getSessionStorageHandlerWrapper, map2User } from '../../utils/utils';
import { DropdownComponent } from '../dropdown/dropdown.component';
import { ModalService } from '../search-modal/modal.service';
@Component({
@@ -36,6 +37,8 @@ export class HeaderComponent {
private destroy$ = new Subject<void>();
prompt: string;
private subscription: Subscription;
criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
private routerSubscription: Subscription | undefined;
constructor(
public keycloakService: KeycloakService,
private router: Router,
@@ -43,7 +46,9 @@ export class HeaderComponent {
private sharedService: SharedService,
private breakpointObserver: BreakpointObserver,
private modalService: ModalService,
) {}
) {
//this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandlerWrapper(this.activeTabAction));
}
async ngOnInit() {
const token = await this.keycloakService.getToken();
@@ -53,39 +58,37 @@ export class HeaderComponent {
this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
}
// setTimeout(() => {
// initFlowbite();
// });
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
initFlowbite();
}
});
setTimeout(() => {
initFlowbite();
}, 10);
// this.breakpointObserver
// .observe([Breakpoints.Handset])
// .pipe(takeUntil(this.destroy$))
// .subscribe(result => {
// this.isMobile = result.matches;
// const targetEl = document.getElementById('filterDropdown');
// const triggerEl = this.isMobile ? document.getElementById('filterDropdownMobileButton') : document.getElementById('filterDropdownButton');
// if (targetEl && triggerEl) {
// this.filterDropdown = new Dropdown(targetEl, triggerEl);
// }
// });
this.sharedService.currentProfilePhoto.subscribe(photoUrl => {
if (photoUrl) {
this.profileUrl = photoUrl;
}
});
}
// toggleFilterDropdown() {
// if (this.filterDropdown) {
// this.filterDropdown.toggle();
// }
// }
this.checkCurrentRoute(this.router.url);
this.routerSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: any) => {
this.checkCurrentRoute(event.urlAfterRedirects);
});
}
private checkCurrentRoute(url: string): void {
const baseRoute = url.split('/')[1]; // Nimmt den ersten Teil der Route nach dem ersten '/'
const specialRoutes = [, '', ''];
if ('businessListings' === baseRoute) {
this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandlerWrapper('business'));
} else if ('commercialPropertyListings' === baseRoute) {
this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandlerWrapper('commercialProperty'));
} else if ('brokerListings' === baseRoute) {
this.criteria = onChange(getCriteriaStateObject('broker'), getSessionStorageHandlerWrapper('broker'));
} else {
this.criteria = undefined;
}
}
ngAfterViewInit() {}
openModal() {
if (this.isActive('/businessListings')) {
this.modalService.showModal(createEmptyBusinessListingCriteria());
@@ -109,6 +112,9 @@ export class HeaderComponent {
isActive(route: string): boolean {
return this.router.url === route;
}
isListingUrl(): boolean {
return ['/businessListings', '/commercialPropertyListings', '/brokerListings'].includes(this.router.url);
}
closeDropdown() {
const dropdownButton = document.getElementById('user-menu-button');
const dropdownMenu = this.user ? document.getElementById('user-login') : document.getElementById('user-unknown');

View File

@@ -21,9 +21,10 @@
<div class="space-y-4">
<div>
<label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
<select id="state" [(ngModel)]="criteria.state" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<!-- <select id="state" [(ngModel)]="criteria.state" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option selected>Arkansas</option>
</select>
</select> -->
<ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="criteria.state" name="state"> </ng-select>
</div>
<div>
<label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
@@ -200,9 +201,7 @@
<div class="space-y-4">
<div>
<label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
<select id="state" [(ngModel)]="criteria.state" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option selected>Arkansas</option>
</select>
<ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="criteria.state" name="state"> </ng-select>
</div>
<div>
<label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
@@ -271,9 +270,7 @@
<div class="space-y-4">
<div>
<label for="states" class="block mb-2 text-sm font-medium text-gray-900">Locations served - States</label>
<select id="states" [(ngModel)]="criteria.states" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option selected>Arkansas</option>
</select>
<ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="criteria.states" name="states" [multiple]="true"> </ng-select>
</div>
<div>
<label for="counties" class="block mb-2 text-sm font-medium text-gray-900">Locations served - Counties</label>

View File

@@ -0,0 +1,6 @@
::ng-deep .ng-select.custom .ng-select-container {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
height: 46px;
border-radius: 0.5rem;
}

View File

@@ -1,5 +1,6 @@
import { AsyncPipe, NgIf } from '@angular/common';
import { Component } from '@angular/core';
import { NgSelectModule } from '@ng-select/ng-select';
import { BusinessListingCriteria, CommercialPropertyListingCriteria, KeyValue, KeyValueStyle, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { SelectOptionsService } from '../../services/select-options.service';
import { SharedModule } from '../../shared/shared/shared.module';
@@ -8,8 +9,9 @@ import { ModalService } from './modal.service';
@Component({
selector: 'app-search-modal',
standalone: true,
imports: [SharedModule, AsyncPipe, NgIf],
imports: [SharedModule, AsyncPipe, NgIf, NgSelectModule],
templateUrl: './search-modal.component.html',
styleUrl: './search-modal.component.scss',
})
export class SearchModalComponent {
constructor(public selectOptions: SelectOptionsService, public modalService: ModalService) {}

View File

@@ -20,7 +20,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../.
imports: [SharedModule],
providers: [],
templateUrl: './details-business-listing.component.html',
styleUrl: './details-business-listing.component.scss',
styleUrl: '../details.scss',
})
export class DetailsBusinessListingComponent {
// listings: Array<BusinessListing>;
@@ -70,7 +70,7 @@ export class DetailsBusinessListingComponent {
}
});
this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl };
this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandler);
this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandler.bind('business'));
}
async ngOnInit() {

View File

@@ -1,53 +0,0 @@
::ng-deep p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-size: 1rem; /* oder 1rem, abhängig vom Browser und den Standardeinstellungen */
line-height: 1.5;
}
::ng-deep h1 {
display: block;
font-size: 2em; /* etwa 32px */
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
::ng-deep h2 {
display: block;
font-size: 1.5em; /* etwa 24px */
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
::ng-deep h3 {
display: block;
font-size: 1.17em; /* etwa 18.72px */
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
::ng-deep ul {
display: block;
list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px; /* Standard-Einrückung für Listen */
}
::ng-deep li {
display: list-item; /* Zeigt das Element als Listenelement an */
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}

View File

@@ -3,7 +3,6 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { KeycloakService } from 'keycloak-angular';
import onChange from 'on-change';
import { lastValueFrom } from 'rxjs';
import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { CommercialPropertyListingCriteria, ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
@@ -15,7 +14,7 @@ import { MailService } from '../../../services/mail.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../../../utils/utils';
import { map2User } from '../../../utils/utils';
@Component({
selector: 'app-details-commercial-property-listing',
@@ -23,7 +22,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../.
imports: [SharedModule],
providers: [],
templateUrl: './details-commercial-property-listing.component.html',
styleUrl: './details-commercial-property-listing.component.scss',
styleUrl: '../details.scss',
})
export class DetailsCommercialPropertyListingComponent {
responsiveOptions = [
@@ -73,7 +72,7 @@ export class DetailsCommercialPropertyListingComponent {
) {
this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl };
this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandler);
// this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandler);
}
async ngOnInit() {

View File

@@ -1,53 +0,0 @@
::ng-deep p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-size: 1rem; /* oder 1rem, abhängig vom Browser und den Standardeinstellungen */
line-height: 1.5;
}
::ng-deep h1 {
display: block;
font-size: 2em; /* etwa 32px */
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
::ng-deep h2 {
display: block;
font-size: 1.5em; /* etwa 24px */
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
::ng-deep h3 {
display: block;
font-size: 1.17em; /* etwa 18.72px */
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
::ng-deep ul {
display: block;
list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px; /* Standard-Einrückung für Listen */
}
::ng-deep li {
display: list-item; /* Zeigt das Element als Listenelement an */
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}

View File

@@ -19,7 +19,7 @@ import { formatPhoneNumber, map2User } from '../../../utils/utils';
standalone: true,
imports: [SharedModule],
templateUrl: './details-user.component.html',
styleUrl: './details-user.component.scss',
styleUrl: '../details.scss',
})
export class DetailsUserComponent {
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;

View File

@@ -1,4 +1,4 @@
::ng-deep p {
:host ::ng-deep p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
@@ -7,7 +7,7 @@
font-size: 1rem; /* oder 1rem, abhängig vom Browser und den Standardeinstellungen */
line-height: 1.5;
}
::ng-deep h1 {
:host ::ng-deep h1 {
display: block;
font-size: 2em; /* etwa 32px */
margin-top: 0.67em;
@@ -16,7 +16,7 @@
margin-right: 0;
font-weight: bold;
}
::ng-deep h2 {
:host ::ng-deep h2 {
display: block;
font-size: 1.5em; /* etwa 24px */
margin-top: 0.83em;
@@ -25,7 +25,7 @@
margin-right: 0;
font-weight: bold;
}
::ng-deep h3 {
:host ::ng-deep h3 {
display: block;
font-size: 1.17em; /* etwa 18.72px */
margin-top: 1em;
@@ -34,7 +34,7 @@
margin-right: 0;
font-weight: bold;
}
::ng-deep ul {
:host ::ng-deep ul {
display: block;
list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
margin-top: 1em;
@@ -43,7 +43,7 @@
margin-right: 0;
padding-left: 40px; /* Standard-Einrückung für Listen */
}
::ng-deep li {
:host ::ng-deep li {
display: list-item; /* Zeigt das Element als Listenelement an */
margin-left: 0;
margin-right: 0;

View File

@@ -7,7 +7,7 @@ import onChange from 'on-change';
import { BusinessListingCriteria, CommercialPropertyListingCriteria, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { ListingsService } from '../../services/listings.service';
import { SelectOptionsService } from '../../services/select-options.service';
import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../../utils/utils';
import { getCriteriaStateObject, getSessionStorageHandlerWrapper, map2User } from '../../utils/utils';
@Component({
selector: 'app-home',
standalone: true,
@@ -26,7 +26,7 @@ export class HomeComponent {
user: KeycloakUser;
prompt: string;
public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public keycloakService: KeycloakService, private listingsService: ListingsService) {
this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandler);
this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandlerWrapper(this.activeTabAction));
}
async ngOnInit() {
const token = await this.keycloakService.getToken();

View File

@@ -10,7 +10,7 @@ import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
import { getCriteriaStateObject, getSessionStorageHandlerWrapper } from '../../../utils/utils';
@Component({
selector: 'app-broker-listings',
@@ -49,7 +49,7 @@ export class BrokerListingsComponent {
private imageService: ImageService,
private route: ActivatedRoute,
) {
this.criteria = onChange(getCriteriaStateObject('user'), getSessionStorageHandler);
this.criteria = onChange(getCriteriaStateObject('broker'), getSessionStorageHandlerWrapper('broker'));
this.route.data.subscribe(async () => {
if (this.router.getCurrentNavigation().extras.state) {
} else {

View File

@@ -9,7 +9,7 @@ import { environment } from '../../../../environments/environment';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
import { getCriteriaStateObject, getSessionStorageHandlerWrapper } from '../../../utils/utils';
@Component({
selector: 'app-business-listings',
@@ -45,7 +45,7 @@ export class BusinessListingsComponent {
private imageService: ImageService,
private route: ActivatedRoute,
) {
this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandler);
this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandlerWrapper('business'));
this.route.data.subscribe(async () => {
if (this.router.getCurrentNavigation().extras.state) {
} else {
@@ -59,6 +59,7 @@ export class BusinessListingsComponent {
//initFlowbite();
}
async init() {
this.reset();
const statesResult = await this.listingsService.getAllStates('business');
this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count }));
this.search();

View File

@@ -9,7 +9,7 @@ import { environment } from '../../../../environments/environment';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
import { getCriteriaStateObject, getSessionStorageHandlerWrapper } from '../../../utils/utils';
@Component({
selector: 'app-commercial-property-listings',
@@ -44,7 +44,7 @@ export class CommercialPropertyListingsComponent {
private imageService: ImageService,
private route: ActivatedRoute,
) {
this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandler);
this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandlerWrapper('commercialProperty'));
this.route.data.subscribe(async () => {
if (this.router.getCurrentNavigation().extras.state) {
} else {

View File

@@ -37,6 +37,6 @@
quill-editor {
width: 100%;
}
::ng-deep .ng-select.ng-select-single .ng-select-container {
:host ::ng-deep .ng-select.ng-select-single .ng-select-container {
height: 42px;
}

View File

@@ -8,7 +8,7 @@
// margin: 0 auto;
// }
::ng-deep quill-editor {
:host ::ng-deep quill-editor {
.ql-container {
min-height: 200px;
}

View File

@@ -164,11 +164,20 @@ export function formatPhoneNumber(phone: string): string {
}
return phone;
}
export const getSessionStorageHandler = function (path, value, previous, applyData) {
sessionStorage.setItem('criteria', JSON.stringify(this));
// export const getSessionStorageHandler = function (path, value, previous, applyData) {
// sessionStorage.setItem(applyData, JSON.stringify(this));
// };
export const getSessionStorageHandler = function (criteriaType, path, value, previous, applyData) {
sessionStorage.setItem(`${criteriaType}_criteria`, JSON.stringify(this));
console.log('Zusätzlicher Parameter:', criteriaType);
};
export const getSessionStorageHandlerWrapper = param => {
return function (path, value, previous, applyData) {
getSessionStorageHandler.call(this, param, path, value, previous, applyData);
};
};
export function getCriteriaStateObject(criteriaType: 'business' | 'commercialProperty' | 'user') {
export function getCriteriaStateObject(criteriaType: 'business' | 'commercialProperty' | 'broker') {
let initialState;
if (criteriaType === 'business') {
initialState = createEmptyBusinessListingCriteria();
@@ -177,7 +186,7 @@ export function getCriteriaStateObject(criteriaType: 'business' | 'commercialPro
} else {
initialState = createEmptyUserListingCriteria();
}
const storedState = sessionStorage.getItem('criteria');
const storedState = sessionStorage.getItem(`${criteriaType}_criteria`);
return storedState ? JSON.parse(storedState) : initialState;
}