thereturning Posts - Answer Overflow

thereturning

•Created by thereturning on 9/29/2024 in #front-end

help vite proxy running in a container

I used docker compose for frontend and backend, and i tried connecting to http://backend:5500, which works, but in my vite proxy i tried setting it to that, and it didnt work. Its probably because the request is made on the browser, not in the container, so I put http://localhost:5500 as the proxy but that doesnt work. If I directly do fetch ("localhost:5500 / ") there is no problem, so im thinking vite tries to check if the proxy is valid. heres is my vite config

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    plugins: [react()],
    server: {
      port: 3000,
      proxy: {
        "/api": {
          target: "http://127.0.0.1:5500", //env.API_URL
        },
        "/ws": {
          target: "ws://127.0.0.1:5500", //env.API_URL
        },
      },
    },
  };
});

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    plugins: [react()],
    server: {
      port: 3000,
      proxy: {
        "/api": {
          target: "http://127.0.0.1:5500", //env.API_URL
        },
        "/ws": {
          target: "ws://127.0.0.1:5500", //env.API_URL
        },
      },
    },
  };
});

2 replies

KPCKevin Powell - Community

•Created by thereturning on 9/10/2024 in #back-end

websocket design for messagin app

can i get help me with my websocket design i have a message app like discord, it has servers groupchats and dms, and they all have channels. messages are tied to the channels. when a user goes in the app, i have a map that maps channel_id to a list of websocket connections. When someone sends a message, it will broadcast that message to everyone in the channel. now i am wondering if i should have the client listen to all dms and groupchats, but for server channls listen for messages in the active channel. to do that, i would have to remove and add the user's connection to the new active channel, which requires knowledge of the previous active channel, and which websocket connection belongs to the user. and there is also the problem if the same user opens another tab, now i dont know which websocket connection belongs to which tab. is my approach cooked

1 replies

KPCKevin Powell - Community

•Created by thereturning on 8/19/2024 in #front-end

help with react context

Im making a tooltip that is on the topmost part of the document, and it needs to know if a component is being hovered, that component is nested. TooltipContext file

import { createContext, useState, useContext } from "react";
import PropTypes from "prop-types";

const TooltipContext = createContext();

const TooltipProvider = ({ children }) => {
  const [tooltip, setTooltip] = useState({
    visible: false,
    name: "",
    position: null,
  });

  const handleServerHover = (isHovered, name, position) => {
    if (isHovered) {
      setTooltip({
        visible: isHovered,
        name: name,
        position: {
          top: position.top,
          height: position.height,
          left: position.right,
        },
      });
    } else {
      setTooltip((prev) => ({
        ...prev,
        visible: false,
      }));
    }
  };

  return (
    <TooltipContext.Provider value={{ tooltip, handleServerHover }}>
      {console.log("BINGUS")}
      {children}
    </TooltipContext.Provider>
  );
};

TooltipProvider.propTypes = {
  children: PropTypes.element,
};

// Custom hook to use the TooltipContext
const useTooltip = () => useContext(TooltipContext);
export { TooltipProvider, useTooltip };

import { createContext, useState, useContext } from "react";
import PropTypes from "prop-types";

const TooltipContext = createContext();

const TooltipProvider = ({ children }) => {
  const [tooltip, setTooltip] = useState({
    visible: false,
    name: "",
    position: null,
  });

  const handleServerHover = (isHovered, name, position) => {
    if (isHovered) {
      setTooltip({
        visible: isHovered,
        name: name,
        position: {
          top: position.top,
          height: position.height,
          left: position.right,
        },
      });
    } else {
      setTooltip((prev) => ({
        ...prev,
        visible: false,
      }));
    }
  };

  return (
    <TooltipContext.Provider value={{ tooltip, handleServerHover }}>
      {console.log("BINGUS")}
      {children}
    </TooltipContext.Provider>
  );
};

TooltipProvider.propTypes = {
  children: PropTypes.element,
};

// Custom hook to use the TooltipContext
const useTooltip = () => useContext(TooltipContext);
export { TooltipProvider, useTooltip };

16 replies

KPCKevin Powell - Community

•Created by thereturning on 8/16/2024 in #front-end

my popup is being hidden

35 replies

KPCKevin Powell - Community

•Created by thereturning on 8/14/2024 in #front-end

how to style scrollbar with tailwind

this works

@layer utilities {
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

@layer utilities {
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

but webkit doesnt works

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar::-webkit-scrollbar {
    width: 100px;
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar::-webkit-scrollbar {
    width: 100px;
  }
}

<div className="scrollbar flex flex-1 flex-col gap-1 overflow-auto">
      <Conversation />
      <Conversation />
 </div>

<div className="scrollbar flex flex-1 flex-col gap-1 overflow-auto">
      <Conversation />
      <Conversation />
 </div>

7 replies

Gaming

Programming