From fb9592edfc58b1dd5e88dd95864d078370d5dd2a Mon Sep 17 00:00:00 2001
From: Gustav Andreasson <gustav.andreasson@gmail.com>
Date: Thu, 28 Dec 2023 13:33:53 +0100
Subject: [PATCH] Handle non standard characters in formats

---
 .../src/components/Collection/Record/Record.component.js  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Collection/Record/Record.component.js b/frontend/src/components/Collection/Record/Record.component.js
index d76f079..f8f66b3 100644
--- a/frontend/src/components/Collection/Record/Record.component.js
+++ b/frontend/src/components/Collection/Record/Record.component.js
@@ -6,13 +6,15 @@ import "./Record.scss"
 
 const Record = ({ rec, gridView, gridColumns, rate, handleClick, handleYearClick }) => {
   const { t, i18n } = useTranslation()
-  let artists = rec.artists
+  const artists = rec.artists
     .map(
       (artist, index) =>
         artist.artist.name + (index < rec.artists.length - 1 ? " " + artist.delimiter : "")
     )
     .join(" ")
-  let formats = rec.formats ? rec.formats.map(f => "format-" + f.name).join(" ") : "format-none"
+  const format_classes = rec.formats
+    ? rec.formats.map(f => "format-" + f.name.replace(/[^0-9a-zA-Z\-]/g, "_")).join(" ")
+    : "format-none"
 
   return gridView ? (
     <div className="record-row" onClick={() => handleClick(rec)}>
@@ -60,7 +62,7 @@ const Record = ({ rec, gridView, gridColumns, rate, handleClick, handleYearClick
         ))}
     </div>
   ) : (
-    <div className={`record ${formats}`} onClick={() => handleClick(rec)}>
+    <div className={`record ${format_classes}`} onClick={() => handleClick(rec)}>
       <LazyLoad offset={300} once>
         <img
           className="cover"