Fix for mobile scrollable tables

README.md

@@ -59,10 +59,16 @@ To start up both the backend and the frontend, run the following:
 yarn start
 ```
 
-If you wish to change the endpoints between the backend and frontend, do so at:
+To manually check changes on a mobile device, please perform the following:
 
-- `backend/config.js`
-- `frontend/src/config.json`
+1. Find your internal IP by running `ipconfig` (Windows) or `ifconfig` (UNIX)
+
+2. In `frontend/src/config.js`, manually replace `localhost` with your internal IP
+3. After running `yarn start` with the updated endpoints, on your mobile device, navigate to `http://{internal_ip}:{frontend_port}`
+
+The reason this is necessary is because when your mobile device hits the frontend and attempts to perform any backend calls (logging in, fetching data), it would normally call `localhost`. Since your mobile device is not serving a backend locally, the calls fail. This modification to the endpoint ensures that the frontend hits the backend on your development machine, no matter where the frontend is being served.
+
+**HINT: Be sure not to commit these changes as the internal IP will not be the same between different machines.**
 
 ### Production
 

frontend/src/components/expensesTable.jsx

@@ -12,7 +12,6 @@ import ExpandedRow from './expenseTableExpandedRow';
 import ExpenseForm from './expenseForm';
 import DeleteForm from './deleteForm';
 
-import './expensesTable.css';
 import { Card, Table, Row, Col, Typography, Input } from 'antd';
 const { Title } = Typography;
 
