Merge pull request #5 from atlantabitdevs/feature/family-accounts

Added family accounts

frontend/src/App.js

@@ -23,28 +23,27 @@ const Child = {};
 function App() {
   const [menuActive, setMenuActive] = React.useState(false)
 
+  const toggleMenu = () => {
+    setMenuActive(!menuActive)
+  }
+
   return (
     <div className="app">
       <nav className={"fixed bg-fam-bg-dark h-screen w-screen z-50 p-8 space-y-8 transition-all " + (menuActive ? 'right-0' : 'right-full')}>
         <p className="text-4xl lowercase font-display drop-shadow-xl font-[900]">Tribe</p>
         <ul className="space-y-8 text-lg">
           <li>
-            <Link className="flex flex-row items-center space-x-2" to="/">
+            <Link className="flex flex-row items-center space-x-2" to="/" onClick={toggleMenu}>
               <ChartSquareBarIcon className="w-8 h-8 inline" /> <span>Dashboard</span>
             </Link>
           </li>
           <li>
-            <Link className="flex flex-row items-center space-x-2" to="/family/BitDevs">
-              <ContactsIcon className="w-8 h-8 inline" /> <span>BitDevs Family</span>
-            </Link>
-          </li>
-          <li>
-            <Link className="flex flex-row items-center space-x-2" to="/">
+            <Link className="flex flex-row items-center space-x-2" to="/family" onClick={toggleMenu}>
               <ContactsIcon className="w-8 h-8 inline" /> <span>Accounts</span>
             </Link>
           </li>
           <li>
-            <Link className="flex flex-row items-center space-x-2" to="/">
+            <Link className="flex flex-row items-center space-x-2" to="/" onClick={toggleMenu}>
               <GearIcon className="w-8 h-8 inline" /> <span>Settings</span>
             </Link>
           </li>
@@ -60,11 +59,6 @@ function App() {
         <Route path="invite" element={<Invite />} />
         <Route path="new-family" element={<NewFamily />} />
         <Route path="/" element={<Home />}>
-          <Route path="family" element={<Family />}>
-            <Route path=":family" element={<Accounts />}>
-              <Route path=":account" element={<Account />} />
-            </Route>
-          </Route>
           <Route
             path="*"
             element={
@@ -74,6 +68,8 @@ function App() {
             }
           />
         </Route>
+        <Route path="family" element={<Family />} />
+        <Route path="family/:account" element={<Account />} />
       </Routes>
     </div>
   );

frontend/src/index.css

@@ -23,4 +23,12 @@ h1, h2 {
 
 .tile {
     @apply rounded-lg bg-fam-bg-dark p-8 drop-shadow-lg my-4 border border-fam-teal border-solid space-y-4 flex flex-col;
+}
+
+.slots {
+    @apply rounded-lg bg-fam-bg-dark drop-shadow-lg my-4 border border-fam-teal border-solid flex flex-col;
+}
+
+.slots *:last-child {
+    @apply border-b-0;
 }

frontend/src/routes/Account.js

@@ -1,15 +1,166 @@
 import React from "react";
-import { useParams } from "react-router-dom";
+import {Link, useParams} from "react-router-dom";
+import {ArrowDownIcon, ArrowUpIcon} from '@bitcoin-design/bitcoin-icons-react/filled';
 // unique account within family page
 const Account = () => {
-  const { family, account } = useParams();
+  const [family, setFamily] = React.useState([
+    {
+      name: 'Jerry',
+      photo: '/father.jpg',
+      balance: '1,000,000',
+      id: 'jerry'
+    },
+    {
+      name: 'Jennifer',
+      photo: '/mother.jpg',
+      balance: '999,000',
+      id: 'jennifer'
+    },
+    {
+      name: 'Jacob',
+      photo: '/child.jpg',
+      balance: '2,350',
+      id: 'jacob'
+    },
+    {
+      name: 'Gertrude',
+      photo: '/grandmother.jpg',
+      balance: '90,000,023',
+      id: 'gertrude'
+    }
+  ])
+
+  const {account} = useParams()
+
+  const [accountInfo, setAccountInfo] = React.useState({
+    name: '· · ·',
+    photo: '/father.jpg',
+    balance: '- - -',
+    id: 'placeholder'
+  })
+
+  const [transactions, setTransactions] = React.useState([
+    {
+      counterparty: 'Merchant',
+      memo: 'Purchase at store',
+      date: '2022-06-01 14:55',
+      amount: 20000,
+      direction: 'send'
+    },
+    {
+      counterparty: 'Merchant',
+      memo: 'Refund at store',
+      date: '2022-06-01 14:55',
+      amount: 30000,
+      direction: 'receive'
+    },
+    {
+      counterparty: 'Merchant',
+      memo: 'Purchase at store',
+      date: '2022-06-01 14:55',
+      amount: 10000,
+      direction: 'send'
+    },
+    {
+      counterparty: 'Merchant',
+      memo: 'Purchase at store',
+      date: '2022-06-01 14:55',
+      amount: 20000,
+      direction: 'send'
+    },
+    {
+      counterparty: 'Merchant',
+      memo: 'Refund at store',
+      date: '2022-06-01 14:55',
+      amount: 30000,
+      direction: 'receive'
+    },
+    {
+      counterparty: 'Merchant',
+      memo: 'Purchase at store',
+      date: '2022-06-01 14:55',
+      amount: 10000,
+      direction: 'send'
+    },
+    {
+      counterparty: 'Merchant',
+      memo: 'Purchase at store',
+      date: '2022-06-01 14:55',
+      amount: 20000,
+      direction: 'send'
+    },
+    {
+      counterparty: 'Merchant',
+      memo: 'Refund at store',
+      date: '2022-06-01 14:55',
+      amount: 30000,
+      direction: 'receive'
+    },
+    {
+      counterparty: 'Merchant',
+      memo: 'Purchase at store',
+      date: '2022-06-01 14:55',
+      amount: 10000,
+      direction: 'send'
+    },
+  ])
+
+  React.useEffect(()=> {
+
+    let currentAccountIndex = family.findIndex((element) => element.id === account)
+    console.log(currentAccountIndex)
+    console.log(family[currentAccountIndex])
+
+    setAccountInfo(family[currentAccountIndex])
+
+  })
 
   return (
-    <div>
-      <h1>Account Page</h1>
-      <h2>
-        Welcome {account} from {family} family!
-      </h2>
+    <div className="min-h-screen">
+      <div className="default-bg"></div>
+      <div className="min-w-screen min-h-screen p-8 flex flex-col justify-center z-10 relative">
+        <h1 className="text-2xl">Account Activity</h1>
+
+        <div className="slots">
+          <div className="flex flex-row space-x-8 justify-center items-center border-solid border-fam-teal border-b w-full p-4">
+            <img src={accountInfo.photo} alt={accountInfo.name} className="rounded-full w-16 h-16" />
+            <div className="grow">
+              <h2>{accountInfo.name}</h2>
+              <p>{accountInfo.balance} sats</p>
+            </div>
+          </div>
+
+          {transactions.map((tx, index)=>{
+            return(
+              <div className="flex flex-row space-x-8 justify-center items-center border-solid border-fam-teal border-b w-full p-4">
+                <div>
+
+
+                  {tx.direction === 'send' ?
+                    <span className="rounded-full bg-blue-500 inline-block p-2">
+                      <ArrowUpIcon className="w-8 h-8" />
+                    </span>
+                  :
+                    <span className="rounded-full bg-green-500 inline-block p-2">
+                      <ArrowDownIcon className="w-8 h-8" />
+                    </span>
+                  }
+                </div>
+                <div>
+                  <h3>{tx.counterparty}</h3>
+                  <p>{tx.date}</p>
+                  <p>{tx.memo}</p>
+                </div>
+                <div>
+                  <p>{tx.amount}</p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+
+      </div>
     </div>
   );
 };

frontend/src/routes/Family.js

@@ -1,10 +1,58 @@
-import { Outlet } from "react-router-dom";
+import {Link, Outlet} from "react-router-dom";
+import Button from '../components/Button';
+import {PlusIcon} from '@heroicons/react/solid';
+import React from 'react';
 //generic Family Page
 const Family = () => {
+  const [family, setFamily] = React.useState([
+    {
+      name: 'Jerry',
+      photo: '/father.jpg',
+      balance: '1,000,000',
+      id: 'jerry'
+    },
+    {
+      name: 'Jennifer',
+      photo: '/mother.jpg',
+      balance: '999,000',
+      id: 'jennifer'
+    },
+    {
+      name: 'Jacob',
+      photo: '/child.jpg',
+      balance: '2,350',
+      id: 'jacob'
+    },
+    {
+      name: 'Gertrude',
+      photo: '/grandmother.jpg',
+      balance: '90,000,023',
+      id: 'gertrude'
+    }
+  ])
+
   return (
-    <div>
-      <h3>Private Family Page</h3>
-      <Outlet />
+    <div className="min-h-screen">
+      <div className="default-bg"></div>
+      <div className="min-w-screen min-h-screen p-8 flex flex-col justify-center z-10 relative">
+        <h1 className="text-2xl">Malone Family</h1>
+
+        <div className="slots">
+        {family.map((member, index) => {
+          return (
+            <Link to={'/family/' + member.id} className="flex flex-row space-x-8 justify-center items-center border-solid border-fam-teal border-b w-full p-4">
+              <img src={member.photo} alt={member.name} className="rounded-full w-16 h-16" />
+              <div className="grow">
+                <h2>{member.name}</h2>
+                <p>{member.balance} sats</p>
+              </div>
+            </Link>
+          )
+        })}
+        </div>
+
+
+      </div>
     </div>
   );
 };