Использование хэштегов с Formik

В этом блоге я хотел бы обсудить извлечение хэштега из формы, созданной с помощью Formik. Код, который я предоставлю позже в этой статье, будет включать довольно простую функцию хэштега. На входе самой формы к хэштегам не прикреплены элементы стиля. Основная предпосылка заключается в том, что пользователь создаст сообщение, используя хэштег или нет; однако, если они это сделают, форма распознает этот хэштег и сравнит его с существующими хэштегами в веб-приложении, а при совпадении продолжит отправку формы, в конечном итоге отображая публикацию на странице без хэштега.

В своем приложении я использую слово «район» для обозначения темы или хэштега. Есть районные страницы, на которых публикуются сообщения с этим конкретным хэштегом. Вот что я имею в виду…

Обратите внимание, что на главной странице большинство сообщений имеют хэштеги с названиями районов, чтобы указать, к какому району относится сообщение. Итак, что происходит, когда пост, созданный здесь, не содержит хэштега? Ну, это также будет рассмотрено в блоке кода ниже. Но, прежде чем я дам товар, вот снимок используемой формы публикации.

Вот код…

  const validationSchema = yup.object({
    post: yup.string("Enter post").required("Post is required"),
  });
  const formik = useFormik({
    initialValues: {
      post: "",
    },
    validationSchema: validationSchema,
    onSubmit: (values, { setSubmitting }) => {
      setSubmitting(true);

      const hashtagMatches = values?.post.match(/#\w+/gi);

      const hashtags = hashtagMatches
        ? hashtagMatches.map((tag) => tag.toLowerCase().slice(1))
        : [];

      const filteredTags = districts?.filter((district) => {
        if (
          hashtags.some((hashtag) =>
            district.name.toLowerCase().includes(hashtag)
          )
        ) {
          return district.id;
        }
      });

      if (filteredTags && filteredTags.length > 0) {
        idDistrict = filteredTags[0].id;
      }

      const newValues = {
        ...values,
        post: values.post.replace(/#\w+/gi, "").trim(),
      };

      const submission = {
        ...newValues,
        user_id: userId,
        votes: 0,
        district_id: idDistrict,
      };
      fetch("/createpost", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(submission),
      }).then((res) => {
        if (res.ok) {
          res.json().then((postData) => {
            fetchPost();
            setShowCreatePost(false);
            setSubmitting(false);
          });
        }
      });
    },
  });

Теперь давайте рассмотрим, что делают некоторые из незнакомых строк.

const hashtagMatches = values?.post.match(/#\w+/gi);

В этой строке используется необязательная цепочка; Вы можете прочитать больше об этом здесь". Эта строка проверяет, существует ли 'value.post', а затем сопоставляет все хэштеги в формате '#\w+' с глобальные и чувствительные к регистру флаги. Затем совпадения назначаются hashtagMatches.

const hashtags = hashtagMatches
        ? hashtagMatches.map((tag) => tag.toLowerCase().slice(1))
        : [];

В приведенных выше строках кода цель состоит в том, чтобы создать массив хэштегов. Если 'hashtagMatches' не равно null,сопоставьтекаждое совпадение (тег) в'hashtagMatches'. Затем он преобразует тег в нижний регистр и удаляет символ '#' путем нарезки из индекса 1. Если 'hashtagMatches' равно null , он назначит пустой массив для 'хэштегов'.

const filteredTags = districts?.filter((district) => {
        if (
          hashtags.some((hashtag) =>
            district.name.toLowerCase().includes(hashtag)
          )
        ) {
          return district.id;
        }
      });

Следующая функция отфильтрует массив «районы», чтобы получить «filteredTags». Небольшое примечание о массиве «районы»; этот массив был выбран в родительском компоненте, а затем передан моему компоненту CreatePost. Затем он снова проверяет, существуют ли «районы», используя необязательную цепочку. Он фильтрует каждый «район» в «районах», проверяя, включен ли какой-либо хэштег в «хэштеги» в название района. Если true, возвращается 'district.id'; если «районы» не существуют, «filteredTags» будет неопределенным.

if (filteredTags && filteredTags.length > 0) {
        idDistrict = filteredTags[0].id;
      }

Эта функция проверяет, не является ли «filteredTags» null и содержит ли хотя бы один элемент. Если true, назначьте «id» первого элемента в «filteredTags» для «idDistrict».

const newValues = {
        ...values,
        post: values.post.replace(/#\w+/gi, "").trim(),
      };

Наконец, в этой части блока кода хэштеги из values.post удаляются, обрезая результат. Он заменяет все хэштеги в формате ‘#\w+’ пустой строкой, используя регулярное выражение с глобальными и чувствительными к регистру флагами. Используя trim(), он обрезает результирующую строку, удаляя все начальные или конечные пробелы. Наконец, он создает новый объект с именем newValues со всеми свойствами из values и обновленным полем post.

В этом суть. Если вам нужна прокомментированная версия блока кода выше для лучшего понимания, ознакомьтесь с ней ниже!

  // Set the submitting state to true
  setSubmitting(true);

  // Find all hashtag matches in the post
  const hashtagMatches = values?.post.match(/#\w+/gi);
  
  // Process the matched hashtags (lowercase and remove '#')
  const hashtags = hashtagMatches
    ? hashtagMatches.map((tag) => tag.toLowerCase().slice(1))
    : [];

  // Filter districts based on whether any hashtag includes the district name
  const filteredTags = districts?.filter((district) => {
    if (
      hashtags.some((hashtag) =>
        district.name.toLowerCase().includes(hashtag)
      )
    ) {
      // Return district id if the district name includes a hashtag
      return district.id;
    }
  });

  // If there are filtered tags, set idDistrict to the first district's id
  if (filteredTags && filteredTags.length > 0) {
    idDistrict = filteredTags[0].id;
  }

  // Remove hashtags from the post and trim the result
  const newValues = {
    ...values,
    post: values.post.replace(/#\w+/gi, "").trim(),
  };

  // Create the submission object with newValues, user_id, votes, and district_id
  const submission = {
    ...newValues,
    user_id: userId,
    votes: 0,
    district_id: idDistrict,
  };

  // Send a POST request to the "/createpost" endpoint
  fetch("/createpost", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(submission),
  }).then((res) => {
    // If the response is ok, process the response JSON
    if (res.ok) {
      res.json().then((postData) => {
        // Call the fetchPost function
        fetchPost();
        
        // Set setShowCreatePost to false
        setShowCreatePost(false);
        
        // Set the submitting state to false
        setSubmitting(false);
      });
    }
  });
},

Вот результат кода:

В любом случае, я надеюсь, что это было полезно! Дайте мне знать, если у вас есть какие-либо советы или вопросы, и если вы хотите ознакомиться с моим демо-проектом, вот ссылка.

До скорого!

-Триша