ermineaweb

app.use((req, res, next) => {
  setTimeout(() => next(), 1500);
});

ermineaweb

const queryRequest = gql`
  query {
    users {
      id
      username
    }
  }
`;

function UsersWithData() {

ermineaweb

function Users({ users }) {
  const [username, setUsername] = useState("");

  const changeUsername = (e) => {
    setUsername(e.target.value);
  };

  return (
    <main>
      <div>

ermineaweb

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

function Users({ users }) {

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

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

::-webkit-scrollbar-track,

ermineaweb

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

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

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

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));