Updated the DesignItem.jsx

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>
     )
 }