From 3247967f24caa4208b69a2ef7109cd9fe8c0e909 Mon Sep 17 00:00:00 2001
From: narayansharma-21 <97.sharman@gmail.com>
Date: Mon, 22 Jan 2024 21:33:54 -0500
Subject: [PATCH 1/2] feat(metro.config.js): Implemented functionality to allow
 for SVG input

---
 client/App.tsx                | 20 ++++++++++++--------
 client/assets/Union.svg       |  3 +++
 client/metro.config.js        | 18 +++++++++++++++---
 client/package.json           |  3 ++-
 client/types/declaration.d.ts |  6 ++++++
 package.json                  |  5 +++++
 6 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 client/assets/Union.svg
 create mode 100644 client/types/declaration.d.ts
 create mode 100644 package.json

diff --git a/client/App.tsx b/client/App.tsx
index b10d304..b69a69f 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -1,21 +1,25 @@
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { getAllMedications } from './services/medication';
+import UnionSvg from './assets/Union.svg';
 
 export default function App() {
   const [medications, setMedications] = React.useState<Medication[]>();
+
   React.useEffect(() => {
     getAllMedications().then((med) => setMedications(med));
-  }, []);
 
+  }, []);
+  // Adding the UnionSvg component here to show that it's able to be displayed here
   return (
     <View className="flex-1 items-center w-[100vw] justify-center bg-white">
-      {medications &&
-        medications.map((med, index) => (
-          <Text key={index} className="pb-2">
-            {`Name: ${med.medication_name} id: ${med.medication_id}`}
-          </Text>
-        ))}
-    </View>
+    {medications &&
+      medications.map((med, index) => (
+        <Text key={index} className="pb-2">
+          {`Name: ${med.medication_name} id: ${med.medication_id}`}
+        </Text>
+      ))}
+      <UnionSvg/>
+  </View>
   );
 }
diff --git a/client/assets/Union.svg b/client/assets/Union.svg
new file mode 100644
index 0000000..f4d58d2
--- /dev/null
+++ b/client/assets/Union.svg
@@ -0,0 +1,3 @@
+<svg width="431" height="256" viewBox="0 0 431 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M215.5 255.897V0C96.4824 0.000244141 0 57.2847 0 127.949C23.3086 139.014 42.1699 158.166 62.0303 178.332C98.5361 215.401 138.417 255.897 215.5 255.897ZM368.97 178.332C332.464 215.401 292.583 255.897 215.5 255.897V0C334.518 0.000244141 431 57.2847 431 127.949C407.691 139.014 388.83 158.166 368.97 178.332Z" fill="#022B3A"/>
+</svg>
diff --git a/client/metro.config.js b/client/metro.config.js
index 948c810..fc5e494 100644
--- a/client/metro.config.js
+++ b/client/metro.config.js
@@ -1,6 +1,18 @@
 const { getDefaultConfig } = require('@expo/metro-config');
 
-const defaultConfig = getDefaultConfig(__dirname);
-defaultConfig.resolver.sourceExts.push('cjs');
+module.exports = (() => {
+  const config = getDefaultConfig(__dirname);
+  config.resolver.sourceExts.push('cjs');
+  const { transformer, resolver } = config;
 
-module.exports = defaultConfig;
+  config.transformer = {
+    ...transformer,
+    babelTransformerPath: require.resolve('react-native-svg-transformer')
+  };
+  config.resolver = {
+    ...resolver,
+    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
+    sourceExts: [...resolver.sourceExts, 'svg']
+  };
+  return config;
+})();
diff --git a/client/package.json b/client/package.json
index bfc1a9f..4194a80 100644
--- a/client/package.json
+++ b/client/package.json
@@ -18,8 +18,9 @@
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
-    "react-native-safe-area-context": "4.6.3"
+    "react-native-svg-transformer": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/client/types/declaration.d.ts b/client/types/declaration.d.ts
new file mode 100644
index 0000000..9038ebf
--- /dev/null
+++ b/client/types/declaration.d.ts
@@ -0,0 +1,6 @@
+declare module "*.svg" {
+    import React from "react";
+    import { SvgProps } from "react-native-svg";
+    const content: React.FC<SvgProps>;
+    export default content;
+  }
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..5a66f75
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-native-svg": "^14.1.0"
+  }
+}

From 99e8fbde9f781a2fcfdda373b275c37a26ef4fde Mon Sep 17 00:00:00 2001
From: narayansharma-21 <97.sharman@gmail.com>
Date: Tue, 23 Jan 2024 08:38:32 -0500
Subject: [PATCH 2/2] style(package.json): removed package.json file

Was redundant
---
 client/App.tsx | 2 --
 package.json   | 5 -----
 2 files changed, 7 deletions(-)
 delete mode 100644 package.json

diff --git a/client/App.tsx b/client/App.tsx
index b69a69f..2fdfb75 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -5,10 +5,8 @@ import UnionSvg from './assets/Union.svg';
 
 export default function App() {
   const [medications, setMedications] = React.useState<Medication[]>();
-
   React.useEffect(() => {
     getAllMedications().then((med) => setMedications(med));
-
   }, []);
   // Adding the UnionSvg component here to show that it's able to be displayed here
   return (
diff --git a/package.json b/package.json
deleted file mode 100644
index 5a66f75..0000000
--- a/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "react-native-svg": "^14.1.0"
-  }
-}