From d0b4641300aeffe453db7e95ebe31f97dc4e4dc5 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Fri, 19 Jan 2024 14:46:05 +0300
Subject: [PATCH] product-addon: remove useState using

---
 .../Components/Calculation/addons/product-addon.tsx  | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/apps/web/Components/Calculation/addons/product-addon.tsx b/apps/web/Components/Calculation/addons/product-addon.tsx
index 0a9e2dd..26a5364 100644
--- a/apps/web/Components/Calculation/addons/product-addon.tsx
+++ b/apps/web/Components/Calculation/addons/product-addon.tsx
@@ -3,7 +3,6 @@ import titles from '../config/elements-titles';
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
 import { pick } from 'radash';
-import { useState } from 'react';
 import styled from 'styled-components';
 import { Tag } from 'ui/elements';
 
@@ -18,24 +17,17 @@ const tagsData = pick(titles, ['cbxPartialVAT', 'cbxFloatingRate']);
 const { CheckableTag } = Tag;
 
 export const ProductAddon = observer(() => {
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const { $calculation } = useStore();
 
   function handleChange(elementName: keyof typeof tagsData, checked: boolean) {
-    if (checked) {
-      setSelectedTags([...selectedTags, elementName]);
-      $calculation.element(elementName).setValue(true);
-    } else {
-      setSelectedTags(selectedTags.filter((x) => x !== elementName));
-      $calculation.element(elementName).setValue(false);
-    }
+    $calculation.element(elementName).setValue(checked);
   }
 
   return (
     <Container>
       {(Object.keys(tagsData) as Array<keyof typeof tagsData>).map((elementName) => (
         <CheckableTag
-          checked={selectedTags.includes(elementName)}
+          checked={$calculation.element(elementName).getValue()}
           onChange={(checked) => handleChange(elementName, checked)}
           key={elementName}
           style={{ marginInlineEnd: 0 }}