I want to be able to toggle between true or false within the same array

Viewed 31

I currently have two lists (previewList and activeList)

previewList is the bottom half (blue) list that will show all the clients if there is no other clients registered.

activeList is the top half (grayed) list that will show all the clients that have the same name that already are registered.

enter image description here

basically when i click "Move client to the list" i just want to put that client into the bottom half list (previewList) and also get rid of it from its current place.

Below is how i render out my lists:

<S.ListWrapper>
        <div
          style={{
            overflowY: setScroll,
            height: "440px",
            padding: "2rem",
            border: "1px solid #B2CAE060",
            borderRadius: "2rem",
            marginBottom: "2rem",
          }}
        >
          {showAll && (
            <div>
              <S.SectionName>Missmatch on org name or org number</S.SectionName>
              {activeList.map((client, index) => {
                return (
                  <MatchResult
                    clientType={clientType}
                    client={client}
                    key={index}
                    activePid={activePid}
                    updateItem={updateItem}
                    isChecked={selectedClients[index]}
                    setIsChecked={setIsChecked(index)}
                    index={index} // here we have the right index so this is ok
                    handleGcidGenerate={handleGcidGenerate}
                  />
                );
              })}
              <S.SectionName></S.SectionName>
            </div>
          )}
          {showAll
            ? previewList.map((client, index) => {
                return (
                  <MultipleClientsItem
                    clientType={clientType}
                    client={client}
                    key={index}
                    activePid={activePid}
                    updateItem={updateItem}
                    isChecked={selectedClients[index]}
                    setIsChecked={setIsChecked(index)}
                    index={index} // here we have the right index so this is ok
                    handleGcidGenerate={handleGcidGenerate}
                  />
                );
              })
            : previewList.reduce((array, client, index) => {
                if (array.length >= 3) return array;
                if (
                  client.client_type &&
                  client.client_type.includes(clientType)
                ) {
                  array.push(
                    <MultipleClientsItem
                      clientType={clientType}
                      client={client}
                      key={index}
                      activePid={activePid}
                      updateItem={updateItem}
                      isChecked={selectedClients[index]}
                      setIsChecked={setIsChecked(index)}
                      index={index}
                      handleGcidGenerate={handleGcidGenerate}
                    />
                  );
                }
                return array;
              }, [])}
        </div>
      </S.ListWrapper>

And this is my how i currently trying to solve my problem:

Where "clients" is the already registered clients

 useEffect(() => {
    let filtered = previewList.filter((o1) =>
      clients.some((o2) => o1.org_name === o2.org_name)
    );

    let filteredTrue = previewList.filter((o1) =>
      clients.every((o2) => o2.org_name !== o1.org_name)
    );
    const is_same = previewList.filter((o1) =>
      clients.every((o2) => o2.org_name !== o1.org_name)
    );

    console.log(is_same);
    setActiveList(
      previewList.map((client) => {
        if (is_same) {
          return { ...client, isActive: false };
        }
      })
    );

    dispatch(
      setPreviewList(
        filteredTrue.map((client) => {
          return { ...client, isActive: true };
        })
      )
    );
  }, [clients]);

What i am trying to achive here is that if org_name from previewList find a match with org_name from clients then i want to set isActive: True otherwise/or rest isActive: False

I think this is attainable with just one list aswell, but i cant find any answers to this solution anywhere.

So i can basically move the client through a toggle

0 Answers
Related