jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat(market-card.tsx): add useContext, useRef, and useState imports to improve code readability and maintainability

Browse source 
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support
This commit is contained in:
anovazzi1 2023-10-24 18:27:14 -03:00
commit ba8399a0de
2 changed files with 61 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/frontend/src/pages/StorePage/components/market-card.tsx
View file

@ -1,5 +1,5 @@
import { Link, ToyBrick } from "lucide-react";
import { useState } from "react";
import { useContext, useRef, useState } from "react";
import IconComponent from "../../../components/genericIconComponent";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
@ -10,16 +10,65 @@ import {
CardHeader,
CardTitle,
} from "../../../components/ui/card";
import { TabsContext } from "../../../contexts/tabsContext";
import { getComponent, saveFlowStore } from "../../../controllers/API";
import { FlowType } from "../../../types/flow";
import { FlowComponent } from "../../../types/store";
import cloneFLowWithParent from "../../../utils/storeUtils";
export const MarketCardComponent = ({
data,
onAdd,
}: {
data: FlowComponent;
onAdd: () => void;
}) => {
export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
const [added, setAdded] = useState(false);
const { addFlow } = useContext(TabsContext);
const flowData = useRef<FlowType>();
function handleAdd() {
getComponent(data.id).then(
(res) => {
console.log(res);
const newFLow = cloneFLowWithParent(
res.data,
res.id,
data.is_component
);
flowData.current = newFLow;
console.log(newFLow);
saveFlowStore(newFLow)
.then(() => setAdded(true))
.catch((error) => {
console.error(error);
});
},
(error) => {
console.log(error);
}
);
}
function handleInstall() {
addFlow(true, flowData.current!);
}
function handleFork(flowId: string, is_component: boolean) {
getComponent(flowId).then(
(res) => {
console.log(res);
const newFLow = cloneFLowWithParent(res.data, res.id, is_component);
console.log(newFLow);
saveFlowStore(newFLow).then(
(res) => {
console.log(JSON.parse(JSON.stringify(res)));
addFlow(true, newFLow);
},
(error) => {
console.error(error);
}
);
},
(error) => {
console.log(error);
}
);
}
return (
<Card className="group relative flex cursor-pointer flex-col justify-between overflow-hidden transition-all hover:shadow-md">
@ -97,11 +146,10 @@ export const MarketCardComponent = ({
className="whitespace-nowrap "
onClick={() => {
if (!added) {
setAdded(true);
handleAdd();
} else {
//download
handleInstall();
}
onAdd();
}}
>
<IconComponent

45
src/frontend/src/pages/StorePage/index.tsx
View file

@ -17,15 +17,9 @@ import { Switch } from "../../components/ui/switch";
import { alertContext } from "../../contexts/alertContext";
import { AuthContext } from "../../contexts/authContext";
import { TabsContext } from "../../contexts/tabsContext";
import {
getComponent,
getStoreComponents,
saveFlowStore,
searchComponent,
} from "../../controllers/API";
import { getStoreComponents, searchComponent } from "../../controllers/API";
import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
import { FlowComponent } from "../../types/store";
import cloneFLowWithParent from "../../utils/storeUtils";
import { cn } from "../../utils/utils";
import { MarketCardComponent } from "./components/market-card";
export default function StorePage(): JSX.Element {
@ -83,28 +77,6 @@ export default function StorePage(): JSX.Element {
const loadingWithApiKey = loading;
const renderComponents = !loading;
function handleFork(flowId: string, is_component: boolean) {
getComponent(flowId).then(
(res) => {
console.log(res);
const newFLow = cloneFLowWithParent(res.data, res.id, is_component);
console.log(newFLow);
saveFlowStore(newFLow).then(
(res) => {
console.log(JSON.parse(JSON.stringify(res)));
addFlow(true, newFLow);
},
(error) => {
console.error(error);
}
);
},
(error) => {
console.log(error);
}
);
}
return (
<>
<Header />
@ -223,21 +195,8 @@ export default function StorePage(): JSX.Element {
filteredCategories.has(f.is_component)
)
.map((item, idx) => (
<MarketCardComponent
key={idx}
data={item}
onAdd={() => {
handleFork(item.id, item.is_component);
}}
/>
<MarketCardComponent key={idx} data={item} />
))}
<button
onClick={() => {
handleFork(data[0].id, data[0].is_component);
}}
>
test
</button>
</div>
</div>
)}