WIP: feat: address book

src/controllers/addressBookController.ts

@@ -0,0 +1,17 @@
+import { Request, Response } from "express";
+import { ISimpleAddressBookEntry, AddressBookEntry, addressBookToSimpleAddressBook } from "../models/AddressBookEntry";
+
+export interface IAddressBookResponse{
+    addressBook: Array<ISimpleAddressBookEntry>;
+}
+
+export const listAddressBook = (_: Request, res: Response) => {
+    AddressBookEntry.find({}).then(entries => {
+      const simpleEntries = entries.map(addressBookToSimpleAddressBook);
+
+      res.json({
+        addressBook: simpleEntries
+      } as IAddressBookResponse);
+    })
+  }
+

src/models/AddressBookEntry.ts

@@ -0,0 +1,52 @@
+import mongoose from "mongoose";
+import { Schema } from "mongoose";
+
+interface ISimpleAddressBookEntry {
+  name: string;
+  image: string;
+  graduation: Date;
+  email: string;
+  profession: string;
+  company: string;
+  preferredChannel: string;
+}
+
+interface IAddressBookEntry extends ISimpleAddressBookEntry {
+  submittedOn: Date;
+}
+
+interface IAddressBookEntryModel extends IAddressBookEntry, mongoose.Document {}
+
+const AddressBookEntrySchema = new Schema({
+  name: { type: String, required: true },
+  image: String,
+  graduation: Date,
+  email: String,
+  profession: String,
+  company: String ,
+  preferredChannel: String,
+  submittedOn: Date
+});
+
+const AddressBookEntry = mongoose.model<IAddressBookEntryModel>(
+  "AddressBookEntry",
+  AddressBookEntrySchema
+);
+
+const addressBookToSimpleAddressBook = (v: IAddressBookEntryModel) =>
+  ({
+    name: v.name,
+    image: v.image,
+    graduation: v.graduation,
+    email: v.email,
+    profession: v.profession,
+    company: v.company,
+    preferredChannel: v.preferredChannel
+  } as ISimpleAddressBookEntry);
+
+export {
+  AddressBookEntry,
+  ISimpleAddressBookEntry,
+  IAddressBookEntryModel,
+  addressBookToSimpleAddressBook
+};

src/models/User.ts

@@ -14,9 +14,12 @@ interface ISimpleUser {
   major: string;
   image: string;
   preferredChannel: string;
+  profession: string;
+  company: string;
   admin: boolean;
   approved: boolean;
   pcpMentor: boolean;
+  inAddressBook: boolean;
 }
 
 interface IUserModel extends IUser, mongoose.Document {}

src/routes.ts

@@ -21,6 +21,7 @@ import {
   getOneTestbankFile
 } from "./controllers/testBankController";
 import { IUser, IUserModel } from "./models/User";
+import { listAddressBook } from "./controllers/addressBookController";
 
 const apiRoutes = express.Router();
 
@@ -29,7 +30,8 @@ apiRoutes.get("/setup", authenticationRequired, firstTimeSetupHandler);
 
 apiRoutes.get("/users/current", getCurrentUser);
 apiRoutes.get("/users", adminRequired, listUsers);
-apiRoutes.get("/users/pcp", authenticationRequired, listPCPMentors);
+// apiRoutes.get("/users/pcp", authenticationRequired, listPCPMentors);
+apiRoutes.get("/address_book", authenticationRequired, listAddressBook);
 apiRoutes.put("/users/:email", authenticationRequired, updateUser);
 apiRoutes.put("/users/:email/delete", adminRequired, deleteUser);
 

src/server.ts

@@ -16,6 +16,11 @@ import passport from "./auth";
 const MongoStore = connectMongo(session);
 const app = express();
 
