refactor(frontend): add isBuilding state to SSEContext and use it in GenericNode and BuildTrigger components

The isBuilding state was added to the SSEContext to keep track of whether a build is currently in progress. This state was then used in the GenericNode and BuildTrigger components to conditionally render certain elements based on whether a build is in progress or not.
This commit is contained in:
anovazzi1 2023-06-16 13:03:38 -03:00
commit b47f6aa326
3 changed files with 7 additions and 5 deletions

View file

@ -29,7 +29,7 @@ export default function GenericNode({
const Icon = nodeIcons[data.type] || nodeIcons[types[data.type]]; const Icon = nodeIcons[data.type] || nodeIcons[types[data.type]];
const [validationStatus, setValidationStatus] = useState(null); const [validationStatus, setValidationStatus] = useState(null);
// State for outline color // State for outline color
const { sseData } = useSSE(); const { sseData,isBuilding } = useSSE();
// useEffect(() => { // useEffect(() => {
// if (reactFlowInstance) { // if (reactFlowInstance) {
@ -137,7 +137,7 @@ export default function GenericNode({
></div> ></div>
<div <div
className={classNames( className={classNames(
!validationStatus !validationStatus || isBuilding
? "w-4 h-4 rounded-full bg-yellow-500 opacity-100" ? "w-4 h-4 rounded-full bg-yellow-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin", : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200" "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"

View file

@ -20,9 +20,8 @@ export default function BuildTrigger({
setIsBuilt: any; setIsBuilt: any;
isBuilt: boolean; isBuilt: boolean;
}) { }) {
const [isBuilding, setIsBuilding] = useState(false);
const { updateSSEData } = useSSE(); const { updateSSEData,isBuilding,setIsBuilding } = useSSE();
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);

View file

@ -9,6 +9,8 @@ import {
const initialValue = { const initialValue = {
updateSSEData: ({}) => {}, updateSSEData: ({}) => {},
sseData: {}, sseData: {},
isBuilding: false,
setIsBuilding: (isBuilding: boolean) => {},
}; };
const SSEContext = createContext(initialValue); const SSEContext = createContext(initialValue);
@ -19,6 +21,7 @@ export function useSSE() {
export function SSEProvider({ children }) { export function SSEProvider({ children }) {
const [sseData, setSSEData] = useState({}); const [sseData, setSSEData] = useState({});
const [isBuilding, setIsBuilding] = useState(false);
const updateSSEData = useCallback((newData: any) => { const updateSSEData = useCallback((newData: any) => {
setSSEData((prevData) => ({ setSSEData((prevData) => ({
@ -28,7 +31,7 @@ export function SSEProvider({ children }) {
}, []); }, []);
return ( return (
<SSEContext.Provider value={{ sseData, updateSSEData }}> <SSEContext.Provider value={{ sseData, updateSSEData,isBuilding,setIsBuilding }}>
{children} {children}
</SSEContext.Provider> </SSEContext.Provider>
); );