Kuba Faraway Posts - Answer Overflow

Kuba Faraway

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers

•Created by Kuba Faraway on 6/18/2024 in #general-help

Cloudflare selects distant CDN

To begin with, I would like to thank all the kind souls who offer their time and help. I have small ecommerce store hosted on VPS located in Poland (paying yearly ~ 120 dollars). Currently selling mainly in Poland, but extending our boundries for whole Europe. I would like to benefit from Cloudflare security and performance, but with performance there is a problem. VPS Origin Server is in Olsztyn (175km from Warsaw, 390km from my location - Glogow). When testing from my location (Glogow) cdn-cgi/trace shows colo=IAD. As far as I know IAD stands for Ashburn, US* ~ 7000km away. 😭 When testing from server location (Olsztyn) the cdn-cgi is for Warsaw, which is fine ~ 175km. The question is: How do I fix it that cloudflare selects IAD location for my CDN? Below the results for requests from my location (Glogow). In future I wanted to buy Cache Reserve, but this won't reduce this delay. Right now I'm getting to know Cloudflare for around 4 days (as backend developer), using Free Version, probably paid subscription would solve the issue, but maybe not pro, not business just Enterprise? But who affords to pay atleast 20$ per month (or maybe 1000$), when my whole infrastructure costs 10$ monthly? I checked other 3 bigger companies from Poland, and I get connected to colo=FRA from them. 1. Request [DNS only] [from Glogow] loading html doc ~ 90ms loading image ~ 140ms 2. Request [DNS proxied] [from Glogow] (cache MISS for image) loading html doc ~ 400ms loading image ~ 760ms 3. Request [DNX proxied] [from Glogow] (cache HIT for image) loading html doc ~ 390ms loading image ~ 290ms

23 replies

KPCKevin Powell - Community

•Created by Kuba Faraway on 12/1/2023 in #front-end

Passing props in parent component

React I have two types of components: - List - option (component CheckboxOption or RadioOption could be used in props.children)

type Props = {
  optionId: number | string;
  optionName: string
}

export const CheckboxOption = (props: Props) => {
return <li>{props.optionId} - {props.optionName}</li>
}

type Props = {
  optionId: number | string;
  optionName: string
}

export const CheckboxOption = (props: Props) => {
return <li>{props.optionId} - {props.optionName}</li>
}

interface Props2 {
  id: number | string;
  name: string
  children: ReactElement;
}
export List = (props: Props2) => {
return <ul>
  {React.cloneElement(props.children, {optionId: props.id, optionName: props.name})}
</ul>
}

interface Props2 {
  id: number | string;
  name: string
  children: ReactElement;
}
export List = (props: Props2) => {
return <ul>
  {React.cloneElement(props.children, {optionId: props.id, optionName: props.name})}
</ul>
}

Now I want to use it in the app, how can I do it without repeating props? (Example is simplified, and in real scenario CheckboxOption could be also replaced with RadioOption etc... page.tsx

<Select id="10" name="potato">
  <CheckboxOption/>
  // <CheckboxOption/>
  // <RadioOption/>
</Select>

<Select id="10" name="potato">
  <CheckboxOption/>
  // <CheckboxOption/>
  // <RadioOption/>
</Select>

3 replies

KPCKevin Powell - Community

•Created by Kuba Faraway on 11/30/2023 in #front-end

React passing props to children within parent component + TypeScript

Let's say I have Select component that manages state for event onChangeOption when option is checked/unchecked. Option can be component SimpleOption or CheckboxOption. Select.tsx

interface Props {
children: ReactElement;
options: string[];
onChange: () => void;
}
export const Select = (props: Props) => {

const onChange = () => {};

const handleChangeOption = () => {};

return React.cloneElement(props.children, {
          checked: checkedOptions.includes(child.props.value),
          onChangeOption: handleChangeOption,
        });
}

interface Props {
children: ReactElement;
options: string[];
onChange: () => void;
}
export const Select = (props: Props) => {

const onChange = () => {};

const handleChangeOption = () => {};

return React.cloneElement(props.children, {
          checked: checkedOptions.includes(child.props.value),
          onChangeOption: handleChangeOption,
        });
}

SimpleOption.tsx

interface Props {
onChangeOption: () => void;
}
export const SimpleOption = (props: Props) {
return <p onChange={props.onChangeOption}></p>
}

interface Props {
onChangeOption: () => void;
}
export const SimpleOption = (props: Props) {
return <p onChange={props.onChangeOption}></p>
}

Page.tsx

const [categories, setCategories] = useState<string[]>(['shirts', 'shoes', 'trousers']);
return (
<Select onChange={e => setCategories(e)} options={categories}>
<SimpleOption onChangeOption={____ I don't want to repeat this (already passed in Select component ___} />
<SimpleOption onChangeOption={"like above"} />
</Select>
);

const [categories, setCategories] = useState<string[]>(['shirts', 'shoes', 'trousers']);
return (
<Select onChange={e => setCategories(e)} options={categories}>
<SimpleOption onChangeOption={____ I don't want to repeat this (already passed in Select component ___} />
<SimpleOption onChangeOption={"like above"} />
</Select>
);

Question On page.tsx, I have to specify onChangeOption for SimpleOption [or CheckboxOption]. How can I avoid it without making onChangeOption optional? (it's required and I don't want to cheat it).

2 replies

Gaming

Programming