From f56998d128ce15283be8c22e2f547c812f6d82a1 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Thu, 17 Oct 2024 17:09:37 -0700
Subject: [PATCH] rendering mobile contacts header

---
 .../mobile/src/contacts/Contacts.styled.ts    | 48 +++++++++++++++++++
 .../mobile/src/contacts/useContacts.hook.ts   | 20 ++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 app/client/mobile/src/contacts/Contacts.styled.ts
 create mode 100644 app/client/mobile/src/contacts/useContacts.hook.ts

diff --git a/app/client/mobile/src/contacts/Contacts.styled.ts b/app/client/mobile/src/contacts/Contacts.styled.ts
new file mode 100644
index 00000000..4d613584
--- /dev/null
+++ b/app/client/mobile/src/contacts/Contacts.styled.ts
@@ -0,0 +1,48 @@
+import {StyleSheet} from 'react-native';
+import {Colors} from '../constants/Colors';
+
+export const styles = StyleSheet.create({
+  contacts: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+  },
+  header: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingRight: 8,
+    paddingLeft: 8,
+    width: '100%',
+  },
+  sort: {
+    borderRadius: 4,
+  },
+  inputSurface: {
+    flexGrow: 1,
+    height: 40,
+    marginRight: 8,
+    marginLeft: 4,
+    display: 'flex',
+  },
+  input: {
+    flexGrow: 1,
+    backgroundColor: 'transparent',
+    paddingTop: 0,
+    paddingBottom: 0,
+    display: 'flex',
+    height: 40,
+    maxHeight: 40,
+    borderRadius: 8,
+  },
+  inputUnderline: {
+    display: 'none',
+  },
+  icon: {
+    backgroundColor: 'transparent',
+  },
+});
diff --git a/app/client/mobile/src/contacts/useContacts.hook.ts b/app/client/mobile/src/contacts/useContacts.hook.ts
new file mode 100644
index 00000000..25868d49
--- /dev/null
+++ b/app/client/mobile/src/contacts/useContacts.hook.ts
@@ -0,0 +1,20 @@
+import {useEffect, useState, useContext, useRef} from 'react';
+import {AppContext} from '../context/AppContext';
+import {DisplayContext} from '../context/DisplayContext';
+import {ContextType} from '../context/ContextType';
+
+export function useContacts() {
+  const display = useContext(DisplayContext) as ContextType;
+  const app = useContext(AppContext) as ContextType;
+  const debounce = useRef(setTimeout(() => {}, 0));
+
+  const [state, setState] = useState({
+    strings: display.state.strings,
+  });
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+