From 2eb7a544e463361fcb031dfbb87808f36c6a7d88 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Fri, 17 Nov 2023 06:40:52 +0100
Subject: [PATCH] Updated the DesignItem.jsx

---
 .../components/DesignItem/DesignItem.jsx      | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/states/Manage/pages/ManageChannel/components/DesignItem/DesignItem.jsx b/src/states/Manage/pages/ManageChannel/components/DesignItem/DesignItem.jsx
index 9b6f98d..6884efc 100644
--- a/src/states/Manage/pages/ManageChannel/components/DesignItem/DesignItem.jsx
+++ b/src/states/Manage/pages/ManageChannel/components/DesignItem/DesignItem.jsx
@@ -1,33 +1,49 @@
 import CoinImage from "@/common/images/coin.png";
 import DesignImage from "@/common/images/design.png";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faDroplet, faMessage} from "@fortawesome/free-solid-svg-icons";
 import "./styles.sass";
+import {useContext, useEffect, useState} from "react";
+import {ChannelContext} from "@/states/Manage/pages/Channels/contexts/ChannelContext";
+import {useParams} from "react-router-dom";
+import {patchRequest} from "@/common/util/RequestUtil.js";
+
+export const DesignItem = ({id, name, coins, perks = [], active}) => {
+
+    const params = useParams();
+    const {channels, getChannelById, updateChannels} = useContext(ChannelContext);
+    const [currentChannel, setCurrentChannel] = useState();
+
+    const switchChannel = () => {
+        patchRequest("/channels/" + params.channel, {designId: id})
+            .then(() => updateChannels());
+    }
+
+    useEffect(() => {
+        if (channels) setCurrentChannel(getChannelById(params.channel));
+    }, [channels]);
+
+    if (!currentChannel) return;
 
-export const DesignItem = ({name, coins, perks = []}) => {
     return (
-        <div className="design-item">
+        <div className={"design-item" + (currentChannel.designId === id ? " design-active" : " design-inactive") } onClick={switchChannel}>
             <div className="design-info">
                 <div className="design-title">
                     <h1>{name}</h1>
                     <div className="required-coins">
-                        <img src={CoinImage} alt="StarCoins" />
+                        <img src={CoinImage} alt="StarCoins"/>
                         <p>{coins}</p>
                     </div>
                 </div>
 
                 <div className="design-perks">
-                    <div className="design-perk">
-                        <FontAwesomeIcon icon={faMessage} />
-                        <h2>Embed-Message</h2>
-                    </div>
-                    <div className="design-perk">
-                        <FontAwesomeIcon icon={faDroplet } />
-                        <h2>Colorful Design</h2>
-                    </div>
+                    {perks.map(perk => (
+                        <div className="design-perk" key={perk.name}>
+                            <FontAwesomeIcon icon={perk.icon}/>
+                            <h2>{perk.name}</h2>
+                        </div>))}
                 </div>
             </div>
-            <img src={DesignImage} alt="Design" />
+            <img src={DesignImage} alt="Design"/>
         </div>
     )
 }
\ No newline at end of file