Фильтрация и поиск по ключу и значениям в нижнем и верхнем регистре - PullRequest
0 голосов
/ 01 апреля 2020
// state

const [searchTerm, setSearchTerm] = useState('');
const [allAccounts, setAllAccounts] = useState([])
const [searchedAccounts, setSearchedAccounts] = useState([])
// query

const GET_ACCOUNTS = gql`
  query accounts {
    accounts {
      id
      name
      status
      companyName
    }
  }
`;
// get query

const { loading, error } = useQuery(GET_ACCOUNTS, {
    fetchPolicy: "no-cache",
    skip: userType !== 'OS_ADMIN',
    onCompleted: (data) => {
      setAllAccounts(data.accounts || [])
      setSearchedAccounts(data.accounts || [])
    }
  });
// useEffect

  useEffect(() => {
    if (searchTerm) {
      const results = allAccounts.filter((c => c.name.toLowerCase().includes(searchTerm)))
      setSearchedAccounts(results)
    }
  }, [searchTerm, searchedAccounts])
// example query result (more than 1)

{
  "accounts": [
    {
      "id": "5deed7df947204960f286010",
      "name": "Acme Test Account",
      "status": "active",
      "company": {
        "id": "5de84532ce5373afe23a05c8",
        "name": "Acme Inc.",
        "__typename": "Company"
      },
      "__typename": "Account"
    },
  ]
}
// render

{searchedAccounts.map(c => (
          <>
            <ListItem
              dense
              button
              className={classnames({ [classes.selectedAccountContext]: c.id === accountContextId })}
              key={c.id}
              onClick={() => accountClicked(c.id)}
            >
              <ListItemText
                primary={c.name}
                secondary={
                  <>
                    <span>{c.companyName}</span>
                    <span className="d-flex align-items-center top-margin-tiny">
                      <Badge
                        color={c.status === 'active' ? "success" : "danger"}
                        style={{ marginBottom: 0 }}
                      >
                        {c.status.replace(/^\w/, c => c.toUpperCase())}
                      </Badge>
                      <span className='ml-auto'>
                        <SvgIcon><path d={mdiMapMarkerRadius} /></SvgIcon>
                        <SMARTCompanyIcon />
                      </span>
                    </span>
                  </>
                }
              />
            </ListItem>
          </>
        ))}

У меня есть компонент, который первоначально выбирает запрос и показывает результаты. Над списком есть поле ввода ввода. Когда вы начинаете печатать, он перерисовывает список фильтрации, если результаты списка найдены. В настоящее время он работает так, что при поиске он ищет по c.name, что является именем учетной записи.

Я пытался добавить к этому дополнительный код, но безуспешно. Я хочу иметь возможность поиска не только по c.name, но и c.companyName и убедиться, что он не учитывает регистр. В настоящее время, если значение имеет заглавную букву, оно не находит его. Надеюсь, что это имеет смысл.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...