📝 (endpoints.py): Add support for caching components to improve performance and reduce load on the server

📝 (setup.py): Change function create_or_update_starter_projects to be asynchronous to handle await calls
📝 (types.py): Add caching mechanism to function aget_all_components to improve performance and reduce redundant calls
📝 (main.py): Change call to create_or_update_starter_projects to be awaited to handle asynchronous operation
📝 (index.tsx): Add functionality to reload components in the menu bar to update component data dynamically
📝 (index.ts): Modify getAll function to accept a force_refresh parameter to force a refresh of data
📝 (typesStore.ts): Update getTypes function to accept a force_refresh parameter and pass it to the getAll function
📝 (index.ts): Update getTypes function in TypesStoreType to accept a force_refresh parameter
📝 (test_initial_setup.py): Update test_create_or_update_starter_projects to await the asynchronous function create_or_update_starter_projects

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -16,6 +16,7 @@ import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useTypesStore } from "../../../../stores/typesStore";
 import { cn } from "../../../../utils/utils";
 import IconComponent from "../../../genericIconComponent";
 import ShadTooltip from "../../../shadTooltipComponent";
@@ -34,6 +35,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const navigate = useNavigate();
   const isBuilding = useFlowStore((state) => state.isBuilding);
+  const getTypes = useTypesStore((state) => state.getTypes);
 
   function handleAddFlow(duplicate?: boolean) {
     try {
@@ -55,6 +57,12 @@ export const MenuBar = ({}: {}): JSX.Element => {
     }
   }
 
+  function handleReloadComponents() {
+    getTypes(true).then(() => {
+      setSuccessData({ title: "Components reloaded successfully" });
+    });
+  }
+
   function printByBuildStatus() {
     if (isBuilding) {
       return "Building...";
@@ -188,6 +196,18 @@ export const MenuBar = ({}: {}): JSX.Element => {
               )}
               <span className="absolute right-2 top-[0.4em]">Y</span>
             </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                handleReloadComponents();
+              }}
+              className="cursor-pointer"
+            >
+              <IconComponent
+                name="RefreshCcw"
+                className="header-menu-options"
+              />
+              Reload Components
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
         <FlowSettingsModal

src/frontend/src/controllers/API/index.ts

@@ -32,10 +32,13 @@ import {
 /**
  * Fetches all objects from the API endpoint.
  *
+ * @param {boolean} force_refresh - Whether to force a refresh of the data.
  * @returns {Promise<AxiosResponse<APIObjectType>>} A promise that resolves to an AxiosResponse containing all the objects.
  */
-export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
-  return await api.get(`${BASE_URL_API}all`);
+export async function getAll(
+  force_refresh: boolean = true
+): Promise<AxiosResponse<APIObjectType>> {
+  return await api.get(`${BASE_URL_API}all?force_refresh=${force_refresh}`);
 }
 
 const GITHUB_API_URL = "https://api.github.com";

src/frontend/src/stores/typesStore.ts

@@ -21,11 +21,11 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
   types: {},
   templates: {},
   data: {},
-  getTypes: () => {
+  getTypes: (force_refresh: boolean = false) => {
     return new Promise<void>(async (resolve, reject) => {
       const setLoading = useFlowsManagerStore.getState().setIsLoading;
       setLoading(true);
-      getAll()
+      getAll(force_refresh)
         .then((response) => {
           const data = response?.data;
           useAlertStore.setState({ loading: false });

src/frontend/src/types/zustand/types/index.ts

@@ -7,7 +7,7 @@ export type TypesStoreType = {
   setTemplates: (newState: {}) => void;
   data: APIDataType;
   setData: (newState: {}) => void;
-  getTypes: () => Promise<void>;
+  getTypes: (force_refresh?: boolean) => Promise<void>;
   ComponentFields: Set<string>;
   setComponentFields: (fields: Set<string>) => void;
   addComponentField: (field: string) => void;