From fac9f3ec4faf0340ed171bb45973cef6cf832cc9 Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Tue, 14 Nov 2023 14:12:54 +0200 Subject: [PATCH 1/7] adds page and perpage url params for init pagination --- src/preview/dist/js/index_bundle.js | 2 +- src/preview/src/components/Previews.js | 14 +++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index 74ad792..b2b6b57 100644 --- a/src/preview/dist/js/index_bundle.js +++ b/src/preview/dist/js/index_bundle.js @@ -3437,7 +3437,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const gsdevtools = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => searchParams.get('gsdevtools'), []);\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n setSearchParams(collectFilters);\n setPage(0);\n }, [filters]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n console.log(\"found the one to be deleted\");\n console.log(filter);\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: 'flex',\n gap: '10px'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const gsdevtools = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => searchParams.get('gsdevtools'), []);\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('page') || 0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('perpage') || 10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setPage(0);\n }, [filters, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n page && (collectFilters.page = page);\n itemsPerPage && (collectFilters.perpage = itemsPerPage);\n setSearchParams(collectFilters);\n }, [filters, page, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: 'flex',\n gap: '10px'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); /***/ }), diff --git a/src/preview/src/components/Previews.js b/src/preview/src/components/Previews.js index 0093b58..78aa79d 100644 --- a/src/preview/src/components/Previews.js +++ b/src/preview/src/components/Previews.js @@ -88,8 +88,12 @@ export default function Previews({ data }) { const [ads, setAds] = useState([]); const [filters, setFilters] = useState(getFiltersFromAds(data.ads, searchParams)); - const [page, setPage] = useState(0); - const [itemsPerPage, setItemsPerPage] = useState(10); + const [page, setPage] = useState(+searchParams.get('page') || 0); + const [itemsPerPage, setItemsPerPage] = useState(+searchParams.get('perpage') || 10); + + useEffect(() => { + setPage(0) + }, [filters, itemsPerPage]); useEffect(() => { setAds(getAdsListFromFilters(data.ads, filters)); @@ -97,9 +101,10 @@ export default function Previews({ data }) { const collectFilters = {} filter && (collectFilters.filter = filter) gsdevtools && (collectFilters.gsdevtools = gsdevtools) + page && (collectFilters.page = page) + itemsPerPage && (collectFilters.perpage = itemsPerPage) setSearchParams(collectFilters) - setPage(0); - }, [filters]); + }, [filters, page, itemsPerPage]); useEffect(() => { if (gsdevtools !== "true") return @@ -164,7 +169,6 @@ export default function Previews({ data }) { const handleChangeRowsPerPage = (event) => { setItemsPerPage(parseInt(event.target.value, 10)); - setPage(0); }; const pageAds = useMemo(() => { From b0065cb4e9755e154cdfef8057dc39bc56ba7a6b Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Tue, 14 Nov 2023 18:30:35 +0200 Subject: [PATCH 2/7] fixes page reset --- src/preview/dist/js/index_bundle.js | 2 +- src/preview/src/components/Previews.js | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index b2b6b57..d9f6802 100644 --- a/src/preview/dist/js/index_bundle.js +++ b/src/preview/dist/js/index_bundle.js @@ -3437,7 +3437,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const gsdevtools = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => searchParams.get('gsdevtools'), []);\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('page') || 0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('perpage') || 10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setPage(0);\n }, [filters, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n page && (collectFilters.page = page);\n itemsPerPage && (collectFilters.perpage = itemsPerPage);\n setSearchParams(collectFilters);\n }, [filters, page, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: 'flex',\n gap: '10px'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const gsdevtools = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => searchParams.get('gsdevtools'), []);\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('page') || 0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('perpage') || 10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n page && (collectFilters.page = page);\n itemsPerPage && (collectFilters.perpage = itemsPerPage);\n setSearchParams(collectFilters);\n }, [filters, page, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n setPage(0);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n setPage(0);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: 'flex',\n gap: '10px'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); /***/ }), diff --git a/src/preview/src/components/Previews.js b/src/preview/src/components/Previews.js index 78aa79d..5bb60dd 100644 --- a/src/preview/src/components/Previews.js +++ b/src/preview/src/components/Previews.js @@ -91,10 +91,6 @@ export default function Previews({ data }) { const [page, setPage] = useState(+searchParams.get('page') || 0); const [itemsPerPage, setItemsPerPage] = useState(+searchParams.get('perpage') || 10); - useEffect(() => { - setPage(0) - }, [filters, itemsPerPage]); - useEffect(() => { setAds(getAdsListFromFilters(data.ads, filters)); const filter = decodeURI(composeSearchParamsFromFilters(filters)) @@ -134,6 +130,7 @@ export default function Previews({ data }) { }); setFilters(updatedFilters); + setPage(0); }; function handleFilterDelete(e, value) { @@ -147,6 +144,7 @@ export default function Previews({ data }) { }); setFilters(updatedFilters); + setPage(0); } // handle button(s) @@ -169,6 +167,7 @@ export default function Previews({ data }) { const handleChangeRowsPerPage = (event) => { setItemsPerPage(parseInt(event.target.value, 10)); + setPage(0) }; const pageAds = useMemo(() => { From 824e3ea1cf74ec264f276f494ded3f5b114138a5 Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Tue, 14 Nov 2023 18:34:03 +0200 Subject: [PATCH 3/7] fixes console page out of range error --- src/preview/src/components/Previews.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/preview/src/components/Previews.js b/src/preview/src/components/Previews.js index 5bb60dd..d0df9a9 100644 --- a/src/preview/src/components/Previews.js +++ b/src/preview/src/components/Previews.js @@ -223,7 +223,7 @@ export default function Previews({ data }) { ])} - + From f036651fc226a0e04191d8739a566aa31e656d67 Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Tue, 14 Nov 2023 14:12:54 +0200 Subject: [PATCH 4/7] adds page and perpage url params for init pagination --- src/preview/dist/js/index_bundle.js | 2 +- src/preview/src/components/Previews.js | 14 +++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index 7c482e9..8aa44d8 100644 --- a/src/preview/dist/js/index_bundle.js +++ b/src/preview/dist/js/index_bundle.js @@ -3437,7 +3437,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const gsdevtools = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => searchParams.get('gsdevtools'), []);\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n setSearchParams(collectFilters);\n setPage(0);\n }, [filters]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: 'flex',\n gap: '10px'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: new Date(data.timestamp).toLocaleString()\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const gsdevtools = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => searchParams.get('gsdevtools'), []);\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('page') || 0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('perpage') || 10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setPage(0);\n }, [filters, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n page && (collectFilters.page = page);\n itemsPerPage && (collectFilters.perpage = itemsPerPage);\n setSearchParams(collectFilters);\n }, [filters, page, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: 'flex',\n gap: '10px'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); /***/ }), diff --git a/src/preview/src/components/Previews.js b/src/preview/src/components/Previews.js index 7804831..b63deb7 100644 --- a/src/preview/src/components/Previews.js +++ b/src/preview/src/components/Previews.js @@ -88,8 +88,12 @@ export default function Previews({ data }) { const [ads, setAds] = useState([]); const [filters, setFilters] = useState(getFiltersFromAds(data.ads, searchParams)); - const [page, setPage] = useState(0); - const [itemsPerPage, setItemsPerPage] = useState(10); + const [page, setPage] = useState(+searchParams.get('page') || 0); + const [itemsPerPage, setItemsPerPage] = useState(+searchParams.get('perpage') || 10); + + useEffect(() => { + setPage(0) + }, [filters, itemsPerPage]); useEffect(() => { setAds(getAdsListFromFilters(data.ads, filters)); @@ -97,9 +101,10 @@ export default function Previews({ data }) { const collectFilters = {} filter && (collectFilters.filter = filter) gsdevtools && (collectFilters.gsdevtools = gsdevtools) + page && (collectFilters.page = page) + itemsPerPage && (collectFilters.perpage = itemsPerPage) setSearchParams(collectFilters) - setPage(0); - }, [filters]); + }, [filters, page, itemsPerPage]); useEffect(() => { if (gsdevtools !== "true") return @@ -164,7 +169,6 @@ export default function Previews({ data }) { const handleChangeRowsPerPage = (event) => { setItemsPerPage(parseInt(event.target.value, 10)); - setPage(0); }; const pageAds = useMemo(() => { From 78ec17f32a37730548ac2f04f3743a6e993f33ed Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Tue, 14 Nov 2023 18:30:35 +0200 Subject: [PATCH 5/7] fixes page reset --- src/preview/dist/js/index_bundle.js | 2 +- src/preview/src/components/Previews.js | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index 8aa44d8..76e20cc 100644 --- a/src/preview/dist/js/index_bundle.js +++ b/src/preview/dist/js/index_bundle.js @@ -3437,7 +3437,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const gsdevtools = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => searchParams.get('gsdevtools'), []);\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('page') || 0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('perpage') || 10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setPage(0);\n }, [filters, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n page && (collectFilters.page = page);\n itemsPerPage && (collectFilters.perpage = itemsPerPage);\n setSearchParams(collectFilters);\n }, [filters, page, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: 'flex',\n gap: '10px'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const gsdevtools = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => searchParams.get('gsdevtools'), []);\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('page') || 0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('perpage') || 10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n page && (collectFilters.page = page);\n itemsPerPage && (collectFilters.perpage = itemsPerPage);\n setSearchParams(collectFilters);\n }, [filters, page, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n setPage(0);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n setPage(0);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: 'flex',\n gap: '10px'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); /***/ }), diff --git a/src/preview/src/components/Previews.js b/src/preview/src/components/Previews.js index b63deb7..961d466 100644 --- a/src/preview/src/components/Previews.js +++ b/src/preview/src/components/Previews.js @@ -91,10 +91,6 @@ export default function Previews({ data }) { const [page, setPage] = useState(+searchParams.get('page') || 0); const [itemsPerPage, setItemsPerPage] = useState(+searchParams.get('perpage') || 10); - useEffect(() => { - setPage(0) - }, [filters, itemsPerPage]); - useEffect(() => { setAds(getAdsListFromFilters(data.ads, filters)); const filter = decodeURI(composeSearchParamsFromFilters(filters)) @@ -134,6 +130,7 @@ export default function Previews({ data }) { }); setFilters(updatedFilters); + setPage(0); }; function handleFilterDelete(e, value) { @@ -147,6 +144,7 @@ export default function Previews({ data }) { }); setFilters(updatedFilters); + setPage(0); } // handle button(s) @@ -169,6 +167,7 @@ export default function Previews({ data }) { const handleChangeRowsPerPage = (event) => { setItemsPerPage(parseInt(event.target.value, 10)); + setPage(0) }; const pageAds = useMemo(() => { From 5a27b8e08a815eca00745461582f1eccb55b9838 Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Tue, 14 Nov 2023 18:34:03 +0200 Subject: [PATCH 6/7] fixes console page out of range error --- src/preview/src/components/Previews.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/preview/src/components/Previews.js b/src/preview/src/components/Previews.js index 961d466..6cbe5e5 100644 --- a/src/preview/src/components/Previews.js +++ b/src/preview/src/components/Previews.js @@ -225,7 +225,7 @@ export default function Previews({ data }) { ])} - + From 38ea3559a52d08a57b0f0e8cda3af7b6afc0c62a Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Thu, 14 Dec 2023 15:14:30 +0200 Subject: [PATCH 7/7] rebase & rebuild --- src/preview/dist/js/index_bundle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index 76e20cc..d528140 100644 --- a/src/preview/dist/js/index_bundle.js +++ b/src/preview/dist/js/index_bundle.js @@ -3437,7 +3437,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const gsdevtools = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => searchParams.get('gsdevtools'), []);\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('page') || 0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('perpage') || 10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n page && (collectFilters.page = page);\n itemsPerPage && (collectFilters.perpage = itemsPerPage);\n setSearchParams(collectFilters);\n }, [filters, page, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n setPage(0);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n setPage(0);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: 'flex',\n gap: '10px'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const gsdevtools = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => searchParams.get('gsdevtools'), []);\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('page') || 0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('perpage') || 10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n page && (collectFilters.page = page);\n itemsPerPage && (collectFilters.perpage = itemsPerPage);\n setSearchParams(collectFilters);\n }, [filters, page, itemsPerPage]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n setPage(0);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n setPage(0);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: 'flex',\n gap: '10px'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: new Date(data.timestamp).toLocaleString()\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: ads.length ? page : 0,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); /***/ }),