From 548c24cf465a4c003bdd3104b1fe6ecc99b9fbad Mon Sep 17 00:00:00 2001 From: Krista Loven Date: Sun, 25 Oct 2020 19:35:50 -0700 Subject: [PATCH 1/3] update url path + redirect for old --- src/components/NavMenu/index.jsx | 4 ++-- src/containers/DefaultLayout.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/NavMenu/index.jsx b/src/components/NavMenu/index.jsx index 5694b24..06b626b 100644 --- a/src/components/NavMenu/index.jsx +++ b/src/components/NavMenu/index.jsx @@ -20,8 +20,8 @@ const NavMenu = (props) => { Map - - Table View + + Table of Networks Guides and Resources diff --git a/src/containers/DefaultLayout.js b/src/containers/DefaultLayout.js index ac640ab..9420864 100644 --- a/src/containers/DefaultLayout.js +++ b/src/containers/DefaultLayout.js @@ -5,6 +5,7 @@ import { import { BrowserRouter as Router, Switch, + Redirect, Route, } from "react-router-dom"; import { Layout } from 'antd'; @@ -130,9 +131,12 @@ class DefaultLayout extends React.Component {
- + + + + From 75a17d2526d4bccea2ff677d96b286033bd860f7 Mon Sep 17 00:00:00 2001 From: Krista Loven Date: Mon, 26 Oct 2020 22:35:31 -0700 Subject: [PATCH 2/3] create food resources table --- src/components/FoodResourcesTable/index.jsx | 148 ++++++++++++++++++++ src/components/NetworksTable/index.jsx | 14 +- src/containers/DefaultLayout.js | 31 ++-- src/containers/style.scss | 7 + 4 files changed, 183 insertions(+), 17 deletions(-) create mode 100644 src/components/FoodResourcesTable/index.jsx diff --git a/src/components/FoodResourcesTable/index.jsx b/src/components/FoodResourcesTable/index.jsx new file mode 100644 index 0000000..fcd4e08 --- /dev/null +++ b/src/components/FoodResourcesTable/index.jsx @@ -0,0 +1,148 @@ +import React, { useState } from 'react' +import { Button, Input, Table } from 'antd' +import { SearchOutlined } from '@ant-design/icons'; + +// import './style.scss'; + +const FoodResourcesTable = ({resources}) => { + const [searchCol, setSearchCol] = useState('') + + const getSearchColValues = (searchColValues) => { + let searchValue = searchColValues + if (Array.isArray(searchColValues)) { + searchValue = searchColValues.join(', ') + } + if (typeof searchValue === 'string') { + return searchValue.toLowerCase() + } + return '' + } + + const handleSearch = (confirm, dataIndex) => { + confirm(); + setSearchCol(dataIndex) + } + + + const getColumnSearchProps = (dataIndex, description) => ({ + filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => ( +
+ setSelectedKeys(e.target.value ? [e.target.value] : [])} + onPressEnter={() => handleSearch(confirm, dataIndex)} + style={{ width: 188, marginBottom: 8, display: 'block' }} + /> + + +
+ ), + filterIcon: filtered => , + onFilter: (value, record) => { + const searchColValues = getSearchColValues(record[dataIndex]) + return searchColValues.includes(value.toLowerCase()) + }, + render: text => searchCol === dataIndex && text + }) + + const tableColumns = [ + { + title: 'Title', + width: '10vw', + fixed: 'left', + dataIndex: 'title', + key: 'title', + sorter: (a,b) => a.title.localeCompare(b.title), + ...getColumnSearchProps('title', 'titles'), + render: text => text, + }, + { + title: 'Organization', + width: '10vw', + dataIndex: 'organization', + key: 'organization', + sorter: (a,b) => (a.organization || '').localeCompare(b.organization || ''), + ...getColumnSearchProps('organization', 'organizations'), + render: text => text, + }, + { + title: 'Address', + width: '15vw', + dataIndex: 'address', + key: 'address', + ...getColumnSearchProps('address', 'addresses'), + render: text => text, + }, + { + title: 'Hours', + width: '10vw', + dataIndex: 'hours', + key: 'hours', + ...getColumnSearchProps('hours', 'hours'), + render: text => text, + }, + { + title: 'Resources', + width: '7vw', + dataIndex: 'resources', + key: 'resources', + filters: [ + { text: 'Food bank', value: 'foodBank' }, + { text: 'Freezer', value: 'freezer' }, + { text: 'Fridge', value: 'fridge' }, + { text: 'Pantry', value: 'pantry' }, + ], + onFilter: (value, record) => record.resources[value], + render: (text, record) => ( +
    + {record.resources.foodBank &&
  • Food Bank
    • } + {record.resources.fridge &&
  • Fridge
    • } + {record.resources.freezer &&
  • Freezer
    • } + {record.resources.pantry &&
  • Pantry
    • } +
+ ), + }, + { + title: 'Contact', + width: '7vw', + dataIndex: 'contact', + key: 'contact', + render: (text, record) => ( + + ) + } + ] + + return ( + <> + resource.id} + columns={tableColumns} + dataSource={resources} + pagination={{pageSize: 10, hideOnSinglePage: true}} + scroll={{x: 1080}} + size='small' + locale={{filterConfirm: 'Filter'}} + /> + + ) +} + +export default FoodResourcesTable diff --git a/src/components/NetworksTable/index.jsx b/src/components/NetworksTable/index.jsx index 433e32e..2336a5d 100644 --- a/src/components/NetworksTable/index.jsx +++ b/src/components/NetworksTable/index.jsx @@ -63,7 +63,7 @@ const NetworksTable = (props) => { const tableColumns = [ { title: 'Organization', - width: '15vw', + width: '10vw', fixed: 'left', dataIndex: 'title', key: 'title', @@ -73,7 +73,7 @@ const NetworksTable = (props) => { }, { title: 'City', - width: '15vw', + width: '7vw', dataIndex: 'city', key: 'city', sorter: (a,b) => a.city.localeCompare(b.city), @@ -82,7 +82,7 @@ const NetworksTable = (props) => { }, { title: 'State', - width: '10vw', + width: '5vw', dataIndex: 'state', key: 'state', sorter: (a,b) => a.state.localeCompare(b.state), @@ -92,7 +92,7 @@ const NetworksTable = (props) => { }, { title: 'Communities', - width: '20vw', + width: '10vw', dataIndex: 'community', key: 'community', sorter: (a,b) => a.community.localeCompare(b.community), @@ -101,7 +101,7 @@ const NetworksTable = (props) => { }, { title: 'Languages', - width: '20vw', + width: '10vw', dataIndex: 'language', key: 'language', sorter: (a,b) => { @@ -119,7 +119,7 @@ const NetworksTable = (props) => { }, { title: 'Get Involved', - width: '20vw', + width: '10vw', dataIndex: 'forms', filters: [ { text: 'General', value: 'generalForm'}, @@ -146,7 +146,7 @@ const NetworksTable = (props) => { rowKey={network => network.id} columns={tableColumns} dataSource={networks} - pagination={{pageSize: 20, hideOnSinglePage: true}} + pagination={{pageSize: 10, hideOnSinglePage: true}} scroll={{x: 1080}} size='small' locale={{filterConfirm: 'Filter'}} diff --git a/src/containers/DefaultLayout.js b/src/containers/DefaultLayout.js index 9420864..f19a338 100644 --- a/src/containers/DefaultLayout.js +++ b/src/containers/DefaultLayout.js @@ -31,6 +31,7 @@ import Banner from '../components/Banner'; import './style.scss'; import NoWebGl from '../components/NoWebGl'; import NetworksTable from '../components/NetworksTable'; +import FoodResourcesTable from '../components/FoodResourcesTable'; const { Header, Content, Sider } = Layout; const mapboxgl = window.mapboxgl; @@ -104,20 +105,23 @@ class DefaultLayout extends React.Component { render() { const { - setFilters, - selectedCategories, - filteredNetworks, - viewState, - setLatLng, - setUsState, - visibleCards, + allFoodResources, allNetworks, - setHoveredPoint, + filteredNetworks, hoveredPointId, + foodResourceGeoJson, masterBbox, resetToDefaultView, - foodResourceGeoJson + selectedCategories, + setHoveredPoint, + setFilters, + setLatLng, + setUsState, + viewState, + visibleCards, } = this.props; + + const { isMobile } = this.state if (!allNetworks.length) { return null; @@ -132,7 +136,14 @@ class DefaultLayout extends React.Component {
- +

Mutual Aid Networks

+
+ +
+

Food Resources

+
+ +
diff --git a/src/containers/style.scss b/src/containers/style.scss index 4dbc70d..f7dc40e 100644 --- a/src/containers/style.scss +++ b/src/containers/style.scss @@ -104,6 +104,13 @@ } } } + .table-container { + padding: 10px 30px; + width: 90vw; + min-width: 300px; + max-width: 1200px; + margin: auto; + } .tagline { text-align: center; padding: 10px; From 39639e8aac592b35e4441e66ca59645b943222e2 Mon Sep 17 00:00:00 2001 From: meganrm Date: Fri, 20 Nov 2020 16:00:56 -0800 Subject: [PATCH 3/3] adding translations to table and nav bar --- src/components/FoodResourcesTable/index.jsx | 197 +++++++++++------- src/components/FoodResourcesTable/language.js | 22 ++ src/components/NavMenu/index.jsx | 7 +- src/components/NavMenu/language.js | 14 +- src/components/NetworksTable/index.jsx | 4 +- src/containers/DefaultLayout.js | 8 +- src/containers/language.js | 8 + 7 files changed, 175 insertions(+), 85 deletions(-) create mode 100644 src/components/FoodResourcesTable/language.js diff --git a/src/components/FoodResourcesTable/index.jsx b/src/components/FoodResourcesTable/index.jsx index fcd4e08..3d61d19 100644 --- a/src/components/FoodResourcesTable/index.jsx +++ b/src/components/FoodResourcesTable/index.jsx @@ -1,38 +1,45 @@ import React, { useState } from 'react' import { Button, Input, Table } from 'antd' import { SearchOutlined } from '@ant-design/icons'; +import { translations } from "./language"; // import './style.scss'; -const FoodResourcesTable = ({resources}) => { - const [searchCol, setSearchCol] = useState('') +const FoodResourcesTable = ({ resources, siteLanguage }) => { + const [searchCol, setSearchCol] = useState(""); const getSearchColValues = (searchColValues) => { - let searchValue = searchColValues + let searchValue = searchColValues; if (Array.isArray(searchColValues)) { - searchValue = searchColValues.join(', ') + searchValue = searchColValues.join(", "); } - if (typeof searchValue === 'string') { - return searchValue.toLowerCase() + if (typeof searchValue === "string") { + return searchValue.toLowerCase(); } - return '' - } + return ""; + }; const handleSearch = (confirm, dataIndex) => { confirm(); - setSearchCol(dataIndex) - } - + setSearchCol(dataIndex); + }; const getColumnSearchProps = (dataIndex, description) => ({ - filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => ( + filterDropdown: ({ + setSelectedKeys, + selectedKeys, + confirm, + clearFilters, + }) => (
setSelectedKeys(e.target.value ? [e.target.value] : [])} + onChange={(e) => + setSelectedKeys(e.target.value ? [e.target.value] : []) + } onPressEnter={() => handleSearch(confirm, dataIndex)} - style={{ width: 188, marginBottom: 8, display: 'block' }} + style={{ width: 188, marginBottom: 8, display: "block" }} />
), - filterIcon: filtered => , + filterIcon: (filtered) => ( + + ), onFilter: (value, record) => { - const searchColValues = getSearchColValues(record[dataIndex]) - return searchColValues.includes(value.toLowerCase()) + const searchColValues = getSearchColValues(record[dataIndex]); + return searchColValues.includes(value.toLowerCase()); }, - render: text => searchCol === dataIndex && text - }) + render: (text) => searchCol === dataIndex && text, + }); const tableColumns = [ { - title: 'Title', - width: '10vw', - fixed: 'left', - dataIndex: 'title', - key: 'title', - sorter: (a,b) => a.title.localeCompare(b.title), - ...getColumnSearchProps('title', 'titles'), - render: text => text, + title: "Title", + width: "10vw", + fixed: "left", + dataIndex: "title", + key: "title", + sorter: (a, b) => a.title.localeCompare(b.title), + ...getColumnSearchProps("title", "titles"), + render: (text) => text, }, { - title: 'Organization', - width: '10vw', - dataIndex: 'organization', - key: 'organization', - sorter: (a,b) => (a.organization || '').localeCompare(b.organization || ''), - ...getColumnSearchProps('organization', 'organizations'), - render: text => text, + title: translations.organization[siteLanguage], + width: "10vw", + dataIndex: "organization", + key: "organization", + sorter: (a, b) => + (a.organization || "").localeCompare(b.organization || ""), + ...getColumnSearchProps("organization", "organizations"), + render: (text) => text, }, { - title: 'Address', - width: '15vw', - dataIndex: 'address', - key: 'address', - ...getColumnSearchProps('address', 'addresses'), - render: text => text, + title: "Address", + width: "15vw", + dataIndex: "address", + key: "address", + ...getColumnSearchProps("address", "addresses"), + render: (text) => text, }, { - title: 'Hours', - width: '10vw', - dataIndex: 'hours', - key: 'hours', - ...getColumnSearchProps('hours', 'hours'), - render: text => text, + title: "Hours", + width: "10vw", + dataIndex: "hours", + key: "hours", + ...getColumnSearchProps("hours", "hours"), + render: (text) => text, }, { - title: 'Resources', - width: '7vw', - dataIndex: 'resources', - key: 'resources', + title: translations.resources[siteLanguage], + width: "7vw", + dataIndex: "resources", + key: "resources", filters: [ - { text: 'Food bank', value: 'foodBank' }, - { text: 'Freezer', value: 'freezer' }, - { text: 'Fridge', value: 'fridge' }, - { text: 'Pantry', value: 'pantry' }, + { text: "Food bank", value: "foodBank" }, + { text: "Freezer", value: "freezer" }, + { text: "Fridge", value: "fridge" }, + { text: "Pantry", value: "pantry" }, ], onFilter: (value, record) => record.resources[value], render: (text, record) => ( @@ -114,35 +124,74 @@ const FoodResourcesTable = ({resources}) => { ), }, { - title: 'Contact', - width: '7vw', - dataIndex: 'contact', - key: 'contact', + title: "Contact", + width: "7vw", + dataIndex: "contact", + key: "contact", render: (text, record) => ( -
resource.id} + rowKey={(resource) => resource.id} columns={tableColumns} dataSource={resources} - pagination={{pageSize: 10, hideOnSinglePage: true}} - scroll={{x: 1080}} - size='small' - locale={{filterConfirm: 'Filter'}} + pagination={{ pageSize: 10, hideOnSinglePage: true }} + scroll={{ x: 1080 }} + size="small" + locale={{ filterConfirm: "Filter" }} /> - ) -} + ); +}; export default FoodResourcesTable diff --git a/src/components/FoodResourcesTable/language.js b/src/components/FoodResourcesTable/language.js new file mode 100644 index 0000000..613ef3f --- /dev/null +++ b/src/components/FoodResourcesTable/language.js @@ -0,0 +1,22 @@ +export const translations = { + search: { + english: 'Search', + spansih: 'Buscar' + }, + reset: { + english: 'Reset', + spanish: 'Reiniciar' + }, + organization: { + english: 'Organization', + spanish: 'Organización' + }, + languages: { + english: 'Languages', + spanish: 'Idiomas' + }, + resources: { + english: 'Resources', + spanish: 'Recursos' + } +} \ No newline at end of file diff --git a/src/components/NavMenu/index.jsx b/src/components/NavMenu/index.jsx index 2be4015..06c9b15 100644 --- a/src/components/NavMenu/index.jsx +++ b/src/components/NavMenu/index.jsx @@ -51,13 +51,16 @@ const NavMenu = (props) => { {translations.map[siteLanguage]} - Table of Networks + {translations.networkTable[siteLanguage]} + + + {translations.foodTable[siteLanguage]} {translations.resources[siteLanguage]} - Press + {translations.press[siteLanguage]} {translations.about[siteLanguage]} diff --git a/src/components/NavMenu/language.js b/src/components/NavMenu/language.js index d88a1a1..c2185ec 100644 --- a/src/components/NavMenu/language.js +++ b/src/components/NavMenu/language.js @@ -3,9 +3,13 @@ export const translations = { english: 'Map', spanish: 'Mapa' }, - tableView: { - english: 'Table View', - spanish: 'Tabla' + networkTable: { + english: 'Table of Networks', + spanish: 'Tabla de Redes' + }, + foodTable: { + english: 'Table of Food Resources', + spanish: 'Tabla de Recursos Alimenticios' }, resources: { english: 'Guides and Resources', @@ -15,4 +19,8 @@ export const translations = { english: 'About', spanish: 'Sobre' }, + press: { + english: 'Press', + spanish: 'Prensa' + } } \ No newline at end of file diff --git a/src/components/NetworksTable/index.jsx b/src/components/NetworksTable/index.jsx index 6d0d8f3..182a5ea 100644 --- a/src/components/NetworksTable/index.jsx +++ b/src/components/NetworksTable/index.jsx @@ -74,7 +74,7 @@ const NetworksTable = (props) => { render: text => text, }, { - title: 'City', + title: translations.city[siteLanguage], width: '7vw', dataIndex: 'city', key: 'city', @@ -102,7 +102,7 @@ const NetworksTable = (props) => { render: text => text, }, { - title: 'Languages', + title: translations.languages[siteLanguage], width: '10vw', dataIndex: 'language', key: 'language', diff --git a/src/containers/DefaultLayout.js b/src/containers/DefaultLayout.js index c0af199..d95a2c1 100644 --- a/src/containers/DefaultLayout.js +++ b/src/containers/DefaultLayout.js @@ -141,8 +141,6 @@ class DefaultLayout extends React.Component { setUsState, viewState, visibleCards, - foodResourceGeoJson, - filterCounts, siteLanguage, } = this.props; @@ -161,11 +159,13 @@ class DefaultLayout extends React.Component {
-

Mutual Aid Networks

+

{translations.mutualAidNetworks[siteLanguage]}

-

Food Resources

+ + +

{translations.foodResources[siteLanguage]}

diff --git a/src/containers/language.js b/src/containers/language.js index cf12fd3..5ae5374 100644 --- a/src/containers/language.js +++ b/src/containers/language.js @@ -6,5 +6,13 @@ export const translations = { submitButton: { english: "Submit a Mutual Aid Network", spanish: "Enviar una red de ayuda mutua" + }, + mutualAidNetworks: { + english: "Mutual Aid Networks", + spanish: "Redes" + }, + foodResources: { + english: "Food Resources", + spanish: "Recursos Alimenticios " } } \ No newline at end of file