Search and sort bar repositioning (341+342)

src/components/AdminPage/AdminPage.js

@@ -1,14 +1,73 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import { AdminPageWrapper } from './AdminPageLayout';
 import CategoryList from './CategoryList';
 import CardGrid from './CardGrid';
+import { connect } from 'react-redux';
+import { getDistance } from '../../utils/distance.js';
 
-const AdminPage = ({currentPosition}) => (
-    <AdminPageWrapper>
-        <CategoryList />
-        <CardGrid currentPos={currentPosition} />
-    </AdminPageWrapper>
-)
+export class AdminPage extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            dataSort: this.sortByAlphabet,
+        }
+    }
+
+    getCloserResource = (a, b) => {
+        if (getDistance(a, this.props.currentPosition)
+            > getDistance(b, this.props.currentPosition)) {
+            return 1;
+        }
+
+        return -1;
+    }
+
+    getCloserName = (a, b) => {
+        if (a.name > b.name) return 1
+        else if (a.name < b.name) return -1
+        else return 0
+    }
+
+    sortByAlphabet = () => {
+        return this.props.resource.slice().sort(this.getCloserName);
+    }
+
+    sortByDistance = () => {
+        return this.props.resource.slice().sort(this.getCloserResource);
+    }
+
+    handleSort = (newSort) => {
+        if (this.state.dataSort !== newSort)
+            this.setState({
+                // Set the dataSort variable to whichever sort function is chosen
+                dataSort: newSort
+            })
+    }
+
+    render() {
+        console.log(this.state.dataSort);
+        const sortOptions = [
+            { key: 'A-Z', sort: this.sortByAlphabet, disabled: false }
+            , { key: 'Distance', sort: this.sortByDistance, disabled: !this.props.currentPosition }
+        ];
+
+        return (
+            <AdminPageWrapper>
+                <CategoryList currentPos={this.props.currentPosition} changeSort={this.handleSort} sortOptions={sortOptions}/>
+                <CardGrid currentPos={this.props.currentPosition} sort={this.state.dataSort} />
+            </AdminPageWrapper>
+        );
+    }
+}
+
+function mapStateToProps(state, ownProps) {
+    return {
+        resource: state.resource
+    }
+}
+
+export default connect(mapStateToProps)(AdminPage);
 
-export default AdminPage;

src/components/AdminPage/AdminPageLayout.js