+// https://mongoosejs.com/docs/deprecations.html#summary
+mongoose.set('useNewUrlParser', true);
+mongoose.set('useUnifiedTopology', true);
+mongoose.set('useCreateIndex', true);
+
 // This connects to MongoDB, the database where we store our data
 mongoose.connect(
   Config.MONGO_URI,

src/static/App.tsx

@@ -10,6 +10,7 @@ import UserViewPage from "./components/UserView";
 import TestBank from "./components/TestBank";
 import UserProfilePage from "./components/UserProfile";
 import PCP from "./components/PCP";
+import AddressBook from "./components/AddressBook";
 
 interface IAppState {
   userData?: IUser;
@@ -82,9 +83,13 @@ class App extends React.Component<{}, Readonly<IAppState>> {
                   render={() => <UserProfilePage appState={this.state} />}
                   path="/profile"
                 />
-                <Route
+                {/* <Route
                   render={() => <PCP appState={this.state} />}
                   path="/pcp"
+                /> */}
+                <Route 
+                  render={() => <AddressBook appState={this.state} />}
+                  path="/address_book"
                 />
                 <Route component={HomePage} path="/" />
               </Switch>

src/static/components/AddressBook.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import axios from "axios";
+import { Card, Button, CardBody, CardText, CardTitle, CardImg, CardDeck } from "reactstrap";
+import { ISimpleAddressBookEntry, AddressBookEntry } from "../../models/AddressBookEntry";
+import { IAppState } from "../App";
+import {
+  IAddressBookResponse
+} from "../../controllers/addressBookController";
+import CardGroup from "reactstrap/lib/CardGroup";
+
+interface IAddressViewProps {
+  appState: IAppState;
+}
+
+interface IAddressViewState {
+  addressBook?: Array<ISimpleAddressBookEntry>;
+}
+
+class AddressBook extends React.Component<IAddressViewProps, IAddressViewState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      addressBook: undefined
+    };
+  }
+
+  componentDidMount() {
+    this.reload();
+  }
+
+  reload() {
+    axios.get<IAddressBookResponse>("/api/address_book").then(data => {
+      this.setState({ addressBook: data.data.addressBook });
+    });
+  }
+
+  render() {
+    const AddressCard = (address: ISimpleAddressBookEntry, index: number) => (
+      <Card key={index} className="text-center">
+        <CardImg className="img-fluid rounded profile-img" src={address.image || "../assets/bear.png"} />
+        <CardBody>
+          <CardTitle>{address.name}</CardTitle>
+          {address.graduation &&<CardText>{address.graduation}</CardText> }
+          {address.email && <CardText>{address.email}</CardText> }
+          {address.profession && <CardText>{address.profession}</CardText> }
+          {address.company && <CardText>{address.company}</CardText> }
+          {address.preferredChannel && <CardText>{address.preferredChannel}</CardText> }
+        </CardBody>
+      </Card>
+
+    );
+
+    const AddressCards = () => {
+      return this.state.addressBook ? (
+        <CardGroup body>
+          {this.state.addressBook.map((u, i) => AddressCard(u, i))}
+        </CardGroup>
+      ) : (
+        <h4 className="mt-2">Loading...</h4>
+      );
+    };
+
+    return (
+      <div className="page user-card-view mt-2">
+        <div className="row align-items-center">
+          <div className="col">
+            <h1 className="mb-0">Address Book</h1>
+          </div>
+        </div>
+        <div className="divider" />
+        <div className="row">
+          <div className="col">
+            <AddressCards />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AddressBook;

src/static/components/Navbar.tsx

@@ -63,10 +63,15 @@ export const Navbar: StatelessComponent<IRequiresAppState> = ({
                       </DropdownItem>
                     )}
                     <DropdownItem divider />
-                    {userData.approved && (
+                    {/* {userData.approved && (
                       <DropdownItem>
                         <Link to="/pcp">Peer Counselling</Link>
                       </DropdownItem>
+                    )} */}
+                    {userData.approved && (
+                      <DropdownItem>
+                        <Link to="/address_book">Address Book</Link>
+                      </DropdownItem>
                     )}
                     {userData.admin && (
                       <DropdownItem>

src/static/styles.scss

@@ -298,6 +298,21 @@ label {
   }
 }
 
+.user-card-view {
+  .profile-img {
+    width: 50%
+  }
+
+  .card-group {
+    justify-content: space-evenly;
+
+    .card {
+      flex: 0 0 auto;
+      align-items: center;
+    }
+  }
+}
+
 .testbank-list-view {
   .message {
     margin-left: 2em;