@inploi/plugin-job-search 0.23.0 → 0.23.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cdn/index.js +11 -11
- package/dist/index.cjs +139 -43
- package/dist/index.js +139 -43
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1563,7 +1563,7 @@ const getFilterValue = (filterValue) => {
|
|
|
1563
1563
|
return null;
|
|
1564
1564
|
return filterValue;
|
|
1565
1565
|
};
|
|
1566
|
-
const filtersToPayload = (filters) => {
|
|
1566
|
+
const filtersToPayload$1 = (filters) => {
|
|
1567
1567
|
return Object.fromEntries(
|
|
1568
1568
|
Object.entries(filters).map(([key, filter]) => {
|
|
1569
1569
|
return [key, getFilterValue(filter == null ? void 0 : filter.value)];
|
|
@@ -1580,7 +1580,7 @@ const getAvailableFilters = async ({
|
|
|
1580
1580
|
try {
|
|
1581
1581
|
const searchParams = new URLSearchParams(
|
|
1582
1582
|
stringify({
|
|
1583
|
-
filters: filtersToPayload(filters),
|
|
1583
|
+
filters: filtersToPayload$1(filters),
|
|
1584
1584
|
query: keyword
|
|
1585
1585
|
})
|
|
1586
1586
|
);
|
|
@@ -1609,7 +1609,7 @@ const getJobSearchResults = async ({
|
|
|
1609
1609
|
try {
|
|
1610
1610
|
const searchParams = new URLSearchParams(
|
|
1611
1611
|
stringify({
|
|
1612
|
-
filters: filtersToPayload(filters)
|
|
1612
|
+
filters: filtersToPayload$1(filters)
|
|
1613
1613
|
})
|
|
1614
1614
|
);
|
|
1615
1615
|
searchParams.set("page", page.toString());
|
|
@@ -2690,6 +2690,48 @@ const cacheKey = (value) => {
|
|
|
2690
2690
|
).join("&");
|
|
2691
2691
|
return `${value.baseKey}::${filterString}::${value.keyword ?? ""}`;
|
|
2692
2692
|
};
|
|
2693
|
+
const useMediaQuery = (query) => {
|
|
2694
|
+
const [matches, setMatches] = h$1(false);
|
|
2695
|
+
y$1(() => {
|
|
2696
|
+
if (typeof window === "undefined")
|
|
2697
|
+
return;
|
|
2698
|
+
const mediaQuery = window.matchMedia(query);
|
|
2699
|
+
const updateMatches = () => setMatches(mediaQuery.matches);
|
|
2700
|
+
updateMatches();
|
|
2701
|
+
mediaQuery.addEventListener("change", updateMatches);
|
|
2702
|
+
return () => mediaQuery.removeEventListener("change", updateMatches);
|
|
2703
|
+
}, [query]);
|
|
2704
|
+
return matches;
|
|
2705
|
+
};
|
|
2706
|
+
const useViewTracking = (elementRef, { minViewTime = 1e3, visibilityThreshold = 0, onView }) => {
|
|
2707
|
+
const [viewed, setViewed] = h$1(false);
|
|
2708
|
+
y$1(() => {
|
|
2709
|
+
if (viewed)
|
|
2710
|
+
return;
|
|
2711
|
+
if (!elementRef.current)
|
|
2712
|
+
return;
|
|
2713
|
+
let timeout;
|
|
2714
|
+
const observer = new IntersectionObserver(
|
|
2715
|
+
(entries) => entries.forEach((entry) => {
|
|
2716
|
+
clearTimeout(timeout);
|
|
2717
|
+
if (entry.isIntersecting) {
|
|
2718
|
+
timeout = setTimeout(() => {
|
|
2719
|
+
setViewed(true);
|
|
2720
|
+
onView();
|
|
2721
|
+
}, minViewTime);
|
|
2722
|
+
}
|
|
2723
|
+
}),
|
|
2724
|
+
{
|
|
2725
|
+
threshold: visibilityThreshold
|
|
2726
|
+
}
|
|
2727
|
+
);
|
|
2728
|
+
observer.observe(elementRef.current);
|
|
2729
|
+
return () => {
|
|
2730
|
+
observer.disconnect();
|
|
2731
|
+
clearTimeout(timeout);
|
|
2732
|
+
};
|
|
2733
|
+
}, [elementRef, minViewTime, visibilityThreshold, onView, viewed]);
|
|
2734
|
+
};
|
|
2693
2735
|
const jobSearch = "";
|
|
2694
2736
|
const getFilterValues = (appliedFilters) => {
|
|
2695
2737
|
const entries = Object.entries(appliedFilters).map(([key, value]) => {
|
|
@@ -4246,19 +4288,6 @@ const CurrentValueTag = ({ query, property, selectedValues }) => {
|
|
|
4246
4288
|
exhaustive(query);
|
|
4247
4289
|
}
|
|
4248
4290
|
};
|
|
4249
|
-
const useMediaQuery = (query) => {
|
|
4250
|
-
const [matches, setMatches] = h$1(false);
|
|
4251
|
-
y$1(() => {
|
|
4252
|
-
if (typeof window === "undefined")
|
|
4253
|
-
return;
|
|
4254
|
-
const mediaQuery = window.matchMedia(query);
|
|
4255
|
-
const updateMatches = () => setMatches(mediaQuery.matches);
|
|
4256
|
-
updateMatches();
|
|
4257
|
-
mediaQuery.addEventListener("change", updateMatches);
|
|
4258
|
-
return () => mediaQuery.removeEventListener("change", updateMatches);
|
|
4259
|
-
}, [query]);
|
|
4260
|
-
return matches;
|
|
4261
|
-
};
|
|
4262
4291
|
const TAG_HEIGHT = 44;
|
|
4263
4292
|
const LINE_COUNT = 6;
|
|
4264
4293
|
const SUGGESTIONS_COUNT_THRESHOLD = 12;
|
|
@@ -5446,8 +5475,12 @@ const JobCardLogo = ({
|
|
|
5446
5475
|
};
|
|
5447
5476
|
const asArray = (value) => Array.isArray(value) ? value : [value];
|
|
5448
5477
|
const ONE_DAY_MS = 1e3 * 60 * 60 * 24 * 7;
|
|
5449
|
-
const JobCard = ({
|
|
5450
|
-
|
|
5478
|
+
const JobCard = ({
|
|
5479
|
+
job,
|
|
5480
|
+
config,
|
|
5481
|
+
onJobClick
|
|
5482
|
+
}) => {
|
|
5483
|
+
var _a, _b, _c;
|
|
5451
5484
|
const subheading = config.subheading ? getDisplayableProperty({ job, property: config.subheading }) : null;
|
|
5452
5485
|
const tags = config.infoTags.flatMap((infoTag) => asArray(getDisplayableProperty({ job, property: infoTag }))).filter(Boolean);
|
|
5453
5486
|
const salary = asArray(
|
|
@@ -5457,11 +5490,16 @@ const JobCard = ({ job, config }) => {
|
|
|
5457
5490
|
const href = ((_b = config.overrides) == null ? void 0 : _b.baseUrl) ? config.overrides.baseUrl(job.id.toString()) : job.href;
|
|
5458
5491
|
const newUnderDays = config.newUnderDays ?? 7;
|
|
5459
5492
|
const isNew = job.createdAt ? new Date(job.createdAt).getTime() > Date.now() - newUnderDays * ONE_DAY_MS : false;
|
|
5493
|
+
const handleClick = (e2) => {
|
|
5494
|
+
var _a2, _b2;
|
|
5495
|
+
onJobClick == null ? void 0 : onJobClick(job);
|
|
5496
|
+
(_b2 = (_a2 = config.overrides) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, e2);
|
|
5497
|
+
};
|
|
5460
5498
|
return /* @__PURE__ */ u$2(
|
|
5461
5499
|
"a",
|
|
5462
5500
|
{
|
|
5463
5501
|
onMouseEnter: (_c = config.overrides) == null ? void 0 : _c.onMouseEnter,
|
|
5464
|
-
onClick:
|
|
5502
|
+
onClick: handleClick,
|
|
5465
5503
|
href,
|
|
5466
5504
|
target: config.openJob === "redirect-new-tab" ? "_blank" : void 0,
|
|
5467
5505
|
class: wrapperClass(),
|
|
@@ -5547,17 +5585,12 @@ const JobCardSkeleton = ({
|
|
|
5547
5585
|
const LoadMore = ({
|
|
5548
5586
|
state,
|
|
5549
5587
|
fetchNextPage,
|
|
5550
|
-
config
|
|
5551
|
-
analytics
|
|
5588
|
+
config
|
|
5552
5589
|
}) => {
|
|
5553
5590
|
if (state === "revalidating") {
|
|
5554
5591
|
return /* @__PURE__ */ u$2("ul", { class: "flex flex-col gap-3", "aria-hidden": true, children: Array.from({ length: PAGE_SIZE }).map((_2, i2) => /* @__PURE__ */ u$2("li", { children: /* @__PURE__ */ u$2(JobCardSkeleton, { seed: i2, animationDelay: (i2 - 4) * 0.1, config }) }, i2)) });
|
|
5555
5592
|
} else {
|
|
5556
|
-
|
|
5557
|
-
analytics.log({ event: "SEARCH_PAGINATE" });
|
|
5558
|
-
fetchNextPage();
|
|
5559
|
-
};
|
|
5560
|
-
return /* @__PURE__ */ u$2("button", { class: btnClass({ variant: "neutral", class: "py-2" }), onClick: handleClick, children: "Load More" });
|
|
5593
|
+
return /* @__PURE__ */ u$2("button", { class: btnClass({ variant: "neutral", class: "py-2" }), onClick: fetchNextPage, children: "Load More" });
|
|
5561
5594
|
}
|
|
5562
5595
|
};
|
|
5563
5596
|
const getResultsCount = ({ pagination }) => {
|
|
@@ -5572,7 +5605,9 @@ const ResultsSection = ({
|
|
|
5572
5605
|
logger,
|
|
5573
5606
|
jobCardConfig,
|
|
5574
5607
|
initialData,
|
|
5575
|
-
|
|
5608
|
+
onResultsUpdate,
|
|
5609
|
+
onJobClick,
|
|
5610
|
+
onPaginate
|
|
5576
5611
|
}) => {
|
|
5577
5612
|
const [page, setPage] = h$1(1);
|
|
5578
5613
|
return /* @__PURE__ */ u$2(k$3, { children: Array.from({ length: page }).map((_2, index) => {
|
|
@@ -5586,10 +5621,14 @@ const ResultsSection = ({
|
|
|
5586
5621
|
page: index + 1,
|
|
5587
5622
|
isFirst: index === 0,
|
|
5588
5623
|
isLast,
|
|
5589
|
-
fetchNextPage: () =>
|
|
5624
|
+
fetchNextPage: () => {
|
|
5625
|
+
setPage(page + 1);
|
|
5626
|
+
onPaginate(page + 1);
|
|
5627
|
+
},
|
|
5590
5628
|
jobCardConfig,
|
|
5591
5629
|
initialData,
|
|
5592
|
-
|
|
5630
|
+
onResultsUpdate,
|
|
5631
|
+
onJobClick
|
|
5593
5632
|
},
|
|
5594
5633
|
index
|
|
5595
5634
|
) }, index);
|
|
@@ -5605,7 +5644,8 @@ const ResultsPage = ({
|
|
|
5605
5644
|
fetchNextPage,
|
|
5606
5645
|
jobCardConfig,
|
|
5607
5646
|
initialData,
|
|
5608
|
-
|
|
5647
|
+
onResultsUpdate,
|
|
5648
|
+
onJobClick
|
|
5609
5649
|
}) => {
|
|
5610
5650
|
const fallbackData = page === 1 ? initialData : void 0;
|
|
5611
5651
|
const { keyword$ } = store;
|
|
@@ -5622,6 +5662,13 @@ const ResultsPage = ({
|
|
|
5622
5662
|
{ ...SWR_SETTINGS, fallbackData }
|
|
5623
5663
|
)
|
|
5624
5664
|
);
|
|
5665
|
+
y$1(() => {
|
|
5666
|
+
if (data && isFirst && onResultsUpdate) {
|
|
5667
|
+
onResultsUpdate({
|
|
5668
|
+
totalCount: data.pagination.total
|
|
5669
|
+
});
|
|
5670
|
+
}
|
|
5671
|
+
}, [data, isFirst, onResultsUpdate]);
|
|
5625
5672
|
switch (state) {
|
|
5626
5673
|
case "loading":
|
|
5627
5674
|
return /* @__PURE__ */ u$2(k$3, { children: [
|
|
@@ -5657,12 +5704,12 @@ const ResultsPage = ({
|
|
|
5657
5704
|
{
|
|
5658
5705
|
class: "ease-expo-out duration-slow transition-opacity",
|
|
5659
5706
|
style: { opacity: state === "revalidating" ? 0.33 : 1 },
|
|
5660
|
-
children: /* @__PURE__ */ u$2(JobCard, { job, config: jobCardConfig })
|
|
5707
|
+
children: /* @__PURE__ */ u$2(JobCard, { job, onJobClick, config: jobCardConfig })
|
|
5661
5708
|
},
|
|
5662
5709
|
job.id
|
|
5663
5710
|
);
|
|
5664
5711
|
}) }),
|
|
5665
|
-
hasMore && isLast && /* @__PURE__ */ u$2(LoadMore, { state, fetchNextPage, config: jobCardConfig
|
|
5712
|
+
hasMore && isLast && /* @__PURE__ */ u$2(LoadMore, { state, fetchNextPage, config: jobCardConfig })
|
|
5666
5713
|
] });
|
|
5667
5714
|
}
|
|
5668
5715
|
default:
|
|
@@ -5694,6 +5741,17 @@ const getFilterDefaults = (properties, field = "value") => properties.reduce(
|
|
|
5694
5741
|
},
|
|
5695
5742
|
{}
|
|
5696
5743
|
);
|
|
5744
|
+
const filtersToPayload = (filters) => {
|
|
5745
|
+
return Object.fromEntries(
|
|
5746
|
+
Object.entries(filters).map(([key, filter]) => {
|
|
5747
|
+
const value = filter == null ? void 0 : filter.value;
|
|
5748
|
+
return [
|
|
5749
|
+
key,
|
|
5750
|
+
Array.isArray(value) ? value : value ? [value] : []
|
|
5751
|
+
];
|
|
5752
|
+
}).filter(([, value]) => value !== void 0 && value.length > 0)
|
|
5753
|
+
);
|
|
5754
|
+
};
|
|
5697
5755
|
const JobSearch = ({
|
|
5698
5756
|
apiClient,
|
|
5699
5757
|
logger,
|
|
@@ -5706,30 +5764,64 @@ const JobSearch = ({
|
|
|
5706
5764
|
params
|
|
5707
5765
|
}) => {
|
|
5708
5766
|
const appRef = A$1(null);
|
|
5767
|
+
const defaultFilters = getFilterDefaults(properties, "defaultValue");
|
|
5709
5768
|
const [appliedFilters, setAppliedFilters] = h$1(() => ({
|
|
5710
5769
|
default: true,
|
|
5711
|
-
filters:
|
|
5770
|
+
filters: defaultFilters
|
|
5712
5771
|
}));
|
|
5772
|
+
const [totalCount, setTotalCount] = h$1(0);
|
|
5713
5773
|
const { keyword$ } = store;
|
|
5774
|
+
const defaultFiltersPayload = filtersToPayload(defaultFilters);
|
|
5775
|
+
const currentFiltersPayload = filtersToPayload(appliedFilters.filters);
|
|
5776
|
+
const getSearchProperties = q$1(
|
|
5777
|
+
() => ({
|
|
5778
|
+
query: keyword$.value || void 0,
|
|
5779
|
+
filters: currentFiltersPayload,
|
|
5780
|
+
default_filters: defaultFiltersPayload,
|
|
5781
|
+
total_count: totalCount,
|
|
5782
|
+
page_size: PAGE_SIZE
|
|
5783
|
+
}),
|
|
5784
|
+
[keyword$.value, currentFiltersPayload, defaultFiltersPayload, totalCount]
|
|
5785
|
+
);
|
|
5786
|
+
useViewTracking(appRef, {
|
|
5787
|
+
minViewTime: 2e3,
|
|
5788
|
+
onView: () => {
|
|
5789
|
+
analytics.log({ event: "VIEW_SEARCH", properties: null });
|
|
5790
|
+
}
|
|
5791
|
+
});
|
|
5714
5792
|
y$1(() => {
|
|
5715
5793
|
const timer = window.setTimeout(() => {
|
|
5716
|
-
|
|
5717
|
-
|
|
5718
|
-
const hasInteracted = appliedFilters.default !== true;
|
|
5719
|
-
if (!keyword$.value && !hasInteracted)
|
|
5794
|
+
const shouldSkipAnalytics = appliedFilters.default === true && !keyword$.value || !keyword$.value && !Object.keys(currentFiltersPayload).length || totalCount === 0;
|
|
5795
|
+
if (shouldSkipAnalytics)
|
|
5720
5796
|
return;
|
|
5721
5797
|
analytics.log({
|
|
5722
5798
|
event: "SEARCH_SETTLE",
|
|
5723
|
-
properties:
|
|
5724
|
-
query: keyword$.value || void 0,
|
|
5725
|
-
filters: hasInteracted ? formattedFilters : void 0
|
|
5726
|
-
}
|
|
5799
|
+
properties: getSearchProperties()
|
|
5727
5800
|
});
|
|
5728
5801
|
}, 5e3);
|
|
5729
5802
|
return () => {
|
|
5730
5803
|
clearTimeout(timer);
|
|
5731
5804
|
};
|
|
5732
|
-
}, [appliedFilters.
|
|
5805
|
+
}, [analytics, appliedFilters.default, currentFiltersPayload, getSearchProperties, keyword$.value, totalCount]);
|
|
5806
|
+
const onJobClick = (job) => {
|
|
5807
|
+
analytics.log({
|
|
5808
|
+
event: "SEARCH_JOB_CLICK",
|
|
5809
|
+
properties: {
|
|
5810
|
+
job_id: job.id,
|
|
5811
|
+
...getSearchProperties()
|
|
5812
|
+
}
|
|
5813
|
+
});
|
|
5814
|
+
};
|
|
5815
|
+
const onPaginate = (page) => {
|
|
5816
|
+
analytics.log({
|
|
5817
|
+
event: "SEARCH_PAGINATE",
|
|
5818
|
+
properties: {
|
|
5819
|
+
page,
|
|
5820
|
+
...getSearchProperties()
|
|
5821
|
+
}
|
|
5822
|
+
});
|
|
5823
|
+
console.log("onPaginate", page, getSearchProperties());
|
|
5824
|
+
};
|
|
5733
5825
|
return /* @__PURE__ */ u$2("div", { ref: appRef, class: className, id: JOB_SEARCH_SCOPE_ELEMENT_ID, children: /* @__PURE__ */ u$2("div", { class: "ijs-app bg-app rounded-app font-family-default font-weight-default font-style-default mx-auto flex min-h-screen max-w-screen-lg flex-col gap-4 py-4 md:grid md:grid-cols-3 md:px-4", children: [
|
|
5734
5826
|
/* @__PURE__ */ u$2(ErrorBoundary, { Fallback: ErrorView, children: /* @__PURE__ */ u$2("div", { class: "flex flex-col gap-2", children: [
|
|
5735
5827
|
params.enableKeywordSearch && /* @__PURE__ */ u$2(KeywordSearch, { onKeywordChange }),
|
|
@@ -5768,7 +5860,11 @@ const JobSearch = ({
|
|
|
5768
5860
|
apiClient,
|
|
5769
5861
|
jobCardConfig: params.jobCard,
|
|
5770
5862
|
initialData: appliedFilters.default ? initialData == null ? void 0 : initialData.jobs : void 0,
|
|
5771
|
-
|
|
5863
|
+
onResultsUpdate: (data) => {
|
|
5864
|
+
setTotalCount(data.totalCount);
|
|
5865
|
+
},
|
|
5866
|
+
onJobClick,
|
|
5867
|
+
onPaginate
|
|
5772
5868
|
},
|
|
5773
5869
|
cacheKey({ filter: appliedFilters.filters, baseKey: "resultsSection", keyword: keyword$.value })
|
|
5774
5870
|
) }) }) })
|
package/dist/index.js
CHANGED
|
@@ -1561,7 +1561,7 @@ const getFilterValue = (filterValue) => {
|
|
|
1561
1561
|
return null;
|
|
1562
1562
|
return filterValue;
|
|
1563
1563
|
};
|
|
1564
|
-
const filtersToPayload = (filters) => {
|
|
1564
|
+
const filtersToPayload$1 = (filters) => {
|
|
1565
1565
|
return Object.fromEntries(
|
|
1566
1566
|
Object.entries(filters).map(([key, filter]) => {
|
|
1567
1567
|
return [key, getFilterValue(filter == null ? void 0 : filter.value)];
|
|
@@ -1578,7 +1578,7 @@ const getAvailableFilters = async ({
|
|
|
1578
1578
|
try {
|
|
1579
1579
|
const searchParams = new URLSearchParams(
|
|
1580
1580
|
stringify({
|
|
1581
|
-
filters: filtersToPayload(filters),
|
|
1581
|
+
filters: filtersToPayload$1(filters),
|
|
1582
1582
|
query: keyword
|
|
1583
1583
|
})
|
|
1584
1584
|
);
|
|
@@ -1607,7 +1607,7 @@ const getJobSearchResults = async ({
|
|
|
1607
1607
|
try {
|
|
1608
1608
|
const searchParams = new URLSearchParams(
|
|
1609
1609
|
stringify({
|
|
1610
|
-
filters: filtersToPayload(filters)
|
|
1610
|
+
filters: filtersToPayload$1(filters)
|
|
1611
1611
|
})
|
|
1612
1612
|
);
|
|
1613
1613
|
searchParams.set("page", page.toString());
|
|
@@ -2688,6 +2688,48 @@ const cacheKey = (value) => {
|
|
|
2688
2688
|
).join("&");
|
|
2689
2689
|
return `${value.baseKey}::${filterString}::${value.keyword ?? ""}`;
|
|
2690
2690
|
};
|
|
2691
|
+
const useMediaQuery = (query) => {
|
|
2692
|
+
const [matches, setMatches] = h$1(false);
|
|
2693
|
+
y$1(() => {
|
|
2694
|
+
if (typeof window === "undefined")
|
|
2695
|
+
return;
|
|
2696
|
+
const mediaQuery = window.matchMedia(query);
|
|
2697
|
+
const updateMatches = () => setMatches(mediaQuery.matches);
|
|
2698
|
+
updateMatches();
|
|
2699
|
+
mediaQuery.addEventListener("change", updateMatches);
|
|
2700
|
+
return () => mediaQuery.removeEventListener("change", updateMatches);
|
|
2701
|
+
}, [query]);
|
|
2702
|
+
return matches;
|
|
2703
|
+
};
|
|
2704
|
+
const useViewTracking = (elementRef, { minViewTime = 1e3, visibilityThreshold = 0, onView }) => {
|
|
2705
|
+
const [viewed, setViewed] = h$1(false);
|
|
2706
|
+
y$1(() => {
|
|
2707
|
+
if (viewed)
|
|
2708
|
+
return;
|
|
2709
|
+
if (!elementRef.current)
|
|
2710
|
+
return;
|
|
2711
|
+
let timeout;
|
|
2712
|
+
const observer = new IntersectionObserver(
|
|
2713
|
+
(entries) => entries.forEach((entry) => {
|
|
2714
|
+
clearTimeout(timeout);
|
|
2715
|
+
if (entry.isIntersecting) {
|
|
2716
|
+
timeout = setTimeout(() => {
|
|
2717
|
+
setViewed(true);
|
|
2718
|
+
onView();
|
|
2719
|
+
}, minViewTime);
|
|
2720
|
+
}
|
|
2721
|
+
}),
|
|
2722
|
+
{
|
|
2723
|
+
threshold: visibilityThreshold
|
|
2724
|
+
}
|
|
2725
|
+
);
|
|
2726
|
+
observer.observe(elementRef.current);
|
|
2727
|
+
return () => {
|
|
2728
|
+
observer.disconnect();
|
|
2729
|
+
clearTimeout(timeout);
|
|
2730
|
+
};
|
|
2731
|
+
}, [elementRef, minViewTime, visibilityThreshold, onView, viewed]);
|
|
2732
|
+
};
|
|
2691
2733
|
const jobSearch = "";
|
|
2692
2734
|
const getFilterValues = (appliedFilters) => {
|
|
2693
2735
|
const entries = Object.entries(appliedFilters).map(([key, value]) => {
|
|
@@ -4244,19 +4286,6 @@ const CurrentValueTag = ({ query, property, selectedValues }) => {
|
|
|
4244
4286
|
exhaustive(query);
|
|
4245
4287
|
}
|
|
4246
4288
|
};
|
|
4247
|
-
const useMediaQuery = (query) => {
|
|
4248
|
-
const [matches, setMatches] = h$1(false);
|
|
4249
|
-
y$1(() => {
|
|
4250
|
-
if (typeof window === "undefined")
|
|
4251
|
-
return;
|
|
4252
|
-
const mediaQuery = window.matchMedia(query);
|
|
4253
|
-
const updateMatches = () => setMatches(mediaQuery.matches);
|
|
4254
|
-
updateMatches();
|
|
4255
|
-
mediaQuery.addEventListener("change", updateMatches);
|
|
4256
|
-
return () => mediaQuery.removeEventListener("change", updateMatches);
|
|
4257
|
-
}, [query]);
|
|
4258
|
-
return matches;
|
|
4259
|
-
};
|
|
4260
4289
|
const TAG_HEIGHT = 44;
|
|
4261
4290
|
const LINE_COUNT = 6;
|
|
4262
4291
|
const SUGGESTIONS_COUNT_THRESHOLD = 12;
|
|
@@ -5444,8 +5473,12 @@ const JobCardLogo = ({
|
|
|
5444
5473
|
};
|
|
5445
5474
|
const asArray = (value) => Array.isArray(value) ? value : [value];
|
|
5446
5475
|
const ONE_DAY_MS = 1e3 * 60 * 60 * 24 * 7;
|
|
5447
|
-
const JobCard = ({
|
|
5448
|
-
|
|
5476
|
+
const JobCard = ({
|
|
5477
|
+
job,
|
|
5478
|
+
config,
|
|
5479
|
+
onJobClick
|
|
5480
|
+
}) => {
|
|
5481
|
+
var _a, _b, _c;
|
|
5449
5482
|
const subheading = config.subheading ? getDisplayableProperty({ job, property: config.subheading }) : null;
|
|
5450
5483
|
const tags = config.infoTags.flatMap((infoTag) => asArray(getDisplayableProperty({ job, property: infoTag }))).filter(Boolean);
|
|
5451
5484
|
const salary = asArray(
|
|
@@ -5455,11 +5488,16 @@ const JobCard = ({ job, config }) => {
|
|
|
5455
5488
|
const href = ((_b = config.overrides) == null ? void 0 : _b.baseUrl) ? config.overrides.baseUrl(job.id.toString()) : job.href;
|
|
5456
5489
|
const newUnderDays = config.newUnderDays ?? 7;
|
|
5457
5490
|
const isNew = job.createdAt ? new Date(job.createdAt).getTime() > Date.now() - newUnderDays * ONE_DAY_MS : false;
|
|
5491
|
+
const handleClick = (e2) => {
|
|
5492
|
+
var _a2, _b2;
|
|
5493
|
+
onJobClick == null ? void 0 : onJobClick(job);
|
|
5494
|
+
(_b2 = (_a2 = config.overrides) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, e2);
|
|
5495
|
+
};
|
|
5458
5496
|
return /* @__PURE__ */ u$2(
|
|
5459
5497
|
"a",
|
|
5460
5498
|
{
|
|
5461
5499
|
onMouseEnter: (_c = config.overrides) == null ? void 0 : _c.onMouseEnter,
|
|
5462
|
-
onClick:
|
|
5500
|
+
onClick: handleClick,
|
|
5463
5501
|
href,
|
|
5464
5502
|
target: config.openJob === "redirect-new-tab" ? "_blank" : void 0,
|
|
5465
5503
|
class: wrapperClass(),
|
|
@@ -5545,17 +5583,12 @@ const JobCardSkeleton = ({
|
|
|
5545
5583
|
const LoadMore = ({
|
|
5546
5584
|
state,
|
|
5547
5585
|
fetchNextPage,
|
|
5548
|
-
config
|
|
5549
|
-
analytics
|
|
5586
|
+
config
|
|
5550
5587
|
}) => {
|
|
5551
5588
|
if (state === "revalidating") {
|
|
5552
5589
|
return /* @__PURE__ */ u$2("ul", { class: "flex flex-col gap-3", "aria-hidden": true, children: Array.from({ length: PAGE_SIZE }).map((_2, i2) => /* @__PURE__ */ u$2("li", { children: /* @__PURE__ */ u$2(JobCardSkeleton, { seed: i2, animationDelay: (i2 - 4) * 0.1, config }) }, i2)) });
|
|
5553
5590
|
} else {
|
|
5554
|
-
|
|
5555
|
-
analytics.log({ event: "SEARCH_PAGINATE" });
|
|
5556
|
-
fetchNextPage();
|
|
5557
|
-
};
|
|
5558
|
-
return /* @__PURE__ */ u$2("button", { class: btnClass({ variant: "neutral", class: "py-2" }), onClick: handleClick, children: "Load More" });
|
|
5591
|
+
return /* @__PURE__ */ u$2("button", { class: btnClass({ variant: "neutral", class: "py-2" }), onClick: fetchNextPage, children: "Load More" });
|
|
5559
5592
|
}
|
|
5560
5593
|
};
|
|
5561
5594
|
const getResultsCount = ({ pagination }) => {
|
|
@@ -5570,7 +5603,9 @@ const ResultsSection = ({
|
|
|
5570
5603
|
logger,
|
|
5571
5604
|
jobCardConfig,
|
|
5572
5605
|
initialData,
|
|
5573
|
-
|
|
5606
|
+
onResultsUpdate,
|
|
5607
|
+
onJobClick,
|
|
5608
|
+
onPaginate
|
|
5574
5609
|
}) => {
|
|
5575
5610
|
const [page, setPage] = h$1(1);
|
|
5576
5611
|
return /* @__PURE__ */ u$2(k$3, { children: Array.from({ length: page }).map((_2, index) => {
|
|
@@ -5584,10 +5619,14 @@ const ResultsSection = ({
|
|
|
5584
5619
|
page: index + 1,
|
|
5585
5620
|
isFirst: index === 0,
|
|
5586
5621
|
isLast,
|
|
5587
|
-
fetchNextPage: () =>
|
|
5622
|
+
fetchNextPage: () => {
|
|
5623
|
+
setPage(page + 1);
|
|
5624
|
+
onPaginate(page + 1);
|
|
5625
|
+
},
|
|
5588
5626
|
jobCardConfig,
|
|
5589
5627
|
initialData,
|
|
5590
|
-
|
|
5628
|
+
onResultsUpdate,
|
|
5629
|
+
onJobClick
|
|
5591
5630
|
},
|
|
5592
5631
|
index
|
|
5593
5632
|
) }, index);
|
|
@@ -5603,7 +5642,8 @@ const ResultsPage = ({
|
|
|
5603
5642
|
fetchNextPage,
|
|
5604
5643
|
jobCardConfig,
|
|
5605
5644
|
initialData,
|
|
5606
|
-
|
|
5645
|
+
onResultsUpdate,
|
|
5646
|
+
onJobClick
|
|
5607
5647
|
}) => {
|
|
5608
5648
|
const fallbackData = page === 1 ? initialData : void 0;
|
|
5609
5649
|
const { keyword$ } = store;
|
|
@@ -5620,6 +5660,13 @@ const ResultsPage = ({
|
|
|
5620
5660
|
{ ...SWR_SETTINGS, fallbackData }
|
|
5621
5661
|
)
|
|
5622
5662
|
);
|
|
5663
|
+
y$1(() => {
|
|
5664
|
+
if (data && isFirst && onResultsUpdate) {
|
|
5665
|
+
onResultsUpdate({
|
|
5666
|
+
totalCount: data.pagination.total
|
|
5667
|
+
});
|
|
5668
|
+
}
|
|
5669
|
+
}, [data, isFirst, onResultsUpdate]);
|
|
5623
5670
|
switch (state) {
|
|
5624
5671
|
case "loading":
|
|
5625
5672
|
return /* @__PURE__ */ u$2(k$3, { children: [
|
|
@@ -5655,12 +5702,12 @@ const ResultsPage = ({
|
|
|
5655
5702
|
{
|
|
5656
5703
|
class: "ease-expo-out duration-slow transition-opacity",
|
|
5657
5704
|
style: { opacity: state === "revalidating" ? 0.33 : 1 },
|
|
5658
|
-
children: /* @__PURE__ */ u$2(JobCard, { job, config: jobCardConfig })
|
|
5705
|
+
children: /* @__PURE__ */ u$2(JobCard, { job, onJobClick, config: jobCardConfig })
|
|
5659
5706
|
},
|
|
5660
5707
|
job.id
|
|
5661
5708
|
);
|
|
5662
5709
|
}) }),
|
|
5663
|
-
hasMore && isLast && /* @__PURE__ */ u$2(LoadMore, { state, fetchNextPage, config: jobCardConfig
|
|
5710
|
+
hasMore && isLast && /* @__PURE__ */ u$2(LoadMore, { state, fetchNextPage, config: jobCardConfig })
|
|
5664
5711
|
] });
|
|
5665
5712
|
}
|
|
5666
5713
|
default:
|
|
@@ -5692,6 +5739,17 @@ const getFilterDefaults = (properties, field = "value") => properties.reduce(
|
|
|
5692
5739
|
},
|
|
5693
5740
|
{}
|
|
5694
5741
|
);
|
|
5742
|
+
const filtersToPayload = (filters) => {
|
|
5743
|
+
return Object.fromEntries(
|
|
5744
|
+
Object.entries(filters).map(([key, filter]) => {
|
|
5745
|
+
const value = filter == null ? void 0 : filter.value;
|
|
5746
|
+
return [
|
|
5747
|
+
key,
|
|
5748
|
+
Array.isArray(value) ? value : value ? [value] : []
|
|
5749
|
+
];
|
|
5750
|
+
}).filter(([, value]) => value !== void 0 && value.length > 0)
|
|
5751
|
+
);
|
|
5752
|
+
};
|
|
5695
5753
|
const JobSearch = ({
|
|
5696
5754
|
apiClient,
|
|
5697
5755
|
logger,
|
|
@@ -5704,30 +5762,64 @@ const JobSearch = ({
|
|
|
5704
5762
|
params
|
|
5705
5763
|
}) => {
|
|
5706
5764
|
const appRef = A$1(null);
|
|
5765
|
+
const defaultFilters = getFilterDefaults(properties, "defaultValue");
|
|
5707
5766
|
const [appliedFilters, setAppliedFilters] = h$1(() => ({
|
|
5708
5767
|
default: true,
|
|
5709
|
-
filters:
|
|
5768
|
+
filters: defaultFilters
|
|
5710
5769
|
}));
|
|
5770
|
+
const [totalCount, setTotalCount] = h$1(0);
|
|
5711
5771
|
const { keyword$ } = store;
|
|
5772
|
+
const defaultFiltersPayload = filtersToPayload(defaultFilters);
|
|
5773
|
+
const currentFiltersPayload = filtersToPayload(appliedFilters.filters);
|
|
5774
|
+
const getSearchProperties = q$1(
|
|
5775
|
+
() => ({
|
|
5776
|
+
query: keyword$.value || void 0,
|
|
5777
|
+
filters: currentFiltersPayload,
|
|
5778
|
+
default_filters: defaultFiltersPayload,
|
|
5779
|
+
total_count: totalCount,
|
|
5780
|
+
page_size: PAGE_SIZE
|
|
5781
|
+
}),
|
|
5782
|
+
[keyword$.value, currentFiltersPayload, defaultFiltersPayload, totalCount]
|
|
5783
|
+
);
|
|
5784
|
+
useViewTracking(appRef, {
|
|
5785
|
+
minViewTime: 2e3,
|
|
5786
|
+
onView: () => {
|
|
5787
|
+
analytics.log({ event: "VIEW_SEARCH", properties: null });
|
|
5788
|
+
}
|
|
5789
|
+
});
|
|
5712
5790
|
y$1(() => {
|
|
5713
5791
|
const timer = window.setTimeout(() => {
|
|
5714
|
-
|
|
5715
|
-
|
|
5716
|
-
const hasInteracted = appliedFilters.default !== true;
|
|
5717
|
-
if (!keyword$.value && !hasInteracted)
|
|
5792
|
+
const shouldSkipAnalytics = appliedFilters.default === true && !keyword$.value || !keyword$.value && !Object.keys(currentFiltersPayload).length || totalCount === 0;
|
|
5793
|
+
if (shouldSkipAnalytics)
|
|
5718
5794
|
return;
|
|
5719
5795
|
analytics.log({
|
|
5720
5796
|
event: "SEARCH_SETTLE",
|
|
5721
|
-
properties:
|
|
5722
|
-
query: keyword$.value || void 0,
|
|
5723
|
-
filters: hasInteracted ? formattedFilters : void 0
|
|
5724
|
-
}
|
|
5797
|
+
properties: getSearchProperties()
|
|
5725
5798
|
});
|
|
5726
5799
|
}, 5e3);
|
|
5727
5800
|
return () => {
|
|
5728
5801
|
clearTimeout(timer);
|
|
5729
5802
|
};
|
|
5730
|
-
}, [appliedFilters.
|
|
5803
|
+
}, [analytics, appliedFilters.default, currentFiltersPayload, getSearchProperties, keyword$.value, totalCount]);
|
|
5804
|
+
const onJobClick = (job) => {
|
|
5805
|
+
analytics.log({
|
|
5806
|
+
event: "SEARCH_JOB_CLICK",
|
|
5807
|
+
properties: {
|
|
5808
|
+
job_id: job.id,
|
|
5809
|
+
...getSearchProperties()
|
|
5810
|
+
}
|
|
5811
|
+
});
|
|
5812
|
+
};
|
|
5813
|
+
const onPaginate = (page) => {
|
|
5814
|
+
analytics.log({
|
|
5815
|
+
event: "SEARCH_PAGINATE",
|
|
5816
|
+
properties: {
|
|
5817
|
+
page,
|
|
5818
|
+
...getSearchProperties()
|
|
5819
|
+
}
|
|
5820
|
+
});
|
|
5821
|
+
console.log("onPaginate", page, getSearchProperties());
|
|
5822
|
+
};
|
|
5731
5823
|
return /* @__PURE__ */ u$2("div", { ref: appRef, class: className, id: JOB_SEARCH_SCOPE_ELEMENT_ID, children: /* @__PURE__ */ u$2("div", { class: "ijs-app bg-app rounded-app font-family-default font-weight-default font-style-default mx-auto flex min-h-screen max-w-screen-lg flex-col gap-4 py-4 md:grid md:grid-cols-3 md:px-4", children: [
|
|
5732
5824
|
/* @__PURE__ */ u$2(ErrorBoundary, { Fallback: ErrorView, children: /* @__PURE__ */ u$2("div", { class: "flex flex-col gap-2", children: [
|
|
5733
5825
|
params.enableKeywordSearch && /* @__PURE__ */ u$2(KeywordSearch, { onKeywordChange }),
|
|
@@ -5766,7 +5858,11 @@ const JobSearch = ({
|
|
|
5766
5858
|
apiClient,
|
|
5767
5859
|
jobCardConfig: params.jobCard,
|
|
5768
5860
|
initialData: appliedFilters.default ? initialData == null ? void 0 : initialData.jobs : void 0,
|
|
5769
|
-
|
|
5861
|
+
onResultsUpdate: (data) => {
|
|
5862
|
+
setTotalCount(data.totalCount);
|
|
5863
|
+
},
|
|
5864
|
+
onJobClick,
|
|
5865
|
+
onPaginate
|
|
5770
5866
|
},
|
|
5771
5867
|
cacheKey({ filter: appliedFilters.filters, baseKey: "resultsSection", keyword: keyword$.value })
|
|
5772
5868
|
) }) }) })
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inploi/plugin-job-search",
|
|
3
|
-
"version": "0.23.
|
|
3
|
+
"version": "0.23.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/plugin-job-search.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@inploi/core": "1.14.3",
|
|
57
57
|
"@inploi/design-tokens": "0.2.1",
|
|
58
58
|
"@inploi/plugin-job-alerts": "0.3.0",
|
|
59
|
-
"@inploi/sdk": "1.14.
|
|
59
|
+
"@inploi/sdk": "1.14.5",
|
|
60
60
|
"eslint-config-custom": "0.1.0"
|
|
61
61
|
},
|
|
62
62
|
"msw": {
|