Skip to content

Commit

Permalink
Merge pull request #116 from townhallproject/feature/food-resources
Browse files Browse the repository at this point in the history
Feature/food resources
  • Loading branch information
meganrm authored Nov 21, 2020
2 parents 6494338 + 39639e8 commit 99bebcd
Show file tree
Hide file tree
Showing 8 changed files with 288 additions and 26 deletions.
197 changes: 197 additions & 0 deletions src/components/FoodResourcesTable/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
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, siteLanguage }) => {
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,
}) => (
<div style={{ padding: 8 }}>
<Input
placeholder={`Search ${description}`}
value={selectedKeys[0]}
onChange={(e) =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() => handleSearch(confirm, dataIndex)}
style={{ width: 188, marginBottom: 8, display: "block" }}
/>
<Button
type="primary"
onClick={() => handleSearch(confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90, marginRight: 8 }}
>
Search
</Button>
<Button onClick={clearFilters} size="small" style={{ width: 90 }}>
Reset
</Button>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
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: 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: "Hours",
width: "10vw",
dataIndex: "hours",
key: "hours",
...getColumnSearchProps("hours", "hours"),
render: (text) => text,
},
{
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" },
],
onFilter: (value, record) => record.resources[value],
render: (text, record) => (
<ul key="resources" className="resources">
{record.resources.foodBank && <li>Food Bank</li>}
{record.resources.fridge && <li>Fridge</li>}
{record.resources.freezer && <li>Freezer</li>}
{record.resources.pantry && <li>Pantry</li>}
</ul>
),
},
{
title: "Contact",
width: "7vw",
dataIndex: "contact",
key: "contact",
render: (text, record) => (
<ul key="contact" className="resources">
{record.contact && (
<li>
<a href={`mailto:${record.contact}`} target="blank">
Email
</a>
</li>
)}
{record.website && (
<li>
<a href={record.website} target="blank">
Website
</a>
</li>
)}
{record.facebook && (
<li>
<a
href={`https://www.facebook.com/${record.facebook}`}
target="blank"
>
Facebook
</a>
</li>
)}
{record.instagram && (
<li>
<a
href={`https://www.instagram.com/${record.instagram.slice(1)}`}
target="blank"
>
Instagram
</a>
</li>
)}
{record.twitter && (
<li>
<a
href={`https://www.twitter.com/${record.twitter.slice(1)}`}
target="blank"
>
Twitter
</a>
</li>
)}
</ul>
),
},
];

return (
<>
<Table
rowKey={(resource) => resource.id}
columns={tableColumns}
dataSource={resources}
pagination={{ pageSize: 10, hideOnSinglePage: true }}
scroll={{ x: 1080 }}
size="small"
locale={{ filterConfirm: "Filter" }}
/>
</>
);
};

export default FoodResourcesTable
22 changes: 22 additions & 0 deletions src/components/FoodResourcesTable/language.js
Original file line number Diff line number Diff line change
@@ -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'
}
}
9 changes: 6 additions & 3 deletions src/components/NavMenu/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,17 @@ const NavMenu = (props) => {
<Menu.Item key="/">
<NavLink to='/' exact>{translations.map[siteLanguage]}</NavLink>
</Menu.Item>
<Menu.Item key="/table-view">
<NavLink to='/table-view' exact>{translations.tableView[siteLanguage]}</NavLink>
<Menu.Item key="/table-of-networks">
<NavLink to='/table-of-networks' exact>{translations.networkTable[siteLanguage]}</NavLink>
</Menu.Item>
<Menu.Item key="/table-of-food-resources">
<NavLink to='/table-of-food-resources' exact>{translations.foodTable[siteLanguage]}</NavLink>
</Menu.Item>
<Menu.Item key="/resources">
<NavLink to='/resources' exact>{translations.resources[siteLanguage]}</NavLink>
</Menu.Item>
<Menu.Item key="/press">
<NavLink to='/press' exact>Press</NavLink>
<NavLink to='/press' exact>{translations.press[siteLanguage]}</NavLink>
</Menu.Item>
<Menu.Item key="/about">
<NavLink to='/about' exact>{translations.about[siteLanguage]}</NavLink>
Expand Down
14 changes: 11 additions & 3 deletions src/components/NavMenu/language.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -15,4 +19,8 @@ export const translations = {
english: 'About',
spanish: 'Sobre'
},
press: {
english: 'Press',
spanish: 'Prensa'
}
}
18 changes: 9 additions & 9 deletions src/components/NetworksTable/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const NetworksTable = (props) => {
const tableColumns = [
{
title: translations.organization[siteLanguage],
width: '15vw',
width: '10vw',
fixed: 'left',
dataIndex: 'title',
key: 'title',
Expand All @@ -74,8 +74,8 @@ const NetworksTable = (props) => {
render: text => text,
},
{
title: 'City',
width: '15vw',
title: translations.city[siteLanguage],
width: '7vw',
dataIndex: 'city',
key: 'city',
sorter: (a,b) => a.city.localeCompare(b.city),
Expand All @@ -84,7 +84,7 @@ const NetworksTable = (props) => {
},
{
title: translations.state[siteLanguage],
width: '10vw',
width: '5vw',
dataIndex: 'state',
key: 'state',
sorter: (a,b) => a.state.localeCompare(b.state),
Expand All @@ -94,16 +94,16 @@ const NetworksTable = (props) => {
},
{
title: 'Communities',
width: '20vw',
width: '10vw',
dataIndex: 'community',
key: 'community',
sorter: (a,b) => a.community.localeCompare(b.community),
...getColumnSearchProps('community', 'communities'),
render: text => text,
},
{
title: 'Languages',
width: '20vw',
title: translations.languages[siteLanguage],
width: '10vw',
dataIndex: 'language',
key: 'language',
sorter: (a,b) => {
Expand All @@ -121,7 +121,7 @@ const NetworksTable = (props) => {
},
{
title: translations.getInvolved[siteLanguage],
width: '20vw',
width: '10vw',
dataIndex: 'forms',
filters: [
{ text: 'General', value: 'generalForm'},
Expand All @@ -148,7 +148,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'}}
Expand Down
Loading

0 comments on commit 99bebcd

Please sign in to comment.