thethingisback
thethingisback
PostsComments
KPCKevin Powell - Community
Created by thethingisback on 8/26/2024 in #front-end
React useRef() is being useless. Can't prevent re-fetching on form clear
I have a vehicle update form component with a 'clear form' button. The button resets the useState form object field values to nothing again, and due to this state change, React of course is re-rendering the entire component, which is fine for seeing blank form fields again, however this re-render is also causing fetch api's (my fetchInventory and fetchSteps) to also be re-run, which is unnecessary since the data from the fetch api's is already saved (from the component's first mounting/rendering). To avoid re-running these fetch calls upon re-render, I set some useRef variables - stepsFetched & dataFetched - to be false initially, but then set to 'true' after the first running of each fetch call (once I have the data), and then additionally, I am testing their truthness/falseness inside of the fetch function, prior to the call, to know whether to actually make the fetch call: 
  const fetchSteps = async () => {
    if (stepsFetched.current) {
      console.log("stepsFetched is true");
      return;
    }

    try {
      const response = await axios.get(`${apiUrl}/api/steps`);

  const fetchInventory = async () => {
    if (dataFetched.current) {
      console.log("dataFetched is true");
      setLoading(false);
      return;
    }
    try {
      const response = await axios.get(`${apiUrl}/api/admin/vehicle/list`);
    };
  const fetchSteps = async () => {
    if (stepsFetched.current) {
      console.log("stepsFetched is true");
      return;
    }

    try {
      const response = await axios.get(`${apiUrl}/api/steps`);

  const fetchInventory = async () => {
    if (dataFetched.current) {
      console.log("dataFetched is true");
      setLoading(false);
      return;
    }
    try {
      const response = await axios.get(`${apiUrl}/api/admin/vehicle/list`);
    };
The useRefs however, are not maintaining their being set to 'true' after the initial mounting/rendering of the component, into the second rerender, so as to trigger these if() statements and prevent another fetch. Am I doing something else wrong here? Shouldn't they still be 'true' on a re-render? Are the 'await' or 'async' keywords here causing the problem possibly?
4 replies
KPCKevin Powell - Community
Created by thethingisback on 6/30/2024 in #front-end
Converting .png to .svg 'trace-bitmap', coming out bubbled/soft edges, advice
No description
20 replies
KPCKevin Powell - Community
Created by thethingisback on 6/28/2024 in #front-end
grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content
No description
24 replies
KPCKevin Powell - Community
Created by thethingisback on 5/23/2024 in #front-end
Rec'd React libraries for fullscreen preview window component?
Looking for recommendations for any react libraries for a preview window component so I don't have to build it myself. I need something that can take an array of car images and return a fullscreen preview with left-right buttons of those images Thanks!
1 replies
KPCKevin Powell - Community
Created by thethingisback on 5/10/2024 in #front-end
Invoking a route in Link but as a component & with an argument obj to pass to the component
No description
1 replies
KPCKevin Powell - Community
Created by thethingisback on 5/8/2024 in #front-end
Make form label text wrap around embedded 'checkbox' input, or simulate that somehow?
No description
1 replies
KPCKevin Powell - Community
Created by thethingisback on 5/6/2024 in #front-end
A more coherent scheme to make my parallax responsive
GH:https://github.com/nnall/hm-frontend-Nick.git I have a 2 - page site in react where, in each of 'page''s directory, 'Home' & 'AboutUs', each has a similarly laid out/schemed 'parallax.css', solely for adjusting my parallax groups inside of the parallax wrapper parent, root element of the component. I'm only using CSS and 'perspective' currently and my components' structure for parallax look like this: 
<div className = "parallax_wrapper home_container">
  <div className = "parallax_group">
      <div className = "parallax_layer">centered content box</div>
  </div>
</div>
<div className = "parallax_wrapper home_container">
  <div className = "parallax_group">
      <div className = "parallax_layer">centered content box</div>
  </div>
</div>
The "wrapper" component gets the perspective setting, and then all "group" and "layer" elements get "transform-style: preserve-3d". My question here has to do with my parallax.css code, which is working mobile first on these parallax wrapper containers, and is setting and resetting the heights of the first-child "group" elements, in vh, starting tallest for mobile, and gradually with media-query breakpoints, tapering the heights down to less and less 'vh'. Not all "groups" are the same height, so that also has to be accounted for. Is there a better strategy for this with respect to handling responsiveness so that my "group" elements - scrolling slightly slower than their "top_layer" children- can be more reliably resized when the screen changes, so as to not constantly risk overflow/too much height, etc? I continue to spot breaks in the layout, although I've somewhat got everything scrolling with enough space at this point. I'm just looking for a more reliable approach.
1 replies
KPCKevin Powell - Community
Created by thethingisback on 4/26/2024 in #front-end
Handling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?
GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several really with this scenario, but for now this one in particular: 
  <div
      className={`chatbox-container ${showChatbox ? "show" : "hide"} ${
        isFocused ? "focused_container" : ""
      }`}
    >
  <div
      className={`chatbox-container ${showChatbox ? "show" : "hide"} ${
        isFocused ? "focused_container" : ""
      }`}
    >
As you can see I am conditionally assigning classes. focused_container , in my CSS, transform: scale()'s this element slightly larger. 
.chatbox {
          border-radius: 10px 10px 0px 0px;
          /* border: 1px solid grey; */
          padding: 1rem;
          height: 300px;
          overflow-y: auto;
          background-color: var(--bodyBG);
          display: flex;
          flex-direction: column;
          gap: 1rem;
}

.chatbox-container.focused_container {
          transform: /* perspective(0px)  */scale(1.029) /* translateZ(0) */;
          backface-visibility: hidden;
          -webkit-font-smoothing: subpixel-antialiased;
          /* perspective: 1px; */
}
.chatbox {
          border-radius: 10px 10px 0px 0px;
          /* border: 1px solid grey; */
          padding: 1rem;
          height: 300px;
          overflow-y: auto;
          background-color: var(--bodyBG);
          display: flex;
          flex-direction: column;
          gap: 1rem;
}

.chatbox-container.focused_container {
          transform: /* perspective(0px)  */scale(1.029) /* translateZ(0) */;
          backface-visibility: hidden;
          -webkit-font-smoothing: subpixel-antialiased;
          /* perspective: 1px; */
}
It's working, but when it scales up, the elements inside of it become blurry, at least on Chrome. Everything looks fine in Firefox. Slightly burry on Safari too. Is there a known way to fix this? You can see I've been messing around with perspective and transform:translateZ(), in addition to filter: contrast(), but none have worked so far.
4 replies
KPCKevin Powell - Community
Created by thethingisback on 4/26/2024 in #front-end
<a/> in component return being auto-assigned "button" class somehow, overwriting my classNames
No description
9 replies
KPCKevin Powell - Community
Created by thethingisback on 4/22/2024 in #front-end
Git repo 'rebasing' message in terminal: "Please enter the commit message for your changes"
No description
6 replies
KPCKevin Powell - Community
Created by thethingisback on 4/16/2024 in #front-end
Menu overlay 'onClick()' & retain scrolling for content underneath (pointer-events?)
No description
2 replies
KPCKevin Powell - Community
Created by thethingisback on 3/4/2024 in #front-end
<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog
dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}
dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}
Attached is my react component which is conditionally rendering the <dialog className = "pick_up_dialog"/> element based on whether a user has a reservation for the current day, according to data being received in an API call , "fetchReservations". Unlike ReserveModal and ProfileModal, which are also <dialog/> elements, but being returned in an imported component, the .pick_up_dialog <dialog/> is getting conditionally rendered directly inside of the PortalHome component I've attached. The transition animation from the dialog{} declaration and other normal CSS settings are being applied to all three dialogs. But the dialog[open]::backdrop{} settings are not being applied to the conditionally rendered .pick_up_dialog. Is there something about conditional rendering that changed the CSS access to an element in React? My CSS is being imported in my App.js: import style from "./components/reserve.css"; When the dialog is open and I inspect it, there is no ::backdrop element rendered in the DOM. What am I not understanding?
16 replies
KPCKevin Powell - Community
Created by thethingisback on 2/12/2024 in #front-end
Stupid question: how do I view github repo files in Github desktop app?
No description
2 replies
KPCKevin Powell - Community
Created by thethingisback on 2/9/2024 in #front-end
Base Web /baseui StatefulRangeDatePicker
No description
1 replies
KPCKevin Powell - Community
Created by thethingisback on 2/6/2024 in #front-end
Base Web baseui/TimePicker tool not working, implemented exactly as docs say?
No description
6 replies
KPCKevin Powell - Community
Created by thethingisback on 2/3/2024 in #front-end
Vite integration on pre-existing react project.. 404 but dev server running
No description
17 replies
KPCKevin Powell - Community
Created by thethingisback on 2/1/2024 in #front-end
Outline appearing around svg react-component when transform scaled?
No description
6 replies
KPCKevin Powell - Community
Created by thethingisback on 1/30/2024 in #front-end
THREE.js BG 'cloud' animation directional lights setting
No description
3 replies
KPCKevin Powell - Community
Created by thethingisback on 1/25/2024 in #front-end
background-video: using the <video/> tag, how to save performance for large video size?
I currently have a 471.9 MB .mp4 video in my local directory that I want to ultimate use for a background video for a portal landing page. I"m bringing the video into my component like so: 
import videoBG from "./video/bgVideo.mp4";
 
return(
<video src={videoBG} autoPlay muted loop></video>
)
import videoBG from "./video/bgVideo.mp4";
 
return(
<video src={videoBG} autoPlay muted loop></video>
)
Does anyone know of any tools I can use to allow me to use the video, but without the browser having to download 471.9MB in order for the page to load? I was thinking maybe a way to remote host a video or something? Any input is appreciated.
37 replies
KPCKevin Powell - Community
Created by thethingisback on 1/23/2024 in #front-end
React 'state' issue, looking for explanation
No description
8 replies