\n\t\t\t\n\t\t\t\t e.stopPropagation()}\n\t\t\t\t\tto={canonicalPath ? canonicalPath : urlPart}\n\t\t\t\t>\n\t\t\t\t\tKiinteistömaailma {marketingName}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t{address}, {postcode}{\" \"}\n\t\t\t\t\t{city}\n\t\t\t\t\n\t\t\t\n\t\t\t{phone && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\t{email && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\n\t\t\t\n\n\t\t\t{!isEmpty(coordinates) && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t)}\n\n\t\t\t\n\n\t\t\t{withFormButton && (\n\t\t\t\t {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tprops.onFormButtonClick(agency);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tOta yhteyttä tai sovi esittely\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t);\n};\n\nexport default withRouter(AgencyListItem);\n","import styled, { css } from \"styled-components\";\nimport { color, textStyles, media, grid } from \"@utils/style-utils\";\n\nexport const AgencyFilter = styled.div`\n\tmargin-left: -15px;\n\tmargin-right: -15px;\n\tmargin-bottom: 30px;\n\n\t${media.md`\n\t\tmargin-bottom: 50px;\n\t`}\n\n\t${media.lg`\n\t\tmargin-bottom: 80px;\n\t`}\n\n\tspan {\n\t\t${textStyles.PMedium}\n\t\tcolor: ${color(\"grey\", 1)};\n\t\tcursor: pointer;\n\t\tdisplay: inline-block;\n\t\tpadding: 2px 5px;\n\t\tmargin: 0 10px 5px;\n\t\ttransition: color 150ms;\n\n\t\t&:hover {\n\t\t\tcolor: ${color(\"greenBright\", 2)};\n\t\t}\n\n\t\t&.active {\n\t\t\tcolor: ${color(\"greenBright\", 1)};\n\t\t}\n\t}\n`;\n\nexport const Agencies = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\n\t${props =>\n\t\tprops.dense &&\n\t\tcss`\n\t\t\t> div {\n\t\t\t\tflex-basis: 100%;\n\n\t\t\t\t${media.md`\n\t\t\t\t\tflex-basis: calc((100% - ${grid.gutterSmall}px) / 2);\n\n\t\t\t\t\t&:nth-of-type(odd) {\n\t\t\t\t\t\tmargin-right: ${grid.gutterSmall}px;\n\t\t\t\t\t}\n\t\t\t\t`}\n\n\t\t\t\t${media.lgx`\n\t\t\t\t\tflex-basis: calc((100% - ${grid.gutterSmall * 2}px) / 3);\n\n\t\t\t\t\t&:nth-of-type(odd) {\n\t\t\t\t\t\tmargin-right: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3n-2),\n\t\t\t\t\t&:nth-of-type(3n-1) {\n\t\t\t\t\t\tmargin-right: ${grid.gutterSmall}px;\n\t\t\t\t\t}\n\t\t\t\t`}\n\n\t\t\t\t${media.xl`\n\t\t\t\t\tflex-basis: calc((100% - ${grid.gutter * 2}px) / 3);\n\n\t\t\t\t\t&:nth-of-type(3n-2),\n\t\t\t\t\t&:nth-of-type(3n-1) {\n\t\t\t\t\t\tmargin-right: ${grid.gutter}px;\n\t\t\t\t\t}\n\t\t\t\t`}\n\t\t\t}\n\t\t`}\n\n\t${props =>\n\t\t!props.dense &&\n\t\tcss`\n\t\t\t> div {\n\t\t\t\tflex-basis: 100%;\n\n\t\t\t\t${media.md`\n\t\t\t\tflex-basis: calc((100% - ${grid.gutterSmall}px) / 2);\n\n\t\t\t\t&:nth-of-type(odd) {\n\t\t\t\t\tmargin-right: ${grid.gutterSmall}px;\n\t\t\t\t}\n\t\t\t`}\n\n\t\t\t\t${media.lg`\n\t\t\t\tflex-basis: calc((100% - ${grid.gutter}px) / 2);\n\n\t\t\t\t&:nth-of-type(odd) {\n\t\t\t\t\tmargin-right: ${grid.gutter}px;\n\t\t\t\t}\n\t\t\t`}\n\t\t\t}\n\t\t`}\n`;\n","import React, { useState, Fragment, useEffect } from \"react\";\nimport isEmpty from \"lodash-es/isEmpty\";\nimport { AgencyFilter, Agencies } from \"./styles\";\nimport AgencyListItem from \"@components/AgencyList/AgencyListItem\";\nimport isEqual from \"react-fast-compare\";\nimport { SmoothScroll } from \"@utils/anchor-scroll\";\nimport { hasWindow } from \"@utils\";\nimport { breakpoints } from \"@utils/style-utils\";\n\ninterface IProps {\n\tagencies: IAgency[];\n\tsortBy?: string;\n\tsortDesc?: boolean;\n\twithFilter?: boolean;\n}\n\nconst getAgencyName = (agency: IAgency): string => {\n\tconst agencyName = agency.marketingName.split(\" \");\n\n\tif (agencyName[0].toLowerCase() === \"vuokravälitys\") {\n\t\treturn agencyName[0];\n\t} else {\n\t\tif (!agencyName[1]) return agency.marketingName;\n\t\treturn agencyName[1].replace(\",\", \"\");\n\t}\n};\n\nconst AgencyList = (props: IProps) => {\n\tconst { agencies, sortBy = null, sortDesc = false, withFilter = false } = props;\n\n\tif (isEmpty(agencies)) {\n\t\treturn null;\n\t}\n\n\tconst sortFn = (a: IAgency, b: IAgency) => {\n\t\tif (sortDesc) {\n\t\t\treturn b[sortBy].localeCompare(a[sortBy]);\n\t\t} else {\n\t\t\treturn a[sortBy].localeCompare(b[sortBy]);\n\t\t}\n\t};\n\n\tconst sortedAgencies = !isEmpty(agencies) && sortBy ? agencies.sort(sortFn) : agencies;\n\tconst hasLotsOfAgencies = agencies.length > 8;\n\tconst [filteredAgencies, setFilteredAgencies] = useState(sortedAgencies);\n\tconst [activeAgencyKey, setActiveAgencyKey] = useState(null);\n\n\tconst scrollToList = () => {\n\t\tconst isMobile = hasWindow && screen.availWidth <= parseInt(breakpoints.lgx);\n\t\tif (isMobile) {\n\t\t\twindow.scrollTo({\n\t\t\t\tbehavior: \"smooth\",\n\t\t\t\tleft: 0,\n\t\t\t\ttop: document.getElementById('agency-list').offsetTop - 75\n\t\t\t});\n\t\t} else {\n\t\t\tconst smoothie = new SmoothScroll();\n\t\t\tsmoothie.scrollTo(\"agency-list\", () => {}, { offset: 25 });\n\t\t}\n\t};\n\n\tconst toggleAgencyFilter = (key: string | number) => {\n\t\tif (activeAgencyKey === key) {\n\t\t\tsetActiveAgencyKey(null);\n\t\t\tsetFilteredAgencies(sortedAgencies);\n\t\t} else {\n\t\t\tconst filtered = sortedAgencies.filter((agency: IAgency) => agency.key === key);\n\t\t\tsetActiveAgencyKey(key);\n\t\t\tsetFilteredAgencies(filtered);\n\t\t\tscrollToList();\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tlet rendering = true;\n\t\tif (!isEqual(agencies, filteredAgencies) && rendering) {\n\t\t\tsetFilteredAgencies(agencies);\n\t\t}\n\n\t\treturn () => {\n\t\t\trendering = false;\n\t\t};\n\t}, [agencies]);\n\n\treturn (\n\t\t