Aleksandr M. Posts - Answer Overflow

Aleksandr M.

Posts Comments

KPCKevin Powell - Community

•Created by Aleksandr M. on 9/28/2023 in #front-end

Content is too tall compared to its parent and overflows

9 replies

KPCKevin Powell - Community

•Created by Aleksandr M. on 2/16/2023 in #back-end

Firestore won't let me one more map to they array

1 replies

KPCKevin Powell - Community

•Created by Aleksandr M. on 2/14/2023 in #back-end

Firestore security rules for objects inside of the array

Hi everyone! In my Firestore, I have a collection called "items" and there are couple of documents inside. Some of these documents have "reviews" property, which is created by arrayUnion() called from my front-end and the objects inside of this array always have 4 properties, one of them is userId. In my front-end, I'm sending a get request to get the whole reviews array, like this: doc.data().reviews. How can I write my security rules so that userId is never returned no matter what? I asked ChatGPT to help me write the rules, but these doesn't work:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /items/{itemsID} {
      allow read: if true;
      allow write: if request.auth != null
      match /reviews/{review} {
        allow read: if true;
        allow write: if request.auth != null;
        match /userId {
          allow read: if false;
        }
      }
    }
  }
}

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /items/{itemsID} {
      allow read: if true;
      allow write: if request.auth != null
      match /reviews/{review} {
        allow read: if true;
        allow write: if request.auth != null;
        match /userId {
          allow read: if false;
        }
      }
    }
  }
}

And my query looks like this (Typescript):

export const fetchItems = createAsyncThunk("items/fetchItems", async () => {
  const querySnapshot = await getDocs(collection(db, "items"));
  const itemsArray: itemsType[] = [];
  querySnapshot.forEach((doc) => {
    itemsArray.push({
      id: doc.id,
      name: doc.data().name,
      type: doc.data().type,
      price: doc.data().price,
      description: doc.data().description,
      img: doc.data().img,
      reviews: doc.data().reviews,
    });
  });
  return itemsArray;
});

export const fetchItems = createAsyncThunk("items/fetchItems", async () => {
  const querySnapshot = await getDocs(collection(db, "items"));
  const itemsArray: itemsType[] = [];
  querySnapshot.forEach((doc) => {
    itemsArray.push({
      id: doc.id,
      name: doc.data().name,
      type: doc.data().type,
      price: doc.data().price,
      description: doc.data().description,
      img: doc.data().img,
      reviews: doc.data().reviews,
    });
  });
  return itemsArray;
});

3 replies

KPCKevin Powell - Community

•Created by Aleksandr M. on 2/2/2023 in #front-end

Image shrinks, icons don't

69 replies

KPCKevin Powell - Community

•Created by Aleksandr M. on 1/30/2023 in #front-end

onBlur event handler firing when focusing on child components

Hi everyone! I'm having trouble with my onFocus and onBlur events. I have this div, which is a container for search bar:

<div
          className="w-full relative"
          onFocus={() => {
            setSearchPopUpOpened(true);
          }}
          onBlur={() => {
            setSearchPopUpOpened(false);
          }}
        >
          {searchPopUpOpened && <SearchBarPopUp />}
          <form
            className="relative w-full"
            onSubmit={(e) => {
              e.preventDefault();
            }}
          >
            <input
              type="text"
              placeholder="Search for products..."
              className="border-2 rounded-xl p-2 w-full"
            />
            <button type="submit" className="absolute top-[10px] right-3">
              <FontAwesomeIcon icon={faMagnifyingGlass} />
            </button>
          </form>
        </div>

<div
          className="w-full relative"
          onFocus={() => {
            setSearchPopUpOpened(true);
          }}
          onBlur={() => {
            setSearchPopUpOpened(false);
          }}
        >
          {searchPopUpOpened && <SearchBarPopUp />}
          <form
            className="relative w-full"
            onSubmit={(e) => {
              e.preventDefault();
            }}
          >
            <input
              type="text"
              placeholder="Search for products..."
              className="border-2 rounded-xl p-2 w-full"
            />
            <button type="submit" className="absolute top-[10px] right-3">
              <FontAwesomeIcon icon={faMagnifyingGlass} />
            </button>
          </form>
        </div>

On focus, it sets searchPopUpOpened to true and does the opposite on blur. <SearchBarPopUp /> is a child of this search bar container with onFocus and onBlur event handlers, but for some reason, if you click inside the <SearchBarPopUp />, focus is lostonBlur event handler fires, setting searchPopUpOpened to false. How to fix this behaviour? I need my main div to have focus while the user is clicking on its children, but for some reason, it doesn't work with my search bar pop-up.

10 replies

KPCKevin Powell - Community

•Created by Aleksandr M. on 12/11/2022 in #front-end

Weird space below my page

20 replies

KPCKevin Powell - Community

•Created by Aleksandr M. on 9/29/2022 in #front-end

The best way to align grid items

21 replies

KPCKevin Powell - Community

•Created by Aleksandr M. on 9/28/2022 in #front-end

VW is wider then my actual screen

Hi! I have a problem with setting width of my HTML elements. When I use 100vw as my width, it works out fine, but for some reason it is a little bit wider then my screen (I tried Chrome and Firefox, it's the same on both of these). BUT when I turn the responsive mode in dev tools, everything fixes itself no matter what is the width of viewport, everything works correctly. How can I fix that? I have <meta name="viewport" content="width=device-width, initial-scale=1"> in my HTML, so I have no idea what's wrong.

63 replies

KPCKevin Powell - Community

•Created by Aleksandr M. on 9/27/2022 in #front-end

Grid areas reassign values instead of making it switch places

13 replies

Gaming

Programming