Skip to content

Commit

Permalink
Optimization
Browse files Browse the repository at this point in the history
  • Loading branch information
@razvanMiu
razvanMiu committed Sep 2, 2020
1 parent b7aff61 commit d47361c
Show file tree
Hide file tree
Showing 13 changed files with 840 additions and 105 deletions.
9 changes: 5 additions & 4 deletions src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,9 +151,8 @@ const OpenlayersMapView = (props) => {
ToggleSidebarControl.current = /*@__PURE__*/ (function (Control) {
function ToggleSidebarControl(opt_options) {
const options = opt_options || {};
const buttonContainer = document.getElementById(
'dynamic-filter-toggle',
);
const buttonContainer = document.createElement('div');
buttonContainer.setAttribute('id', 'map-sidebar-button');
Control.call(this, {
element: buttonContainer,
target: options.target,
Expand Down Expand Up @@ -577,8 +576,10 @@ const OpenlayersMapView = (props) => {
}
// Make dynamic filters overlay
if (hasSidebar) {
const sideBar = document.createElement('div');
sideBar.setAttribute('id', 'map-sidebar');
dynamicFilters = makeOverlay(
document.getElementById(`dynamic-filter`),
sideBar,
'ol-dynamic-filter',
'center-center',
true,
Expand Down
4 changes: 4 additions & 0 deletions src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
height: 90%;
}

#map-sidebar {
height: 100%;
}

#map-loader.ui.active {
position: absolute !important;
pointer-events: auto !important;
Expand Down
224 changes: 128 additions & 96 deletions src/components/manage/Blocks/FiltersBlock/View.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
Radio,
List,
} from 'semantic-ui-react';
import { Portal } from 'react-portal';
import { Icon } from '@plone/volto/components';
import { setQueryParam } from 'volto-datablocks/actions';
import { settings } from '~/config';
Expand Down Expand Up @@ -54,6 +55,7 @@ const View = ({ content, ...props }) => {
firstLoad: false,
searchResultsActive: false,
});
const [loadingData, setLoadingData] = useState(false);
const [factsData, setFactsData] = useState({});
const [alphaFeature, setAlphaFeature] = useState({});
const [sitesResults, setSitesResults] = useState([]);
Expand All @@ -65,6 +67,12 @@ const View = ({ content, ...props }) => {
const modalButtonTitle = props.data.modalButtonTitle?.value;
const searchButtonTitle = props.data.searchButtonTitle?.value;
const locationResultsTexts = locationResults.map((result) => result.text);
const mapSidebarExists = document?.getElementById('map-sidebar');

useEffect(() => {
console.log(mapSidebarExists);
/* eslint-disable-next-line */
}, [mapSidebarExists])
const searchResults = [
...sitesResults.slice(
0,
Expand Down Expand Up @@ -150,17 +158,16 @@ const View = ({ content, ...props }) => {
useEffect(function () {
setState({ ...state, mounted: true });
updateFactsData(true);
document
.getElementById(`dynamic-filter`)
.addEventListener('featurechange', (e) => {
if (
JSON.stringify(e.detail.features?.[0]?.getProperties?.()?.country) !==
JSON.stringify(alphaFeature?.getProperties?.()?.country)
) {
setAlphaFeature(e.detail.features?.[0]);
}
});

// document
// .getElementById(`dynamic-filter`)
// .addEventListener('featurechange', (e) => {
// if (
// JSON.stringify(e.detail.features?.[0]?.getProperties?.()?.country) !==
// JSON.stringify(alphaFeature?.getProperties?.()?.country)
// ) {
// setAlphaFeature(e.detail.features?.[0]);
// }
// });
return () => {
setState({ ...state, mounted: false });
};
Expand Down Expand Up @@ -190,7 +197,7 @@ const View = ({ content, ...props }) => {
}, [state]);

useEffect(() => {
if (state.mounted) {
if (state.mounted && __CLIENT__) {
let promises = [];
let metadata = [];
const siteCountryFilters =
Expand Down Expand Up @@ -426,20 +433,23 @@ const View = ({ content, ...props }) => {
},
],
};
onMountRequests.sqls.forEach((sql, index) => {
if (sql && onMountRequests.meta[index]) {
if (!state.firstLoad) {
if (!loadingData) {
onMountRequests.sqls.forEach((sql, index) => {
if (sql && onMountRequests.meta[index]) {
if (!state.firstLoad) {
promises.push(axios.get(makeUrl(providerUrl, sql)));
metadata.push(onMountRequests.meta[index]);
}
}
});
dynamicRequests.sqls.forEach((sql, index) => {
if (sql && dynamicRequests.meta[index]) {
promises.push(axios.get(makeUrl(providerUrl, sql)));
metadata.push(onMountRequests.meta[index]);
metadata.push(dynamicRequests.meta[index]);
}
}
});
dynamicRequests.sqls.forEach((sql, index) => {
if (sql && dynamicRequests.meta[index]) {
promises.push(axios.get(makeUrl(providerUrl, sql)));
metadata.push(dynamicRequests.meta[index]);
}
});
});
setLoadingData(true);
}
Promise.all(promises)
.then((response) => {
if (state.mounted) {
Expand Down Expand Up @@ -480,14 +490,21 @@ const View = ({ content, ...props }) => {
],
};
});
setLoadingData(false);
setState({
...state,
filtersMeta,
...(state.firstLoad === false ? { firstLoad: true } : {}),
});
}
})
.catch((error) => {});
.catch((error) => {
setLoadingData(false);
setState({
...state,
...(state.firstLoad === false ? { firstLoad: true } : {}),
});
});
}
/* eslint-disable-next-line */
}, [
Expand Down Expand Up @@ -945,81 +962,96 @@ const View = ({ content, ...props }) => {
{searchButtonTitle ? searchButtonTitle : 'Search'}
</button>
</div>
<div id="dynamic-filter-toggle" className="ol-unselectable ol-control">
<button
className="toggle-button"
onClick={() => {
setSidebar(!sidebar);
}}
>
<Icon name={menuSVG} size="1em" fill="white" />
</button>
</div>
<div
id="dynamic-filter"
className={sidebar ? 'show filters-block' : 'filters-block'}
>
<div className="dynamic-filter-header">
<Header as="h2">Dynamic filter</Header>
</div>
<div className="dynamic-filter-body">
<Header as="h3">Reporting year</Header>
<div className="input-container">
<Select
search
onChange={(event, data) => {
changeFilter(
data,
state.filtersMeta['reporting_years'],
0,
true,
);
}}
placeholder={state.filtersMeta['reporting_years']?.placeholder}
options={state.filtersMeta['reporting_years']?.options}
value={state.filters['reportingYear']?.[0]}
/>
</div>
<Header as="h3">Industry</Header>
<div className="input-container">
<Select
search
onChange={(event, data) => {
changeFilter(data, state.filtersMeta['industries'], 0, true);
}}
placeholder={state.filtersMeta['industries']?.placeholder}
options={state.filtersMeta['industries']?.options}
value={state.filters['EEASector']?.[0]}
/>
</div>
</div>
<div className="dynamic-filter-actions">
<Portal node={document.getElementById('map-sidebar-button')}>
<div id="dynamic-filter-toggle" className="ol-unselectable ol-control">
<button
className="solid red"
onClick={clearFilters}
style={{ margin: 0 }}
className="toggle-button"
onClick={() => {
setSidebar(!sidebar);
}}
>
CLEAR FILTERS
<Icon name={menuSVG} size="1em" fill="white" />
</button>
<Header as="h3">Quick facts</Header>
{state.factsDataOrder &&
state.factsDataOrder.map((key) => {
return factsData[key] ? (
<React.Fragment key={key}>
{factsData[key]?.title && (
<Header as="h4">{factsData[key].title}</Header>
)}
{factsData[key]?.description &&
factsData[key].description.map((description, index) => {
return <p key={`${key}_${index}`}>{description}</p>;
})}
</React.Fragment>
) : (
''
);
})}
</div>
</div>
</Portal>
{mapSidebarExists ? (
<Portal node={document.getElementById('map-sidebar')}>
<div
id="dynamic-filter"
className={sidebar ? 'show filters-block' : 'filters-block'}
>
<div className="dynamic-filter-header">
<Header as="h2">Dynamic filter</Header>
</div>
<div className="dynamic-filter-body">
<Header as="h3">Reporting year</Header>
<div className="input-container">
<Select
search
onChange={(event, data) => {
changeFilter(
data,
state.filtersMeta['reporting_years'],
0,
true,
);
}}
placeholder={
state.filtersMeta['reporting_years']?.placeholder
}
options={state.filtersMeta['reporting_years']?.options}
value={state.filters['reportingYear']?.[0]}
/>
</div>
<Header as="h3">Industry</Header>
<div className="input-container">
<Select
search
onChange={(event, data) => {
changeFilter(
data,
state.filtersMeta['industries'],
0,
true,
);
}}
placeholder={state.filtersMeta['industries']?.placeholder}
options={state.filtersMeta['industries']?.options}
value={state.filters['EEASector']?.[0]}
/>
</div>
</div>
<div className="dynamic-filter-actions">
<button
className="solid red"
onClick={clearFilters}
style={{ margin: 0 }}
>
CLEAR FILTERS
</button>
<Header as="h3">Quick facts</Header>
{state.factsDataOrder &&
state.factsDataOrder.map((key) => {
return factsData[key] ? (
<React.Fragment key={key}>
{factsData[key]?.title && (
<Header as="h4">{factsData[key].title}</Header>
)}
{factsData[key]?.description &&
factsData[key].description.map((description, index) => {
return <p key={`${key}_${index}`}>{description}</p>;
})}
</React.Fragment>
) : (
''
);
})}
</div>
</div>
</Portal>
) : (
''
)}
</div>
);
};
Expand Down
Loading

0 comments on commit d47361c

Please sign in to comment.