Shared folder ts refactor

Frontend/package.json

@@ -53,13 +53,18 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.8",
+    "@types/react-native": "^0.73.0",
     "babel-plugin-inline-dotenv": "^1.7.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "cp-cli": "^2.0.0",
     "eslint": "^8.56.0",
     "eslint-config-react-app": "^7.0.1",
     "jest": "^29.7.0",
+    "tsc-alias": "^1.8.10",
+    "typescript": "^4.9.5",
     "webpack": "^5.92.1"
   },
   "version": "1.0.0",

Frontend/shared/.env

@@ -1,2 +1,2 @@
-REACT_APP_API_DOMAIN=api.speedcartapp.com
-REACT_APP_API_PORT=8443
+API_DOMAIN=api.speedcartapp.com
+API_PORT=8443

Frontend/shared/.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+src/constants/config.json

Frontend/shared/generate-config.js

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const path = require('path');
+const dotenv = require('dotenv');
+
+// Load environment variables from the .env file
+dotenv.config();
+
+const config = {
+  API_DOMAIN: process.env.API_DOMAIN,
+  API_PORT: process.env.API_PORT,
+};
+
+// Write the config to a file in the shared directory
+fs.writeFileSync(path.resolve(__dirname, './src/constants/config.json'), JSON.stringify(config, null, 2));
+console.log('Config file generated successfully.');

Frontend/shared/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "./dist/index.js",
   "scripts": {
-    "build": "babel src --out-dir dist && echo Success"
+    "build": "node generate-config.js && tsc && tsc-alias && echo Success"
   },
   "keywords": [],
   "author": "",

Frontend/shared/src/constants/BaseUrl.ts

@@ -0,0 +1,8 @@
+// src/constants/config/config.ts
+import config from './config.json';
+
+const API_DOMAIN = config.API_DOMAIN;
+const API_PORT = config.API_PORT;
+
+// This can be reused for all backend interactions
+export const BASE_URL: string = `https://${API_DOMAIN}:${API_PORT}`;

Frontend/shared/src/constants/index.d.ts

@@ -0,0 +1,5 @@
+// src/constants/index.d.ts
+
+declare module '@constants' {
+    export const BASE_URL;
+}

Frontend/shared/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './BaseUrl';

Frontend/shared/src/functions/createGroceryItem/createGroceryItem.ts

@@ -0,0 +1,13 @@
+import { BASE_URL } from '@constants';
+import { GroceryItem } from '@types';
+
+export const createGroceryItem = async (item: GroceryItem) => {
+    return fetch(`${BASE_URL}/grocery-items`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify(item)
+    });
+};

Frontend/shared/src/functions/createShareLink/createShareLink.js → Frontend/shared/src/functions/createShareLink/createShareLink.ts

@@ -1,6 +1,6 @@
-import { BASE_URL } from '@constants/config';
+import { BASE_URL } from '@constants';
 
-export const createShareLink = async (shareListId, permissions) => {
+export const createShareLink = async (shareListId: string, permissions: any) => {
     return fetch(`${BASE_URL}/share/${shareListId}`, {
         method: 'POST',
         headers: {

Frontend/shared/src/functions/createSharingPermissions/createSharingPermissions.js → Frontend/shared/src/functions/createSharingPermissions/createSharingPermissions.ts

@@ -1,6 +1,6 @@
-import { BASE_URL } from "@constants/config";
+import { BASE_URL } from '@constants';
 
-export const createSharingPermissions = async (token) => {
+export const createSharingPermissions = async (token: string) => {
     return fetch(`${BASE_URL}/share/${token}`, {
         method: 'GET',
         headers: {