Grace ricky joseph/view customers

src/client/src/App.js

@@ -53,7 +53,7 @@ function App() {
             {false && <ReactQueryDevtools />}
             <main>
               <Switch>
-                <PublicRoute exact path="/" component={ViewCustomersPage} />
+                <PublicRoute exact path="/" component={IndexPage} />
                 <PublicRoute exact path="/login" component={LoginPage} />
                 <PublicRoute exact path="/register" component={RegisterPage} />
                 <PublicRoute exact path="/tab" component={MainTabPage} />

src/client/src/components/DropdownComponent.js

@@ -23,7 +23,7 @@ const Container = styled.div`
   }
 `;
 
-function DropdownComponent({ name, options }) {
+function DropdownComponent({ name, options, setSelectedFilter }) {
   const optionList = options.map((option) => <option>{option.name}</option>);
 
   var bodyContent;
@@ -33,11 +33,17 @@ function DropdownComponent({ name, options }) {
     bodyContent = optionList;
   }
 
+  const handleChange = (event) => {
+    setSelectedFilter(event.target.value);
+  };
+
   return (
     <Container>
       <h1>{name}</h1>
       <div class="select">
-        <select>{bodyContent}</select>
+        <select onChange={handleChange}>
+          <select>{bodyContent}</select>
+        </select>
       </div>
     </Container>
   );

src/client/src/components/UserFilter.js

@@ -17,15 +17,37 @@ const Wrapper = styled.div`
   width: 100%;
 `;
 
-function UserFilter({ name1, options1, name2, options2, name3, options3 }) {
+function UserFilter({
+  name1,
+  options1,
+  setCertFilter,
+  name2,
+  options2,
+  setRenewalFilter,
+  name3,
+  options3,
+  setProgramFilter,
+}) {
   return (
     <div>
       <Wrapper>
         <SearchBar />
         <Container>
-          <DropdownComponent name={name1} options={options1} />
-          <DropdownComponent name={name2} options={options2} />
-          <DropdownComponent name={name3} options={options3} />
+          <DropdownComponent
+            setSelectedFilter={setCertFilter}
+            name={name1}
+            options={options1}
+          />
+          <DropdownComponent
+            setSelectedFilter={setRenewalFilter}
+            name={name2}
+            options={options2}
+          />
+          <DropdownComponent
+            setSelectedFilter={setProgramFilter}
+            name={name3}
+            options={options3}
+          />
         </Container>
       </Wrapper>
     </div>

src/client/src/components/routing/PublicRoute.js

@@ -5,9 +5,8 @@ import { AuthContext } from '../../context';
 const PublicRoute = (props) => {
   const auth = useContext(AuthContext);
 
-  // fix this
   return auth.isAuthenticated ? (
-    <Route path={props.path} exact={props.exact} component={props.component} />
+    <Redirect to="/dashboard" />
   ) : (
     <Route path={props.path} exact={props.exact} component={props.component} />
   );

src/client/src/pages/ViewCustomersPage.js

@@ -1,9 +1,16 @@
+import React, { useState, useEffect } from 'react';
 import Table from '../components/Table';
-import React, { useState } from 'react';
 import UserFilter from '../components/UserFilter';
+<<<<<<< HEAD
+import api from '../api/index';
+=======
 import styled from 'styled-components';
+>>>>>>> master
 
 const options1 = [
+  {
+    name: 'No filter selected',
+  },
   {
     name: 'Due in 6 months',
   },
@@ -21,6 +28,9 @@ const options1 = [
 const name1 = 'Recertification';
 
 const options2 = [
+  {
+    name: 'No filter selected',
+  },
   {
     name: 'Due in 2 months',
   },
@@ -34,6 +44,9 @@ const options2 = [
 const name2 = 'Membership Renewal';
 
 const options3 = [
+  {
+    name: 'No filter selected',
+  },
   {
     name: 'Childbirth Educator',
   },
@@ -187,8 +200,61 @@ const placeholderCustomers = [
 const PageContainter = styled.div``;
 
 function ViewCustomersPage() {
+  const [data, setData] = useState([]);
+  const [filterCert, setCertFilter] = useState({});
+  const [filterRenewal, setRenewalFilter] = useState({});
+  const [filterProgram, setProgramFilter] = useState({});
   const [pageNumber, setPageNumber] = useState(1);
 
+  const setCert = (selectedFilter) => {
+    setCertFilter(selectedFilter);
+  };
+
+  const setRenewal = (selectedFilter) => {
+    setRenewalFilter(selectedFilter);
+  };
+
+  const setProgram = (selectedFilter) => {
+    setProgramFilter(selectedFilter);
+  };
+
+  const setPage = (pageNumber) => {
+    setPageNumber(pageNumber);
+  };
+
+  const { isLoading, error, data } = useQuery('users', () =>
+    api.get('/api/users').then((res) => {
+      console.log(res);
+      return res.data;
+    })
+  );
+
+  const fetchData = async () => {
+    // function
+    // make the api calls
+    // set the current data with the api data
+    // /api/customer -> pass in filters and query and page number
+    // api paramerters
+    // pageNumber -> int
+    // query: {
+    // first_name, last_name, email, phone_number
+    //}
+    // filters : {
+    // recertification:number, membersp:nunber
+    // }
+    const result = await api.get('/api/users').then((res) => {
+      console.log(res);
+      return res.data;
+    });
+
+    setData(result);
+  };
+
+  useEffect(async () => {
+    fetchData();
+  }, [filter]);
+  // rerun whenver filters
+
   const increasePage = () => {
     if (pageNumber < maxPageNumber) {
       const newPageNumber = pageNumber + 1;
@@ -218,6 +284,58 @@ function ViewCustomersPage() {
   };
 
   return (
+<<<<<<< HEAD
+    <div className="container">
+      <UserFilter
+        name1={name1}
+        options1={options1}
+        setCertFilter={setCert}
+        name2={name2}
+        options2={options2}
+        setRenewalFilter={setRenewal}
+        name3={name3}
+        options3={options3}
+        setProgamFilter={setProgram}
+      />
+      <Table
+        setPage={setPage}
+        headerColumns={['Name', 'Email', 'Phone Number']}
+        dataColumns={['Name', 'Email', 'PhoneNumber']}
+        data={placeholderCustomers.filter(getEntriesOnPage)}
+        hoverable={true}
+        rowLink={() => console.log('clicked')}
+      ></Table>
+      <div>
+        <div class="columns is-mobile is-centered">
+          <div
+            onClick={goToStart}
+            style={{ cursor: 'pointer' }}
+            class="column is-narrow"
+          >
+            {'<<'}
+          </div>
+          <div
+            onClick={decreasePage}
+            style={{ cursor: 'pointer' }}
+            class="column is-narrow"
+          >
+            {'<'}
+          </div>
+          <div class="column is-narrow">{pageNumber}</div>
+          <div
+            onClick={increasePage}
+            style={{ cursor: 'pointer' }}
+            class="column is-narrow"
+          >
+            {'>'}
+          </div>
+          <div
+            onClick={goToEnd}
+            style={{ cursor: 'pointer' }}
+            class="column is-narrow"
+          >
+            {'>>'}
+=======
     <PageContainter>
       <div className="container">
         <UserFilter
@@ -266,6 +384,7 @@ function ViewCustomersPage() {
             >
               {'>>'}
             </div>
+>>>>>>> master
           </div>
         </div>
       </div>

src/client/src/pages/authflow/RegisterPage.js

@@ -142,24 +142,24 @@ function RegisterPage() {
             <Container3 className="container"></Container3>
             <Container2 className="container">
               <FormField
-                name="first_name"
-                type="first_name"
+                name="firstName"
+                type="firstName"
                 placeholder="First Name"
                 placeholderTextColor="#969696"
                 errors={errors}
               />
             </Container2>
             <Container4 className="container">
               <FormField
-                name="last_name"
-                type="last_name"
+                name="lastName"
+                type="lastName"
                 placeholder="Last Name"
                 placeholderTextColor="#969696"
                 errors={errors}
               />
             </Container4>
             <FormField
-              name="email"
+              name="name=email"
               type="email"
               placeholder="Email"
               placeholderTextColor="#969696"

src/routes/user.api.ts

@@ -14,10 +14,10 @@ const saltRounds = 10;
 
 /* account signup endpoint */
 router.post('/signup', async (req, res) => {
-  const { first_name } = req.body;
-  const { last_name } = req.body;
+  const { firstName } = req.body;
+  const { lastName } = req.body;
   const { email } = req.body;
-  const type = 'user';
+  const { company } = req.body;
   const { password } = req.body;
 
   if (await User.findOne({ email })) {
@@ -31,10 +31,10 @@ router.post('/signup', async (req, res) => {
     }
 
     const newUser = new User({
-      first_name,
-      last_name,
+      firstName,
+      lastName,
       email,
-      type,
+      institutionName: company,
       password: hashedPassword,
     });