R

Refine•2y ago•

9 replies

rubber-blue

how to share selected value globally throughout the app?

import {
useSelect,
type RefineThemedLayoutV2HeaderProps,
} from "@refinedev/antd";
import { useGetIdentity } from "@refinedev/core";
import {
Layout as AntdLayout,
Avatar,
Select,
Space,
Switch,
Typography,
theme,
} from "antd";
import React, { useContext } from "react";
import { ColorModeContext } from "../../contexts/color-mode";

const { Text } = Typography;
const { useToken } = theme;

type IUser = {
id: number;
name: string;
avatar: string;
};

export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
sticky,
}) => {
const { token } = useToken();
const { data: user } = useGetIdentity<IUser>();
const { mode, setMode } = useContext(ColorModeContext);
const { selectProps, queryResult: queryResultProjects } = useSelect({
resource: "projects",
optionLabel: "project_name",
optionValue: "id",
});

const headerStyles: React.CSSProperties = {
backgroundColor: token.colorBgElevated,
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
padding: "0px 24px",
height: "64px",
};

if (sticky) {
headerStyles.position = "sticky";
headerStyles.top = 0;
headerStyles.zIndex = 1;
}

return (
<AntdLayout.Header style={headerStyles}>
<Select
placeholder="Select project"
style={{ width: 300 }}
{...selectProps}
/>

{/* <Space>
<Switch
checkedChildren=""
unCheckedChildren=""
onChange={() => setMode(mode === "light" ? "dark" : "light")}
defaultChecked={mode === "dark"}
/>
<Space style={{ marginLeft: "8px" }} size="middle">
{user?.name && <Text strong>{user.name}</Text>}
{user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
</Space>
</Space> */}
</AntdLayout.Header>
);
};
how to share selected value globally throughout the app?