filterablesettings.js

import "./App.css";
import { useState } from "react";

function App() {
  const options = [
    {
      header: {
        name: "Account",
      },

      values: [
        {
          name: "Profile",
          description:
            "Your email address is your identity on this app and is used to log in.",
          tags: [
            "email",
            "username",
            "first name",
            "last name",
            "date of birth",
          ],
        },
        {
          name: "Password",
          description: "Changing your password will also reset your API key.",
          tags: [],
        },
        {
          name: "Two-factor Authentication",
          description:
            "Enable to give your Truly Expenses account an extra layer of security.",
          tags: [],
        },
        {
          name: "SSH Keys",
          description:
            "Need help? Checkout out our guide to generating SSH keys.",
          tags: [],
        },

        {
          name: "API Key",
          description: "View your API Key",
          tags: [],
        },

        {
          name: "Close Account",
          description:
            "You must delete all apps on this account first. Warning: Closing your account is irreversible.",
          tags: [],
        },
      ],
    },

    {
      header: {
        name: "Applications",
      },

      values: [
        {
          name: "Third-party Services",
          description:
            "Grant TrulyExpenses access to external accounts for additional functionality.",
          tags: [],
        },
        {
          name: "Authorizations",
          description:
            "Authorizations you have created for interacting with the TrulyExpenses API.",
          tags: [],
        },
        {
          name: "Authorized Applications",
          description:
            "Authorized applications are apps you've permitted to use the TrulyExpenses API on your behalf.",
          tags: [],
        },
        {
          name: "API Clients",
          description:
            "Register API clients to use the TrulyExpenses API on behalf of TrulyExpenses users with OAuth.",
          tags: [],
        },
      ],
    },

    {
      header: {
        name: "Billing",
      },

      values: [
        {
          name: "Billing Information",
          description: "Manage your billing information",
          tags: ["credit cards"],
        },
        {
          name: "Free Dyno Usage",
          description: "View statistics about your free plan usage",
          tags: [],
        },
        {
          name: "Invoices",
          description: "Track your invoices and their statuses",
          tags: [],
        },
        {
          name: "Invoice Address ",
          description:
            "We'll print this address on your invoices. If blank, we'll use your billing address instead.",
          tags: [],
        },
      ],
    },

    {
      header: {
        name: "Support",
      },

      values: [
        {
          name: "Help",
          description: "Having trouble",
          tags: [],
        },
        {
          name: "FAQ",
          description: "View our frequently asked questions",
          tags: [],
        },
        {
          name: "Contact us",
          description:
            "Contact our support team, offer limited to premium users",
          tags: [],
        },
        {
          name: "Report an issue",
          description: "Report whats not working well, so we can fix it",
          tags: [],
        },
      ],
    },
  ];

  const [visibleOptions, setVisibleOptions] = useState(options);

  const handleSearch = (e) => {
    e.preventDefault();
    const value = e.target.value;
    if (value.trim().length === 0) {
      setVisibleOptions(options);
      return;
    }

    const items = [];

    try {
      visibleOptions.forEach((item, i) => {
        const foundInner = item.values.filter(
          (innerValues, j) =>
            innerValues.tags.join("").search(value.trim().toLowerCase()) !==
              -1 ||
            innerValues.name
              .toLocaleLowerCase()
              .search(value.trim().toLowerCase()) !== -1 ||
            innerValues.description
              .toLocaleLowerCase()
              .search(value.trim().toLowerCase()) !== -1 ||
            innerValues.tags.includes(value.trim())
        );

        items[i] = {
          header: {
            name: item.header.name,
          },
          values: foundInner,
        };

        if (
          item.header.name
            .toLocaleLowerCase()
            .search(value.trim().toLowerCase()) !== -1
        ) {
          items[i] = {
            header: {
              name: item.header.name,
            },
            values: [...options[i].values],
          };
        }
      });
    } catch (error) {}

    setVisibleOptions(items);
  };

  return (
    <div className="App">
      <div className="container my-5">
        <h1>
          <span>
            <button className="btn btn-secondary">
              {" "}
              <span>&lt;</span> Back{" "}
            </button>{" "}
            Settings
          </span>
        </h1>
        <header className="App-header mt-5">
          <input
            type="text"
            id=""
            placeholder="Search..."
            className="form-control"
            onChange={handleSearch}
          />
        </header>

        <section>
          {visibleOptions.map((item, index) => {
            return (
              <div className="main-options mt-5 mb-2" key={item.header.name}>
                <h3>{item.header.name}</h3>

                <section>
                  {item.values.map((value) => (
                    <ul className="list-group" key={value.name}>
                      <li
                        className="list-group-item mb-2"
                        style={{
                          display: "flex",
                          justifyContent: "space-between",
                          alignItems: "center",
                        }}
                      >
                        <div>
                          <h6 className="font-weight-bold">{value.name}</h6>
                          <p>{value.description}</p>
                        </div>

                        <button className="btn btn-secondary">></button>
                      </li>
                    </ul>
                  ))}
                </section>
              </div>
            );
          })}
        </section>
      </div>
    </div>
  );
}

export default App;