feat: ColumnList and cardTemplateList with new APIs (#73)

krateoplatformops · May 30, 2024 · 9c5d026 · 9c5d026
1 parent 4676f97
commit 9c5d026
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 94 deletions.
diff --git a/public/config/config.json b/public/config/config.json
@@ -1,6 +1,6 @@
 {
  "api": {
- "BFF_API_BASE_URL": "http://4.209.35.224:8081",
- "AUTHN_API_BASE_URL": "http://4.209.35.212:8082"
+ "BFF_API_BASE_URL": "http://4.207.38.112:8081",
+ "AUTHN_API_BASE_URL": "http://4.207.38.111:8082"
  }
-}
+}
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
diff --git a/...nts/Widgets/CardTemplate/CardTemplate.tsx → ...ets/CardTemplateList/CardTemplateList.tsx b/...nts/Widgets/CardTemplate/CardTemplate.tsx → ...ets/CardTemplateList/CardTemplateList.tsx
@@ -9,6 +9,11 @@ import { useEffect } from "react";
 import useCatchError from "../../../utils/useCatchError";
 // import { useNavigate } from "react-router-dom";
 
+const CardTemplateList = (props) => {
+ return(
+ props.items?.map(item => <CardTemplate id={item.metadata.uid} key={item.metadata.uid} actions={item.status.content.actions} {...item.status?.content[0]} />)
+ );
+}
 
 const CardTemplate = (props) => {
  const {id, icon, color, title, status, date, content, tags, actions} = props;
@@ -88,4 +93,4 @@ const CardTemplate = (props) => {
  )
 }
 
-export default CardTemplate;
+export default CardTemplateList;
diff --git a/...s/Widgets/CardTemplate/styles.module.scss → ...dgets/CardTemplateList/styles.module.scss b/...s/Widgets/CardTemplate/styles.module.scss → ...dgets/CardTemplateList/styles.module.scss
diff --git a/src/components/Widgets/index.ts b/src/components/Widgets/index.ts
@@ -3,7 +3,6 @@ import ChartLine from "./ChartLine/ChartLine";
 import ChartBars from "./ChartBars/ChartBars";
 import ChartMultipleBars from "./ChartMultipleBars/ChartMultipleBars";
 import ChartFlow from "./ChartFlow/ChartFlow";
-import CardTemplate from "./CardTemplate/CardTemplate";
 import FormGenerator from "./FormGenerator/FormGenerator";
 import Button from "./Button/Button";
 import DataList from "./DataList/DataList";
@@ -14,14 +13,15 @@ import Paragraph from "./Paragraph/Paragraph";
 import DynamicContent from "./DynamicContent/DynamicContent";
 import EditableContent from "./EditableContent/EditableContent";
 import EditableList from "./EditableList/EditableList";
+import CardTemplateList from "./CardTemplateList/CardTemplateList";
 
 const widgets = {
  "ChartPie": ChartPie,
  "ChartLine": ChartLine,
  "ChartBars": ChartBars,
  "ChartMultipleBars": ChartMultipleBars,
  "ChartFlow": ChartFlow,
- "CardTemplate": CardTemplate,
+ "CardTemplateList": CardTemplateList,
  "FormGenerator": FormGenerator,
  "Button": Button,
  "DataList": DataList,

diff --git a/src/features/app/appApiSlice.ts b/src/features/app/appApiSlice.ts
@@ -5,7 +5,7 @@ export const appApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
  getAppData: builder.query({
  query: (clientID) => ({
- url: `${getBaseUrl()}appData/${clientID}`,
+ url: `${getBaseUrl()}/appData/${clientID}`,
  headers: getHeaders(),
  }),
  }),

diff --git a/src/hooks/useParseData.tsx b/src/hooks/useParseData.tsx
@@ -20,9 +20,9 @@ const useParseData = () => {
  const renderComponent = (data, index) => {
  switch (data.kind) {
  case "Row":
- return <Row key={data.metadata.uid} className={styles.row}>{ getContent(data.status.content.items, index+1) }</Row>
- case "Column":
- return <Col key={data.metadata.uid} { ...getColProps(data.spec.app.props.width) } className={styles.col}>{ getContent(data.status.content.items, index+1) }</Col>
+ return <Row key={data.metadata.uid} className={styles.row}>{ getContent(data.status.content, index+1) }</Row>
+ case "ColumnList":
+ return data.items.map(item => <Col key={item.metadata.uid} { ...getColProps(item.spec.app.props.width) } className={styles.col}>{ getContent(item.status.content.kind ? item.status.content : item.status.content.items, index+1) }</Col>)
  case "Tabs":
  return <Tabs key={data.metadata.uid} className={styles.tabs}>{ getContent(data.status.content.items, index+1) }</Tabs>
  case "TabPane":
@@ -31,16 +31,12 @@ const useParseData = () => {
  return <Toolbar key={data.metadata.uid}>{ getContent(data.status.content.items, index+1) }</Toolbar>
  default:
  if (data.apiVersion?.indexOf("widgets") === 0) {
- if (data.status?.content) { // eg: CardTemplate (currently)
-  const Component = widgets[data.kind];
+ const Component = widgets[data.kind];
+ if (data.status?.content) {
  return data.status.content.map((el, i) => <Component id={`${data.metadata.uid}_${i}`} key={`widget_${data.metadata.uid}_${i}`} actions={data.status.actions} {...el} />)
  } else if (data.items) { // eg: CardTemplateList
- return data.items.map((el) => {
- const Component = widgets[el.kind];
- return <Component id={el.metadata.uid} key={el.metadata.uid} actions={el.status.content.actions} {...el} />
- })
+ return <Component id={data.metadata.uid || crypto.randomUUID()} key={data.metadata.uid || crypto.randomUUID()} items={data.items} />
  } else {
- const Component = widgets[data.kind];
  return <Component id={data.metadata.uid} key={`widget_${data.metadata.uid}`} actions={data.status?.actions} {...data.spec.app.props} />
  }
  } else {