chore: add react query library for API calls (#174)

package.json

@@ -33,14 +33,15 @@
 		"js-cookie": "^3.0.5",
 		"just-compare": "^2.3.0",
 		"long": "^5.2.3",
-		"nice-grpc-common": "^2.0.2",
 		"ms": "^2.1.3",
+		"nice-grpc-common": "^2.0.2",
 		"nice-grpc-web": "^3.3.2",
 		"protobufjs": "^7.2.5",
 		"react": "^18.2.0",
 		"react-beautiful-dnd": "^13.1.1",
 		"react-dom": "^18.2.0",
 		"react-error-boundary": "^4.0.10",
+		"react-query": "^3.39.3",
 		"react-resizable-panels": "^0.0.53",
 		"react-router-dom": "^6.14.0",
 		"react-window": "^1.8.9"

src/api/axios.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 const baseURL = import.meta.env.VITE_PARSEABLE_URL ?? '/';
 
-const instance = axios.create({ baseURL, validateStatus: () => true, withCredentials: true });
+const instance = axios.create({ baseURL, withCredentials: true });
 
 instance.interceptors.request.use(
 	(request) => {

src/api/logStream.ts

@@ -22,15 +22,15 @@ export const getLogStreamAlerts = (streamName: string) => {
 };
 
 export const putLogStreamAlerts = (streamName: string, data: any) => {
-	return Axios().put(LOG_STREAMS_ALERTS_URL(streamName), data);
+	return Axios().put(LOG_STREAMS_ALERTS_URL(streamName), JSON.parse(data));
 };
 
 export const getLogStreamRetention = (streamName: string) => {
 	return Axios().get(LOG_STREAMS_RETRNTION_URL(streamName));
 };
 
 export const putLogStreamRetention = (streamName: string, data: any) => {
-	return Axios().put(LOG_STREAMS_RETRNTION_URL(streamName), data);
+	return Axios().put(LOG_STREAMS_RETRNTION_URL(streamName), JSON.parse(data));
 };
 
 export const getLogStreamStats = (streamName: string) => {
@@ -39,4 +39,4 @@ export const getLogStreamStats = (streamName: string) => {
 
 export const deleteLogStream = (streamName: string) => {
 	return Axios().delete(DELETE_STREAMS_URL(streamName));
-}
+};

src/components/Mantine/theme.tsx

@@ -224,19 +224,30 @@ export const theme: MantineThemeOverride = {
 						color: colors.white[0],
 					},
 				};
-			}
+			},
 		},
-
 		PasswordInput: {
 			styles: ({ colors }) => {
 				return {
 					input: {
 						border: `${sizing.px} ${colors.gray[2]} solid`,
 						borderRadius: 'md',
-
 					},
 				};
-			}
-		}
+			},
+		},
+		Switch: {
+			styles: () => {
+				return {
+					track: {
+						border: 'none',
+						cursor: 'pointer',
+					},
+					thumb: {
+						border: 'none',
+					},
+				};
+			},
+		},
 	},
 };