solved the bug with duplicate management

frontend/components/basic/Toggle.tsx

@@ -18,6 +18,8 @@ interface ToggleProps {
   pos: number;
   id: string;
   deleteOverride: (id: string) => void; 
+  sharedToHide: string[];
+  setSharedToHide: (values: string[]) => void;
 }
 
 /**
@@ -25,16 +27,41 @@ interface ToggleProps {
  * @param obj 
  * @param {boolean} obj.enabled - whether the toggle is turned on or off
  * @param {function} obj.setEnabled - change the state of the toggle
+ * @param {function} obj.addOverride - a function that adds an override to a certain secret
+ * @param {string} obj.keyName - key of a certain secret
+ * @param {string} obj.value - value of a certain secret
+ * @param {number} obj.pos - position of a certain secret
+ #TODO: make the secret id persistent?
+ * @param {string} obj.id - id of a certain secret  
+ * @param {function} obj.deleteOverride - a function that deleted an override for a certain secret
+ * @param {string[]} obj.sharedToHide - an array of shared secrets that we want to hide visually because they are overriden. 
+ * @param {function} obj.setSharedToHide - a function that updates the array of secrets that we want to hide visually
  * @returns 
  */
-export default function Toggle ({ enabled, setEnabled, addOverride, keyName, value, pos, id, deleteOverride }: ToggleProps): JSX.Element {
+export default function Toggle ({ 
+  enabled, 
+  setEnabled, 
+  addOverride, 
+  keyName, 
+  value, 
+  pos, 
+  id, 
+  deleteOverride,
+  sharedToHide,
+  setSharedToHide
+}: ToggleProps): JSX.Element {
   return (
     <Switch
       checked={enabled}
       onChange={() => {
         if (enabled == false) {
           addOverride({ id, keyName, value, pos });
+          setSharedToHide([
+            ...sharedToHide!,
+            id
+          ])
         } else {
+          setSharedToHide(sharedToHide!.filter(tempId => tempId != id))
           deleteOverride(id);
         }
         setEnabled(!enabled);

frontend/components/dashboard/SideBar.tsx

@@ -33,6 +33,8 @@ interface SideBarProps {
   deleteOverride: (id: string) => void; 
   buttonReady: boolean;
   savePush: () => void;
+  sharedToHide: string[];
+  setSharedToHide: (values: string[]) => void;
 }
 
 /**
@@ -45,9 +47,22 @@ interface SideBarProps {
  * @param {function} obj.deleteOverride - delete the personal override for a certain secret
  * @param {boolean} obj.buttonReady - is the button for saving chagnes active
  * @param {function} obj.savePush - save changes andp ush secrets
+ * @param {string[]} obj.sharedToHide - an array of shared secrets that we want to hide visually because they are overriden. 
+ * @param {function} obj.setSharedToHide - a function that updates the array of secrets that we want to hide visually
  * @returns the sidebar with 'secret's settings'
  */
-const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, addOverride, deleteOverride, buttonReady, savePush }: SideBarProps) => {
+const SideBar = ({ 
+  toggleSidebar, 
+  data, 
+  modifyKey, 
+  modifyValue, 
+  addOverride, 
+  deleteOverride, 
+  buttonReady, 
+  savePush,
+  sharedToHide,
+  setSharedToHide 
+}: SideBarProps) => {
   const [overrideEnabled, setOverrideEnabled] = useState(data.map(secret => secret.type).includes("personal"));
   console.log("sidebar", data, data.map(secret => secret.type).includes("personal"))
 
@@ -66,7 +81,7 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, addOverride, del
           type="varName"
           position={data[0].pos}
           value={data[0].key}
-          duplicates={[]}
+          isDuplicate={false}
           blurred={false}
         />
       </div>
@@ -78,7 +93,7 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, addOverride, del
           type="value"
           position={data.filter(secret => secret.type == "shared")[0]?.pos}
           value={data.filter(secret => secret.type == "shared")[0]?.value}
-          duplicates={[]}
+          isDuplicate={false}
           blurred={true}     
         />
         <div className='absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50'>
@@ -102,6 +117,8 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, addOverride, del
             pos={data[0].pos}
             id={data[0].id}
             deleteOverride={deleteOverride}
+            sharedToHide={sharedToHide}
+            setSharedToHide={setSharedToHide}
           />
         </div>}
         <div className={`relative ${!overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
@@ -110,7 +127,7 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, addOverride, del
             type="value"
             position={overrideEnabled ? data.filter(secret => secret.type == "personal")[0].pos : data[0].pos}
             value={overrideEnabled ? data.filter(secret => secret.type == "personal")[0].value : data[0].value}
-            duplicates={[]}
+            isDuplicate={false}
             blurred={true}
           />
           <div className='absolute right-[0.57rem] top-[0.3rem] z-50'>

frontend/pages/dashboard/[id].tsx

@@ -88,6 +88,7 @@ export default function Dashboard() {
   const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
   const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
   const [sidebarSecretId, toggleSidebar] = useState("None");
+  const [sharedToHide, setSharedToHide] = useState<string[]>([]);
 
   const { createNotification } = useNotificationContext();
 
@@ -160,6 +161,16 @@ export default function Dashboard() {
         });
         reorderRows(dataToSort);
 
+        setSharedToHide(
+          dataToSort?.filter(row => (dataToSort
+          ?.map((item) => item.key)
+          .filter(
+            (item, index) =>
+              index !==
+              dataToSort?.map((item) => item.key).indexOf(item)
+          ).includes(row.key) && row.type == 'shared'))?.map((item) => item.id)
+        )
+
         const user = await getUser();
         setIsNew(
           (Date.parse(String(new Date())) - Date.parse(user.createdAt)) / 60000 < 3
@@ -289,7 +300,7 @@ export default function Dashboard() {
     const nameErrors = !Object.keys(obj)
       .map((key) => !isNaN(Number(key[0].charAt(0))))
       .every((v) => v === false);
-    const duplicatesExist = findDuplicates(data!.map((item: SecretDataProps) => [item.key, item.type])).length > 0;
+    const duplicatesExist = findDuplicates(data!.map((item: SecretDataProps) => item.key + item.type)).length > 0;
 
     if (nameErrors) {
       return createNotification({
@@ -402,6 +413,8 @@ export default function Dashboard() {
           deleteOverride={deleteOverride}
           buttonReady={buttonReady}
           savePush={savePush}
+          sharedToHide={sharedToHide}
+          setSharedToHide={setSharedToHide}
         />}
         <div className="w-full max-h-96 pb-2">
           <NavHeader pageName="Secrets" isProjectRelated={true} />
@@ -548,21 +561,15 @@ export default function Dashboard() {
                   className={`bg-white/5 mt-1 mb-1 rounded-md pb-2 max-w-5xl overflow-visible`}
                 >
                   <div id="data1" className="px-1 pt-2">
-                    {data?.filter(row => !(data
+                    {data?.filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
-                          ?.map((item) => item.key)
+                      <KeyPair 
-                          .filter(
-                            (item, index) =>
-                              index !==
-                              data?.map((item) => item.key).indexOf(item)
-                          ).includes(row.key) && row.type == 'shared')).map((keyPair) => (
-                      <KeyPair
                         key={keyPair.id}
                         keyPair={keyPair}
                         deleteRow={deleteCertainRow}
                         modifyValue={listenChangeValue}
                         modifyKey={listenChangeKey}
                         isBlurred={blurred}
-                        isDuplicate={findDuplicates(data?.map((item) => [item.key, item.type]))?.includes(keyPair.value)}
+                        isDuplicate={findDuplicates(data?.map((item) => item.key + item.type))?.includes(keyPair.key + keyPair.type)}
                         toggleSidebar={toggleSidebar}
                         sidebarSecretId={sidebarSecretId}
                       />