generated from Luis/nextjs-python-web-template
added consume and register deregister as simple fetch
This commit is contained in:
committed by
Sara Pervana
parent
e06afab048
commit
29aa17ca7c
@@ -1,26 +1,38 @@
|
|||||||
import { Button } from "@mui/material";
|
import { Button } from "@mui/material";
|
||||||
import useAxios from "../hooks/useAxios";
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
const ConsumeAction = ({ endpoint }: { endpoint: string }) => {
|
const ConsumeAction = ({ endpoint }: { endpoint: string }) => {
|
||||||
|
const [data, setData] = useState(null);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
const [currentEndpoint, setCurrentEndpoint] = useState("");
|
if (data) console.log("Data in state", data);
|
||||||
const [shouldFetch, setShouldFetch] = useState(false);
|
if (error) console.log("Error in state", error);
|
||||||
const { data, error } = useAxios(currentEndpoint, "GET", null, true, shouldFetch);
|
|
||||||
|
|
||||||
if (error) console.error("Error consuming:", error);
|
|
||||||
|
|
||||||
if (data) console.log('what the response', data)
|
|
||||||
|
|
||||||
const onConsume = () => {
|
const onConsume = () => {
|
||||||
setCurrentEndpoint(endpoint);
|
const axiosConfig = {
|
||||||
setShouldFetch(true);
|
url: endpoint,
|
||||||
}
|
method: "GET",
|
||||||
|
data: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
axios(axiosConfig)
|
||||||
|
.then((response) => {
|
||||||
|
setData(response.data);
|
||||||
|
console.log("I got the data from consume: ", response.data);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Error happened during consume: ", error);
|
||||||
|
setError(error);
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
return <Button onClick={onConsume} variant="outlined">
|
return (
|
||||||
Consume
|
<Button onClick={onConsume} variant="outlined">
|
||||||
</Button>
|
Consume
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ConsumeAction;
|
export default ConsumeAction;
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import { IEntityActions } from "@/types";
|
import { IEntityActions } from "@/types";
|
||||||
import { Button, Snackbar, Alert, AlertColor } from "@mui/material";
|
import { Button, Snackbar, Alert, AlertColor } from "@mui/material";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import useAxios from "../hooks/useAxios";
|
|
||||||
import { deleteEntity } from "@/api/entities/entities";
|
import { deleteEntity } from "@/api/entities/entities";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
endpointData: IEntityActions[];
|
endpointData: IEntityActions[];
|
||||||
@@ -16,17 +16,23 @@ const SNACKBAR_DEFAULT = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const EntityActions = ({ endpointData, rowData }: Props) => {
|
const EntityActions = ({ endpointData, rowData }: Props) => {
|
||||||
const [currentEndpoint, setCurrentEndpoint] = useState("");
|
|
||||||
const [shouldFetch, setShouldFetch] = useState(false);
|
|
||||||
const { error } = useAxios(currentEndpoint, "GET", null, true, shouldFetch);
|
|
||||||
|
|
||||||
const [snackbar, setSnackbar] = useState<{
|
const [snackbar, setSnackbar] = useState<{
|
||||||
open: boolean;
|
open: boolean;
|
||||||
message: string;
|
message: string;
|
||||||
severity: AlertColor;
|
severity: AlertColor;
|
||||||
}>(SNACKBAR_DEFAULT);
|
}>(SNACKBAR_DEFAULT);
|
||||||
|
|
||||||
if (error) console.error("Error registering/deregistering:", error);
|
const [registerData, setRegisterData] = useState(null);
|
||||||
|
const [registerError, setRegisterError] = useState(null);
|
||||||
|
|
||||||
|
const [DeregisterData, setDeRegisterData] = useState(null);
|
||||||
|
const [DeregisterError, setDeRegisterError] = useState(null);
|
||||||
|
|
||||||
|
if (registerData) console.log("Register Data in state", registerData);
|
||||||
|
if (registerError) console.log("Register Error in state", registerError);
|
||||||
|
|
||||||
|
if (DeregisterData) console.log("Register Data in state", DeregisterData);
|
||||||
|
if (DeregisterError) console.log("Register Error in state", DeregisterError);
|
||||||
|
|
||||||
const onDeleteEntity = async () => {
|
const onDeleteEntity = async () => {
|
||||||
if (rowData)
|
if (rowData)
|
||||||
@@ -50,13 +56,41 @@ const EntityActions = ({ endpointData, rowData }: Props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onRegisterEntity = (endpoint: string) => {
|
const onRegisterEntity = (endpoint: string) => {
|
||||||
setCurrentEndpoint(endpoint);
|
const axiosConfig = {
|
||||||
setShouldFetch(true);
|
url: endpoint,
|
||||||
|
method: "GET",
|
||||||
|
data: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
axios(axiosConfig)
|
||||||
|
.then((response) => {
|
||||||
|
setRegisterData(response.data);
|
||||||
|
console.log("I got the data from register: ", response.data);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Error happened during register: ", error);
|
||||||
|
setRegisterError(error);
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
};
|
};
|
||||||
|
|
||||||
const onDeregisterEntity = (endpoint: string) => {
|
const onDeregisterEntity = (endpoint: string) => {
|
||||||
setCurrentEndpoint(endpoint);
|
const axiosConfig = {
|
||||||
setShouldFetch(true);
|
url: endpoint,
|
||||||
|
method: "GET",
|
||||||
|
data: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
axios(axiosConfig)
|
||||||
|
.then((response) => {
|
||||||
|
setDeRegisterData(response.data);
|
||||||
|
console.log("I got the data from deregister: ", response.data);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Error happened during deregister: ", error);
|
||||||
|
setDeRegisterError(error);
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCloseSnackbar = () => {
|
const handleCloseSnackbar = () => {
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import { Button } from "@mui/material";
|
|
||||||
import EntityActions from "@/components/entity_actions";
|
import EntityActions from "@/components/entity_actions";
|
||||||
import ConsumeAction from "@/components/consume_action";
|
import ConsumeAction from "@/components/consume_action";
|
||||||
|
|
||||||
@@ -15,9 +14,7 @@ export const ClientTableConfig = [
|
|||||||
key: "endpoint_url",
|
key: "endpoint_url",
|
||||||
label: "End Point",
|
label: "End Point",
|
||||||
render: (value: any) => {
|
render: (value: any) => {
|
||||||
return (
|
return <ConsumeAction endpoint={value} />;
|
||||||
<ConsumeAction endpoint={value} />
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
|
|||||||
Reference in New Issue
Block a user