Attributes add to filter by click

frontend/src/actions/processActions.js

@@ -16,8 +16,8 @@ export const updateSearch = query => ({
   query,
 })
 
-export const FILTER_YEAR = "FILTER_YEAR"
-export const filterYear = year => ({
-  type: FILTER_YEAR,
-  year,
+export const ADD_FILTER = "ADD_FILTER"
+export const addFilter = filter => ({
+  type: ADD_FILTER,
+  filter,
 })

frontend/src/components/Artists/Artists.component.js → frontend/src/components/Attributes/Artists/Artists.component.js

@@ -1,12 +1,12 @@
 import React, { Fragment } from "react"
 import Artist from "Components/Artist"
 
-const Artists = ({ artists }) =>
-  artists &&
-  artists.map((artist, index) => (
+const Artists = ({ value }) =>
+  value &&
+  value.map((artist, index) => (
     <Fragment key={artist.artist.id}>
       <Artist artist={artist.artist} />
-      {index < artists.length - 1 && " " + artist.delimiter + " "}
+      {index < value.length - 1 && " " + artist.delimiter + " "}
     </Fragment>
   ))
 export default Artists

frontend/src/components/Attributes/Formats/Formats.component.js

@@ -0,0 +1,28 @@
+import React, { Fragment } from "react"
+import { useTranslation } from "react-i18next"
+import "./Formats.scss"
+
+const Formats = ({ value, filterFormat }) => {
+  const { t, i18n } = useTranslation()
+  return value
+    ? value
+        .filter(format => format.name !== "All-Media")
+        .map((format, index) => (
+          <Fragment key={index}>
+            {(index && ", ") || null}
+            <span
+              className="format"
+              onClick={e => {
+                e.stopPropagation()
+                filterFormat(format)
+              }}
+              key={index}
+            >
+              {(format.qty > 1 ? format.qty + "x" : "") + t("format." + format.name, format.name)}
+            </span>
+          </Fragment>
+        ))
+    : null
+}
+
+export default Formats

frontend/src/components/Attributes/Formats/Formats.container.js

@@ -0,0 +1,11 @@
+import { connect } from "react-redux"
+import { addFilter } from "Actions"
+import Formats from "./Formats.component"
+
+const mapDispatchToProps = dispatch => ({
+  filterFormat: format => {
+    dispatch(addFilter({ attribute: "formats", compare: "seq", value: format.name }))
+  },
+})
+
+export default connect(null, mapDispatchToProps)(Formats)

frontend/src/components/Attributes/Formats/Formats.scss

@@ -0,0 +1,4 @@
+.format {
+  color: #0000aa;
+  cursor: pointer;
+}

frontend/src/components/Attributes/Formats/index.js

@@ -0,0 +1 @@
+export { default } from "./Formats.container"

frontend/src/components/Attributes/Genres/Genres.component.js

@@ -0,0 +1,23 @@
+import React, { Fragment } from "react"
+import "./Genres.scss"
+
+const Genres = ({ value, filterGenre }) =>
+  value
+    ? value.map((genre, index) => (
+        <Fragment key={index}>
+          {(index && ", ") || null}
+          <span
+            className="genre"
+            onClick={e => {
+              e.stopPropagation()
+              filterGenre(genre)
+            }}
+            key={index}
+          >
+            {genre}
+          </span>
+        </Fragment>
+      ))
+    : null
+
+export default Genres

frontend/src/components/Attributes/Genres/Genres.container.js

@@ -0,0 +1,11 @@
+import { connect } from "react-redux"
+import { addFilter } from "Actions"
+import Genres from "./Genres.component"
+
+const mapDispatchToProps = dispatch => ({
+  filterGenre: genre => {
+    dispatch(addFilter({ attribute: "genres", compare: "seq", value: genre }))
+  },
+})
+
+export default connect(null, mapDispatchToProps)(Genres)

frontend/src/components/Attributes/Genres/Genres.scss

@@ -0,0 +1,4 @@
+.genre {
+  color: #0000aa;
+  cursor: pointer;
+}

frontend/src/components/Attributes/Genres/index.js

@@ -0,0 +1 @@
+export { default } from "./Genres.container"

frontend/src/components/Attributes/Price/Price.component.js

@@ -0,0 +1,5 @@
+import React from "react"
+
+const Price = ({ value, rate }) => <>{value && (value * rate).toFixed(2)}</>
+
+export default Price

frontend/src/components/Attributes/Price/Price.container.js

@@ -0,0 +1,8 @@
+import { connect } from "react-redux"
+import Price from "./Price.component"
+
+const mapStateToProps = state => ({
+  rate: state.collection.rate,
+})
+
+export default connect(mapStateToProps)(Price)

frontend/src/components/Attributes/Price/index.js

@@ -0,0 +1 @@
+export { default } from "./Price.container"

frontend/src/components/Attributes/Year/Year.component.js

@@ -0,0 +1,17 @@
+import React from "react"
+import "./Year.scss"
+
+const Year = ({ value, filterYear }) =>
+  value ? (
+    <span
+      className="year"
+      onClick={e => {
+        e.stopPropagation()
+        filterYear(value)
+      }}
+    >
+      {value}
+    </span>
+  ) : null
+
+export default Year

frontend/src/components/Attributes/Year/Year.container.js

@@ -0,0 +1,11 @@
+import { connect } from "react-redux"
+import { addFilter } from "Actions"
+import Year from "./Year.component"
+
+const mapDispatchToProps = dispatch => ({
+  filterYear: year => {
+    dispatch(addFilter({ attribute: "year", compare: "eq", value: year }))
+  },
+})
+
+export default connect(null, mapDispatchToProps)(Year)

frontend/src/components/Attributes/Year/Year.scss

@@ -0,0 +1,4 @@
+.year {
+  color: #0000aa;
+  cursor: pointer;
+}

frontend/src/components/Attributes/Year/index.js

@@ -0,0 +1 @@
+export { default } from "./Year.container"

frontend/src/components/Attributes/index.js

@@ -0,0 +1,5 @@
+export { default as Artists } from "./Artists"
+export { default as Formats } from "./Formats"
+export { default as Genres } from "./Genres"
+export { default as Price } from "./Price"
+export { default as Year } from "./Year"

frontend/src/components/Collection/Record/Record.component.js

@@ -1,11 +1,16 @@
 import React from "react"
-import { useTranslation } from "react-i18next"
 import LazyLoad from "react-lazyload"
-import Artists from "Components/Artists"
+import { Artists, Formats, Genres, Price, Year } from "Components/Attributes"
 import "./Record.scss"
 
-const Record = ({ rec, gridView, gridColumns, rate, handleClick, handleYearClick }) => {
-  const { t, i18n } = useTranslation()
+const Record = ({ rec, gridView, gridColumns, handleClick }) => {
+  const attributes = {
+    artists: Artists,
+    formats: Formats,
+    genres: Genres,
+    price: Price,
+    year: Year,
+  }
   const artists = rec.artists
     .map(
       (artist, index) =>
@@ -29,37 +34,14 @@ const Record = ({ rec, gridView, gridColumns, rate, handleClick, handleYearClick
         </LazyLoad>
       </div>
       {gridColumns &&
-        gridColumns.map(column => (
-          <div className={`record-${column}`} key={column}>
-            {column == "artist" ? (
-              <Artists artists={rec.artists} />
-            ) : column == "price" ? (
-              rec.price && (rec.price * rate).toFixed(2)
-            ) : column == "year" ? (
-              rec.year ? (
-                <span
-                  className="year"
-                  onClick={e => {
-                    e.stopPropagation()
-                    handleYearClick(rec.year)
-                  }}
-                >
-                  {rec.year}
-                </span>
-              ) : null
-            ) : column == "formats" ? (
-              rec.formats &&
-              rec.formats
-                .filter(f => f.name !== "All-Media")
-                .map(f => (f.qty > 1 ? f.qty + "x" : "") + t("format." + f.name, f.name))
-                .join(", ")
-            ) : column == "genres" ? (
-              rec.genres && rec.genres.join(", ")
-            ) : (
-              column in rec && rec[column]
-            )}
-          </div>
-        ))}
+        gridColumns.map(column => {
+          const Attribute = attributes[column]
+          return (
+            <div className={`record-${column}`} key={column}>
+              {Attribute ? <Attribute value={rec[column]} /> : column in rec && rec[column]}
+            </div>
+          )
+        })}
     </div>
   ) : (
     <div className={`record ${format_classes}`} onClick={() => handleClick(rec)}>

frontend/src/components/Collection/Record/Record.container.js

@@ -1,20 +1,16 @@
 import { connect } from "react-redux"
-import { showRecord, filterYear } from "Actions"
+import { showRecord } from "Actions"
 import Record from "./Record.component"
 
 const mapStateToProps = state => ({
   gridView: state.ui.gridView,
   gridColumns: state.ui.gridColumns,
-  rate: state.collection.rate,
 })
 
 const mapDispatchToProps = dispatch => ({
   handleClick: rec => {
     dispatch(showRecord(rec))
   },
-  handleYearClick: year => {
-    dispatch(filterYear(year))
-  },
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Record)

frontend/src/components/RecordInfo/RecordInfo.component.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react"
-import { useTranslation } from "react-i18next"
 import Popup from "Components/Popup"
-import Artists from "Components/Artists"
+import { Artists, Formats, Genres, Price, Year } from "Components/Attributes"
 import Listen from "./Listen"
 import "./RecordInfo.scss"
 
@@ -11,11 +10,9 @@ const RecordInfo = ({
   rate,
   currency,
   updateRecord,
-  handleYearClick,
   handleListenClick,
   hideRecord,
 }) => {
-  const { t, i18n } = useTranslation()
   useEffect(() => {
     if (rec) {
       let threeMonthsAgo = new Date()
@@ -40,27 +37,30 @@ const RecordInfo = ({
           <div className={"record-info"}>
             <img className="cover" src={rec.cover} />
             <div className="artists">
-              <Artists artists={rec.artists} />
+              <Artists value={rec.artists} />
             </div>
             <div className="left">
               {rec.formats && (
                 <div className="formats">
-                  {rec.formats
-                    .filter(f => f.name !== "All-Media")
-                    .map(f => (f.qty > 1 ? f.qty + "x" : "") + t("format." + f.name, f.name))
-                    .join(", ")}
+                  <Formats value={rec.formats} />
                 </div>
               )}
               {(rec.year && (
-                <div className="year" onClick={() => handleYearClick(rec.year)}>
-                  {rec.year}
+                <div className="year">
+                  <Year value={rec.year} />
                 </div>
               )) ||
                 null}
-              {rec.genres && <div className="genres">{rec.genres.join(", ")}</div>}
+              {rec.genres && (
+                <div className="genres">
+                  <Genres value={rec.genres} />
+                </div>
+              )}
               {rec.price && rate && (
                 <div className="price">
-                  {"(" + (rec.price * rate).toFixed(2) + " " + currency + ")"}
+                  {"("}
+                  <Price value={rec.price} />
+                  {" " + currency + ")"}
                 </div>
               )}
               <div className="tracks">
@@ -71,7 +71,7 @@ const RecordInfo = ({
                       {track.artists && (
                         <>
                           {" ("}
-                          <Artists artists={track.artists} />
+                          <Artists value={track.artists} />
                           {")"}
                         </>
                       )}

frontend/src/components/RecordInfo/RecordInfo.container.js

@@ -1,5 +1,5 @@
 import { connect } from "react-redux"
-import { updateRecord, filterYear, showListen, hideRecord } from "Actions"
+import { updateRecord, showListen, hideRecord } from "Actions"
 import { selectActiveRecord } from "Selectors"
 import RecordInfo from "./RecordInfo.component"
 
@@ -14,9 +14,6 @@ const mapDispatchToProps = dispatch => ({
   updateRecord: record => {
     dispatch(updateRecord(record))
   },
-  handleYearClick: year => {
-    dispatch(filterYear(year))
-  },
   handleListenClick: listen => {
     dispatch(showListen(listen))
   },

frontend/src/reducers/artistReducer.js

@@ -10,7 +10,6 @@ import {
   VIEW_ARTIST_COLLECTION,
   TOGGLE_VIEW_ARTIST_COLLECTION,
   RECEIVE_RECORD,
-  FILTER_YEAR,
 } from "Actions"
 
 function artist(
@@ -68,10 +67,6 @@ function artist(
       return Object.assign({}, state, {
         viewArtistCollection: !state.viewArtistCollection,
       })
-    case FILTER_YEAR:
-      return Object.assign({}, state, {
-        activeRecord: null,
-      })
     default:
       return state
   }

frontend/src/reducers/collectionReducer.js

@@ -13,6 +13,7 @@ import {
   SHOW_ARTIST,
   SET_CURRENCY,
   RECEIVE_RATE,
+  ADD_FILTER,
 } from "Actions"
 
 function collection(
@@ -84,6 +85,10 @@ function collection(
       return Object.assign({}, state, {
         rate: action.rate.currency == state.currency ? action.rate.rate : state.rate,
       })
+    case ADD_FILTER:
+      return Object.assign({}, state, {
+        activeRecord: null,
+      })
     default:
       return state
   }