@@ -17,9 +17,8 @@ export const CardGridWrapper = styled("div")`
 `;
 
 export const SearchAndSortWrapper = styled("div")`
-    display: grid;
-    grid-template-columns: auto auto;
-    justify-content: space-between;
+    display: flex;
+    justify-content: center;
 `;
 
 export const CardListWrapper = styled("div")`

src/components/AdminPage/CardGrid.js

@@ -1,58 +1,27 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import OrganizationCard from '../Common/OrganizationCard';
-import SortBar from '../Common/SortBar.js';
 import SearchBar from '../Header/SearchBar';
 import { CardGridWrapper, SearchAndSortWrapper, CardListWrapper } from "./AdminPageLayout";
-import { getDistance } from '../../utils/distance.js';
 
 export class CardGrid extends Component {
   constructor(props){
     super(props)
 
     this.state = {
-      dataSort: this.sortByAlphabet,
+      dataSort: this.props.sort,
     }
   }
 
-  getCloserResource = (a , b) => {
-    if(getDistance(a,this.props.currentPos)
-    > getDistance(b,this.props.currentPos)){
-      return 1;
-    }
-
-    return -1;
-  }
-
-  getCloserName = (a, b) => {
-    if(a.name > b.name) return 1
-    else if(a.name < b.name ) return -1
-    else return 0
-  }
-
-
-  sortByAlphabet = () => {
-    return this.props.resource.slice().sort(this.getCloserName);
-  }
-
-  sortByDistance = () => {
-    return this.props.resource.slice().sort(this.getCloserResource);
-  }
-
-  handleSortChange = (newSort) => {
-    if(this.state.dataSort !== newSort)
+  componentDidUpdate(prevProps) {
+    if (this.props.sort !== prevProps.sort){
       this.setState({
-        // Set the dataSort variable to whichever sort function is chosen
-        dataSort: newSort,
+        dataSort: this.props.sort
       })
+    }
   }
 
   render() {
-    const sortOptions = [
-      {key: 'A-Z', sort: this.sortByAlphabet, disabled: false}
-      ,{key: 'Distance', sort: this.sortByDistance, disabled: !this.props.currentPos}
-    ];
-
     // Render will be called every time this.props.data is updated, and every time handleSortChange
     // updates the this.state.dataSort variable.
     // this.state.dataSort() sorts data to feed into the OrganizationCards without modifying the
@@ -66,10 +35,6 @@ export class CardGrid extends Component {
             type="text"
             handleFilter={this.props.handleFilter}
           />
-          <SortBar
-            onSortChange={this.handleSortChange}
-            sortOptions={sortOptions}
-          />
         </SearchAndSortWrapper>
         <CardListWrapper>
           {
@@ -87,19 +52,19 @@ export class CardGrid extends Component {
         </CardListWrapper>
       </CardGridWrapper>
     );
-  }
-};
-
-function mapStateToProps(state, ownProps) {
-    let res = [];
-    //Not the most efficient logic, but it works. Will have to optimize this later
-    for (let i = 0, len1 = state.searchedResource.length; i < len1; i++) {
-        for (let j = 0, len2 = state.filteredResource.length; j < len2; j++) {
-            if (state.searchedResource[i].id === state.filteredResource[j].id) {
-                res.push(state.searchedResource[i])
-            }
-        }
     }
+  };
+
+  function mapStateToProps(state, ownProps) {
+      let res = [];
+      //Not the most efficient logic, but it works. Will have to optimize this later
+      for (let i = 0, len1 = state.searchedResource.length; i < len1; i++) {
+          for (let j = 0, len2 = state.filteredResource.length; j < len2; j++) {
+              if (state.searchedResource[i].id === state.filteredResource[j].id) {
+                  res.push(state.searchedResource[i])
+              }
+          }
+      }
 
     return {
         resource: res

src/components/AdminPage/CategoryList.js

@@ -4,13 +4,14 @@ import { bindActionCreators } from 'redux';
 
 import * as resourceAction from '../../action/resourceDataAction';
 import { Form, FormGroup, Label, Input } from 'reactstrap';
+import SortBar from '../Common/SortBar.js';
 
 export class CategoryList extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      selectedCategory: []
+      selectedCategory: [],
     }
     this.handleChange = this.handleChange.bind(this);
   }
@@ -31,9 +32,18 @@ export class CategoryList extends Component {
         <Input type="checkbox" key={cat} onChange={() => this.handleChange(cat)} />{cat}
       </FormGroup>);
   }
+
+  handleSortChange = (newSort) => {
+    this.props.changeSort(newSort);
+  }
+
   render() {
     return (
       <Form>
+        <SortBar
+          onSortChange={this.handleSortChange}
+          sortOptions={this.props.sortOptions}
+        />
         <Label>Filter by Category</Label>
         {this.categoryMenuItems()}
       </Form>

src/components/Common/SortBar.js

@@ -8,7 +8,7 @@ class SortBar extends React.Component {
         // Get new sort based on index of sortOption array
         if (this.props.sortOptions[e.target.value]) {
             const newSort = this.props.sortOptions[e.target.value].sort;
-            this.props.onSortChange(newSort);
+            this.props.onSortChange(newSort); 
         }
     }
 

src/components/SavedResources/SavedResourcePanel.js

@@ -26,7 +26,7 @@ const ToShareButton = (props) => {
     resources = query.resources.split(',');
     tempUrl = `/` + props.resourcePath + `/?resources=${resources.join(',')}`
   }
-
+  
   return (
     <Button
       style={buttonStyle} tag={Link} type="Map" to={tempUrl} target="_blank">