Fix voting, intergarsi ke API

This commit is contained in:
2024-12-30 08:19:43 +08:00
parent bbef4050e0
commit 1c162c199a
14 changed files with 773 additions and 372 deletions

View File

@@ -14,93 +14,46 @@ import { useState } from "react";
import { DIRECTORY_ID } from "../lib";
export default function Page() {
const [filePP, setFilePP] = useState<File | null>(null);
const [imgPP, setImgPP] = useState<any | null>();
async function onSave() {
const body = {
file: filePP,
dirId: DIRECTORY_ID.profile_foto,
};
const token =
"QWERTYUIOPLKJHGFDSAZXCVBNMQAZWSXEDCRFVTGBYHNUJMIKOLPPOIUYTREWQLKJHGFDSAMNBVCXZlghvftyguhijknhbgvcfytguu8okjnhbgvfty7u8oilkjnhgvtygu7u8ojilnkhbgvhujnkhghvjhukjnhb";
const formData = new FormData();
formData.append("file", filePP as any);
const res = await fetch("/api/image/upload", {
method: "POST",
body: formData,
});
console.log(await res.json());
}
const [data, setData] = useState({
name: "bagas",
hobi: [
{
id: "1",
name: "mancing",
},
{
id: "2",
name: "game",
},
],
});
return (
<>
<Stack>
<Center>
{imgPP ? (
<Paper shadow="lg" radius={"100%"}>
<Avatar
color={"cyan"}
sx={{
borderStyle: "solid",
borderColor: "gray",
borderWidth: "0.5px",
}}
src={imgPP ? imgPP : "/aset/global/avatar.png"}
size={150}
radius={"100%"}
/>
</Paper>
) : (
<Paper shadow="lg" radius={"100%"}>
<Avatar
variant="light"
color="blue"
size={150}
radius={"100%"}
sx={{
borderStyle: "solid",
borderColor: MainColor.darkblue,
borderWidth: "0.5px",
}}
/>
</Paper>
)}
</Center>
<Stack align="center" justify="center" h={"100vh"}>
<pre>{JSON.stringify(data, null, 2)}</pre>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
setImgPP(buffer);
setFilePP(files);
} catch (error) {
console.log(error);
}
<Button
onClick={() => {
const newData = [
{
id: "1",
name: "sepedah",
},
{
id: "2",
name: "berenang",
},
];
setData({
...data,
hobi: newData,
});
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
{...props}
radius={"xl"}
leftIcon={<IconCamera />}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
)}
</FileButton>
<Button onClick={() => onSave()}>Upload</Button>
Ganti
</Button>
</Stack>
</>
);

View File

@@ -11,40 +11,44 @@ export default function Voting_ComponentSkeletonViewPuh() {
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Publish" />}
header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />}
>
<ComponentGlobal_CardStyles marginBottom={"0"}>
<Stack spacing={"lg"}>
<Grid align="center">
<Grid.Col span={"content"}>
<Skeleton circle height={40} />
</Grid.Col>
<Grid.Col span={4}>
<Skeleton height={20} w={150} />
</Grid.Col>
</Grid>
<Stack align="center">
<Skeleton height={20} w={150} />
<Skeleton height={20} w={300} />
<Stack>
<ComponentGlobal_CardStyles marginBottom={"0"}>
<Stack spacing={"xl"}>
<Grid align="center" gutter={"md"}>
<Grid.Col span={"content"}>
<Skeleton circle height={40} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={20} w={150} />
</Grid.Col>
<Grid.Col span={3} offset={3}>
<Skeleton height={20} w={150} />
</Grid.Col>
</Grid>
</Stack>
</ComponentGlobal_CardStyles>
<Group position="center" spacing={100}>
<Stack align="center">
<Skeleton circle height={70} />
<Skeleton height={20} w={50} />
</Stack>
<Stack align="center">
<Skeleton circle height={70} />
<Skeleton height={20} w={50} />
</Stack>
</Group>
{/* <ComponentGlobal_CardStyles>
<Stack>
<Center>
<Skeleton h={20} w={"30%"} />
</Center>
<Stack align="center">
<Skeleton height={15} w={50} /> <Skeleton height={20} w={50} />
<Group position="center" spacing={50}>
<Stack align="center">
<Skeleton circle height={70} />
<Skeleton height={20} w={50} />
</Stack>
<Stack align="center">
<Skeleton circle height={70} />
<Skeleton height={20} w={50} />
</Stack>
</Group>
</Stack>
</Stack>
</ComponentGlobal_CardStyles>
</ComponentGlobal_CardStyles> */}
</Stack>
</UIGlobal_LayoutTamplate>
</>
);