I am trying to implement a profanity filter on an app I am building that deals with twitter-like posts.
The check will loop through each swear word in a list of words, and check the content against what the user has entered into the form.
The app uses Chakra UI useToast to display a message if a swear is detected or the fields are not all filled out. The logic is simple:
import { swearWord } from "../swear-words";
import { useToast } from "@chakra-ui/react";
...
...
...
// onClick function for adding a new post:
const addPost = async () => {
if (!name || !title || !type || !content) {
toast({
title: "Please fill out all fields!",
status: "error",
duration: 2000,
isClosable: true,
});
return;
}
// THIS IS THE PROBLEMATIC CHECK THAT DOESNT WORK ON MOBILE
for (let swear of swearWord) {
if (
title.includes(swear) ||
title.includes(swear.toUpperCase()) ||
name.includes(swear) ||
name.includes(swear.toUpperCase()) ||
content.includes(swear) ||
content.includes(swear.toUpperCase())
) {
toast({
title:
"Some of the language you've used in this post is considered aggressive.",
status: "error",
duration: 5000,
isClosable: false,
});
toast({
title:
"If you have a problem you'd like addressed, please contact the Administrators, but you may not take it out on the community via this board.",
status: "error",
duration: 5000,
isClosable: false,
});
postContext.displayForm(); // close the form if swear word found
return; // return and do not proceed with function execution
}
}
const ipResponse = await fetch("https://api.ipify.org?format=json"); // get user IP
const ipAddress = await ipResponse.json(); // save userIP
// construct post.
const newPost = {
author: name,
title: title,
type: type,
content: content,
ipAddress: ipAddress,
};
postContext.displayForm(); // close the form after successful submission.
postContext.addPost(newPost); // defer to app-wide context to make appropriate API calls
};
The problem
When doing this on a desktop browser, it works. The message is displayed, and the function ceases execution.
When I open both the local and deployed version on my phone (makes no difference) the ENTIRE for loop where it’s checking for these words is completely skipped.
I know it is skipped because I can add an alert before the for loop, in the for loop, and after the for loop and only the one before and after will display, but not the one in the for loop. The function never ceases execution, and posts with profanity are sent to the API and allowed into the database and displayed as a new post.
This is what the outcome SHOULD look like:
On mobile this entire for loop check is skipped.
Has anyone else encountered this and knows why? It doesn’t make any sense to me why something would work on desktop but not on mobile when every other aspect of the same javascript code is working without fail. I don’t know what it is that could change so drastically that the simple act of pulling the same website up on a mobile phone causes an entire block of javascript to just cease existence.