Merge branch 'arfamomin/imp-82-casescreen-bugs' of https://github.com…

…/calblueprint/impact-fund into arfamomin/imp-82-casescreen-bugs
calblueprint · Apr 24, 2024 · 0d1dab4 · 0d1dab4
2 parents ab9ce18 + 49a6439
commit 0d1dab4
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 42 deletions.
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/src/Components/PressableRequirement/styles.ts b/src/Components/PressableRequirement/styles.ts
@@ -5,13 +5,13 @@ import { colors } from '../../styles/colors';
 export default StyleSheet.create({
   requirementContainer: {
     flexDirection: 'row',
-    paddingTop: 20,
     columnGap: 20,
-    paddingHorizontal: '6%',
+    paddingHorizontal: 25,
+    paddingVertical: 20,
   },
   innerRequirementBox: {
     flex: 1,
-    paddingBottom: 20,
+    justifyContent: 'center',
   },
   buttonBase: {
     flexDirection: 'row',

diff --git a/src/Components/StatusUpdatesBar/StatusUpdatesBar.tsx b/src/Components/StatusUpdatesBar/StatusUpdatesBar.tsx
@@ -25,19 +25,17 @@ export default function StatusUpdatesBar({
         router.push({ pathname: `AllCases/Updates/${caseUid}` });
       }}
     >
-      <View style={styles.container}>
-        <View style={styles.topContainer}>
-          <Text style={styles.statusText}>Case Status:</Text>
+      <View style={styles.textContainer}>
+        <Text style={styles.statusText}>Case Status:</Text>
 
+        <View style={styles.updatesContainer}>
           <Text style={styles.buttonText}>View all updates</Text>
-          <RightCaret />
+          <RightCaret style={styles.icon} />
         </View>
+      </View>
 
-        <View style={[styles.statusContainer, statusColor.background]}>
-          <Text style={[styles.statusTextColor, statusColor.text]}>
-            {status}
-          </Text>
-        </View>
+      <View style={[styles.statusContainer, statusColor.background]}>
+        <Text style={[styles.statusTextColor, statusColor.text]}>{status}</Text>
       </View>
     </TouchableOpacity>
   );

diff --git a/src/Components/StatusUpdatesBar/styles.ts b/src/Components/StatusUpdatesBar/styles.ts
@@ -2,17 +2,14 @@ import { StyleSheet } from 'react-native';
 
 import { colors } from '../../styles/colors';
 export default StyleSheet.create({
-  container: {
-    // height: ,
+  updatesButton: {
     width: '100%',
     alignItems: 'center',
     flexDirection: 'column',
     justifyContent: 'space-between',
     backgroundColor: colors.white,
-    // paddingHorizontal: 20,
     padding: 16,
     rowGap: 10,
-
     borderWidth: 0.5,
     borderRadius: 5,
     borderStyle: 'solid',
@@ -24,7 +21,7 @@ export default StyleSheet.create({
     shadowRadius: 0.05,
     elevation: 1,
   },
-  topContainer: {
+  textContainer: {
     width: '100%',
     height: 31,
     flexDirection: 'row',
@@ -34,11 +31,6 @@ export default StyleSheet.create({
     borderBottomWidth: 0.5,
     borderBottomColor: colors.midGrey,
   },
-  updatesButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    columnGap: 16,
-  },
   statusContainer: {
     height: 29,
     width: '100%',
@@ -49,6 +41,11 @@ export default StyleSheet.create({
     borderWidth: 0.3,
     borderRadius: 5,
   },
+  updatesContainer: {
+    flexDirection: 'row',
+
+    columnGap: 10,
+  },
   statusText: {
     fontSize: 20,
     lineHeight: 21,
@@ -68,4 +65,7 @@ export default StyleSheet.create({
     fontWeight: '300',
     lineHeight: 21,
   },
+  icon: {
+    marginTop: 5,
+  },
 });
diff --git a/src/app/(BottomTabNavigation)/AllCases/utils.ts b/src/app/(BottomTabNavigation)/AllCases/utils.ts
@@ -5,7 +5,14 @@ import {
   getCaseIdsFromUserId,
   getCasesByIds,
 } from '../../../supabase/queries/cases';
-import { Case, UserUid } from '../../../types/types';
+import {
+  Case,
+  GreenStatusOptions,
+  YellowStatusOptions,
+  RedStatusOptions,
+  UserUid,
+  StatusOptions,
+} from '../../../types/types';
 
 /**
  * Fetches all Cases associated with a specific `userUid` from supabase. Formats Case data and returns an array of `Case` objects.
@@ -36,7 +43,12 @@ export async function fetchAllCases(userUid: UserUid): Promise<Case[]> {
  * @returns readable date string
  */
 export function formatDate(dateObject: Date) {
-  const date = new Date(dateObject);
+  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const date = new Date(
+    dateObject.toLocaleString('en-US', {
+      timeZone: userTimeZone,
+    }),
+  );
   const months = [
     'Jan',
     'Feb',
@@ -51,19 +63,16 @@ export function formatDate(dateObject: Date) {
     'Nov',
     'Dec',
   ];
-  const monthName = months[date.getUTCMonth()];
-  return `${monthName} ${date.getUTCDate()}, ${date.getUTCFullYear()}`;
+  const monthName = months[date.getMonth()];
+  return `${monthName} ${date.getDate()}, ${date.getFullYear()}`;
 }
 
 export function getStatusColor(status: string) {
-  if (
-    status === 'In Progress' ||
-    status === 'New Case' ||
-    status === 'Settled' ||
-    status === 'Appeal' ||
-    status === 'Payment Processing' ||
-    status === 'Payment Distributed'
-  ) {
+  if (!StatusOptions.includes(status)) {
+    throw new Error(`Invalid status: ${status}`);
+  }
+
+  if (Object.values(GreenStatusOptions).includes(status)) {
     return {
       background: {
         backgroundColor: colors.lightGreen,
@@ -72,7 +81,7 @@ export function getStatusColor(status: string) {
       },
       text: { color: colors.darkGreen },
     };
-  } else if (status === 'Pending') {
+  } else if (Object.values(YellowStatusOptions).includes(status)) {
     return {
       background: {
         backgroundColor: colors.lightYellow,
@@ -81,7 +90,7 @@ export function getStatusColor(status: string) {
       },
       text: { color: colors.darkYellow },
     };
-  } else if (status === 'Action Required') {
+  } else if (Object.values(RedStatusOptions).includes(status)) {
     return {
       background: {
         backgroundColor: colors.lightRed,

diff --git a/src/types/types.tsx b/src/types/types.tsx
@@ -88,3 +88,26 @@ export interface Update {
   summary: string;
   lawFirm: string;
 }
+
+export enum GreenStatusOptions {
+  'In Progress',
+  'New Case',
+  'Settled',
+  'Appeal',
+  'Payment Processing',
+  'Payment Distributed',
+}
+
+export enum YellowStatusOptions {
+  'Pending',
+}
+
+export enum RedStatusOptions {
+  'Action Required',
+}
+
+export const StatusOptions: string[] = [
+  ...(Object.values(GreenStatusOptions) as string[]),
+  ...(Object.values(YellowStatusOptions) as string[]),
+  ...(Object.values(RedStatusOptions) as string[]),
+];