ermineaweb

ANSI Escape Sequences

Standard escape codes are prefixed with Escape:

• Ctrl-Key: ^[
• Octal: \033
• Unicode: \u001b
• Hexadecimal: \x1B
• Decimal: 27

ermineaweb

function Users({ users }) {
  const [bookmarksOnly, setBookmarksOnly] = useState(false);
  const [usersState, setUsersState] = useState(users);
  const [bookmarks, toggleBookmark] = useBookmarks();

  const changeBookMarksOnly = (e) => {
    setBookmarksOnly(e.target.checked);
  };

  useEffect(() => {

ermineaweb

{usersState.map((user) => {
  const isBookmarked = bookmarks.includes(user.id);
  return (
    <div key={user.id} className={`user ${isBookmarked ? "bookmarked" : ""}`}>
      <div>{user.username}</div>
      <button onClick={toggleBookmark(user.id)}>
        {isBookmarked ? "Remove from bookmarks" : "Add to bookmarks"}
      </button>
    </div>
  );

ermineaweb

function useBookmarks() {
  const [bookmarks, setBookmarks] = useState(() => {
    const ls = localStorage.getItem("bookmarks");
    if (ls) return JSON.parse(ls);
    else return [];
  });

  const toggleItemInLocalStorage = (id) => () => {
    const isBookmarked = bookmarks.includes(id);
    if (isBookmarked) setBookmarks((prev) => prev.filter((b) => b !== id));

ermineaweb

function App() {
  return <Users users={users} />;
}

ermineaweb

function Users({ users }) {
  return (
    <div className={"root"}>
      <div className={"users"}>
        {usersState.map((user) => {
          return (
            <div key={user.id} className={`user`}>
              <div>{user.username}</div>
            </div>
          );

ermineaweb

{usersState.map((user) => {
  return (
    <div key={user.id} className={`user`}>
      <div>{user.username}</div>
    </div>
  );
})}

ermineaweb

/* General Scrollbar style */
::-webkit-scrollbar {
  /*vertical scroll bar*/
  width: 8px;
  /*horizontal scroll bar*/
  height: 8px;
  border-radius: 20px;
}

::-webkit-scrollbar-track,

ermineaweb

const handleCreateUser = () => {
  createUser({
    variables: { username },

    optimisticResponse: {
      __typename: "Mutation",
      // use the uuid library to have a unique ID
      createUser: { __typename: "User", id: 123456, username },
    },

ermineaweb

const mutationRequest = gql`
  mutation($username: String!) {
    createUser(username: $username) {
      id
      username
    }
  }
`;

function Users({ users }) {