@@ -150,29 +149,25 @@ class ExpensesTable extends Component {
   render() {
     return (
       <>
-        <Card
-          style={{ height: '100%' }}
-          bodyStyle={{
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            paddingBottom: '6px',
-          }}
-        >
+        <Card>
           <Row>
             <Col span={12}>
-              <Title level={4}>{this.props.title || 'Expenses'}</Title>
+              <Title id="expenses-month" level={4}>
+                {this.props.title || 'Expenses'}
+              </Title>
             </Col>
             <Col span={12}>
               <Input
+                id="expenses-search"
                 style={{ float: 'right', maxWidth: '300px' }}
                 placeholder="Search..."
                 onChange={this.handleSearchChange}
               />
             </Col>
           </Row>
-          <Row style={{ display: 'flex', flex: 1 }}>
+          <Row>
             <Table
+              id="expenses-table"
               dataSource={this.state.expenses}
               columns={this.getColumns()}
               pagination={{
@@ -183,7 +178,7 @@ class ExpensesTable extends Component {
                 showSizeChanger: false,
                 position: ['bottomCenter'],
               }}
-              scroll={{ x: false, y: '100%' }}
+              scroll={{ y: this.props.tableHeight * 0.6 }}
               onChange={this.handleTableChange}
               loading={this.state.loading}
               rowKey="_id"

frontend/src/containers/expenses/dashboard.jsx

@@ -21,6 +21,8 @@ import { Row, Col } from 'antd';
 class Dashboard extends Component {
   constructor(props) {
     super(props);
+    this.dashboardRef = React.createRef();
+    this.dashboardTopRowRef = React.createRef();
     this._isMounted = false;
     this.state = {
       update: this.props.update,
@@ -35,10 +37,26 @@ class Dashboard extends Component {
     this._isMounted = true;
     this.update();
     this.props.getGroups();
+    this.setState({ dashboardHeight: this.dashboardRef.current.clientHeight });
+    this.setState({
+      topRowHeight: this.dashboardTopRowRef.current.clientHeight,
+    });
+    window.addEventListener('resize', () => {
+      this.setState({
+        dashboardHeight: this.dashboardRef?.current?.clientHeight,
+        topRowHeight: this.dashboardTopRowRef?.current?.clientHeight,
+      });
+    });
   }
 
   componentWillUnmount() {
     this._isMounted = false;
+    window.removeEventListener('resize', () => {
+      this.setState({
+        dashboardHeight: this.dashboardRef?.current?.clientHeight,
+        topRowHeight: this.dashboardTopRowRef?.current?.clientHeight,
+      });
+    });
   }
 
   componentDidUpdate() {
@@ -70,16 +88,26 @@ class Dashboard extends Component {
     return (
       <>
         <div
+          id="dashboard"
+          ref={this.dashboardRef}
           style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
         >
-          <Row gutter={[16, 16]} style={{}}>
-            <Col xs={{ span: 24, order: 1 }} md={{ span: 12, order: 0 }}>
+          <Row ref={this.dashboardTopRowRef} gutter={[16, 16]} style={{}}>
+            <Col
+              id="new-expense-column"
+              xs={{ span: 24, order: 1 }}
+              md={{ span: 12, order: 0 }}
+            >
               <NewExpense
                 categories={this.props.categories}
                 groups={this.props.groups}
               />
             </Col>
-            <Col xs={{ span: 24, order: 0 }} md={{ span: 12, order: 1 }}>
+            <Col
+              id="totals-column"
+              xs={{ span: 24, order: 0 }}
+              md={{ span: 12, order: 1 }}
+            >
               <Totals
                 monthlyTotal={this.state.monthlyTotal}
                 yearlyTotal={this.state.yearlyTotal}
@@ -88,23 +116,26 @@ class Dashboard extends Component {
               />
             </Col>
           </Row>
-          <Row gutter={16} style={{ display: 'flex', flex: 1 }}>
+          <Row gutter={16}>
             <Col
+              id="expenses-column"
               xs={{ span: 24, order: 0 }}
               md={{ span: 12, order: 0 }}
-              style={{ height: '100%' }}
             >
               <ExpensesTable
                 title={moment(new Date(this.state.start_date)).format('MMMM')}
                 options={{
                   start_date: this.state.start_date,
                   end_date: this.state.end_date,
                 }}
+                tableHeight={
+                  this.state.dashboardHeight - this.state.topRowHeight
+                }
               />
             </Col>
-            <Col xs={{ span: 24, order: 1 }} md={{ span: 12, order: 1 }}>
-              {/* <CategoriesPieChart /> */}
-            </Col>
+            {/* <Col xs={{ span: 24, order: 1 }} md={{ span: 12, order: 1 }}>
+              <CategoriesPieChart />
+            </Col> */}
           </Row>
         </div>
       </>

frontend/src/containers/expenses/expenses.jsx

@@ -15,6 +15,7 @@ class Expenses extends Component {
   constructor(props) {
     super(props);
 
+    this.containerRef = React.createRef();
     this.state = {
       group_id: null,
       group_name: 'All expenses',
@@ -23,6 +24,23 @@ class Expenses extends Component {
     this.props.getGroups();
   }
 
+  componentDidMount() {
+    this.setState({ containerHeight: this.containerRef.current.clientHeight });
+    window.addEventListener('resize', () => {
+      this.setState({
+        containerHeight: this.containerRef?.current?.clientHeight,
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', () => {
+      this.setState({
+        containerHeight: this.containerRef?.current?.clientHeight,
+      });
+    });
+  }
+
   onGroupChange = (value) => {
     this.setState(
       { group_id: value.id, group_name: value.name },
@@ -44,27 +62,23 @@ class Expenses extends Component {
               <FilterPanel onChange={this.onGroupChange} />
             </Col>
           </Row>
-          <Row gutter={[16, 16]} style={{ height: '100%' }}>
+          <Row
+            id="container"
+            ref={this.containerRef}
+            gutter={[16, 16]}
+            style={{ height: '100%' }}
+          >
             <Col xs={0} md={8}>
               <FilterPanel onChange={this.onGroupChange} />
             </Col>
-            <Col
-              xs={24}
-              md={16}
-              style={{ display: 'flex', flexDirection: 'column' }}
-            >
-              <Row gutter={16} style={{ display: 'flex', flex: 1 }}>
-                <Col>
-                  <ExpensesTable
-                    title={this.state.group_name}
-                    options={
-                      this.state.group_id
-                        ? { group_id: this.state.group_id }
-                        : {}
-                    }
-                  />
-                </Col>
-              </Row>
+            <Col id="expenses-column" xs={24} md={16}>
+              <ExpensesTable
+                title={this.state.group_name}
+                options={
+                  this.state.group_id ? { group_id: this.state.group_id } : {}
+                }
+                tableHeight={this.state.containerHeight * 1.1}
+              />
             </Col>
           </Row>
         </div>