Tree page (#56)

* initial treePage commit

* worked on styling and added display names for the entries

* comment

* changes from comments

* npm run check

* placeholder on submit function for stewardship activity form

* removed image and moved form rules

* npm run check

* image was unused

package.json

@@ -22,7 +22,7 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.4",
     "@types/uuid": "^8.3.0",
-    "antd": "^4.6.6",
+    "antd": "^4.15.1",
     "axios": "^0.21.1",
     "craco-antd": "^1.19.0",
     "lodash": "^4.17.20",

src/App.tsx

@@ -21,6 +21,7 @@ import VolunteerLeaderboard from './containers/volunteerLeaderboard';
 import TeamLeaderboard from './containers/teamLeaderboard';
 import TeamPage from './containers/teamPage';
 import AvailableTeams from './containers/availableTeams';
+import TreePage from './containers/treePage';
 import { Layout } from 'antd';
 import Home from './containers/home';
 import Signup from './containers/signup';
@@ -49,6 +50,7 @@ export enum Routes {
   SETTINGS = '/settings',
   VOLUNTEER = '/volunteer',
   TEAM = '/team/:id',
+  TREE = '/tree/:id',
   TEAM_LEADERBOARD = '/team-leaderboard',
   RESERVATIONS = '/reservations',
   AVAILABLE_TEAMS = '/available',
@@ -88,6 +90,7 @@ const App: React.FC = () => {
                       <Route path={Routes.LANDING} exact component={Landing} />
                       <Route path={Routes.LOGIN} exact component={Login} />
                       <Route path={Routes.SIGNUP} exact component={Signup} />
+                      <Route path={Routes.TREE} exact component={TreePage} />
                       <AuthRedirect from={Routes.HOME} />
                       <AuthRedirect from={Routes.SETTINGS} />
                       <AuthRedirect from={Routes.VOLUNTEER} />
@@ -148,6 +151,7 @@ const App: React.FC = () => {
                       />
                       <Redirect from={Routes.ADMIN} to={Routes.HOME} />
                       <Route path={Routes.TEAM} exact component={TeamPage} />
+                      <Route path={Routes.TREE} exact component={TreePage} />
                       <Route
                         path={Routes.NOT_FOUND}
                         exact
@@ -194,6 +198,7 @@ const App: React.FC = () => {
                         component={AdminDashboard}
                       />
                       <Route path={Routes.TEAM} exact component={TeamPage} />
+                      <Route path={Routes.TREE} exact component={TreePage} />
                       <Route
                         path={Routes.NOT_FOUND}
                         exact

src/components/stewardshipForm/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import moment from 'moment';
+import { Button, Form, Checkbox, Typography, DatePicker } from 'antd';
+import styled from 'styled-components';
+import { activitiesDateRules, activitiesRules } from '../../utils/formRules';
+
+const { Paragraph } = Typography;
+
+const ItemLabel = styled(Paragraph)`
+  line-height: 0px;
+`;
+
+const TreeDatePicker = styled(DatePicker)`
+  width: 50%;
+`;
+
+const StewardshipForm: React.FC = () => {
+  const stewardshipOptions = [
+    'Watered',
+    'Mulched',
+    'Weeded',
+    'Cleared Waste & Litter',
+  ];
+
+  const onFinishRecordStewardship = (values: {
+    activityDate: moment.Moment;
+    stewardshipActivities: string[];
+  }) => {
+    /*Placeholder */
+  };
+
+  return (
+    <>
+      <Form name="recordStewardship" onFinish={onFinishRecordStewardship}>
+        <ItemLabel>Activity Date</ItemLabel>
+        <Form.Item name="activityDate" rules={activitiesDateRules}>
+          <TreeDatePicker defaultValue={moment()} format={'MM/DD/YYYY'} />
+        </Form.Item>
+        <ItemLabel>Stewardship Activites</ItemLabel>
+        <Form.Item name="stewardshipActivites" rules={activitiesRules}>
+          <Checkbox.Group options={stewardshipOptions} />
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+
+export default StewardshipForm;

src/containers/treePage/ducks/types.ts

@@ -0,0 +1,95 @@
+export interface SiteProps {
+  siteId: number;
+  blockId: number;
+  lat: number;
+  lng: number;
+  city: string;
+  zip: string;
+  address: string;
+  entries: SiteEntry[];
+}
+
+export interface SiteEntry {
+  updatedAt: number;
+  status?: string;
+  genus?: string;
+  species?: string;
+  commonName?: string;
+  confidence?: string;
+  diameter?: number;
+  circumference?: number;
+  coverage?: string;
+  pruning?: string;
+  condition?: string;
+  discoloring?: boolean;
+  leaning?: boolean;
+  constrictingGrate?: boolean;
+  wounds?: boolean;
+  pooling?: boolean;
+  stakesWith?: boolean;
+  stakesWithout?: boolean;
+  light?: boolean;
+  bicycle?: boolean;
+  bagWith?: boolean;
+  bagWithout?: boolean;
+  tape?: boolean;
+  suckerGrowth?: boolean;
+  siteType?: string;
+  sidewalkWidth?: string;
+  siteWidth?: string;
+  siteLength?: string;
+  material?: string;
+  raisedBed?: string;
+  fence?: string;
+  trash?: string;
+  wires?: string;
+  grate?: string;
+  stump?: string;
+  treeNotes?: string;
+  siteNotes?: string;
+}
+
+export const SiteEntryNames: Record<string, string> = {
+  updatedAt: 'Updated At',
+  status: 'Status',
+  genus: 'Genus',
+  species: 'Species',
+  commonName: 'Common Name',
+  confidence: 'Confidence',
+  diameter: 'Diameter',
+  circumference: 'Circumference',
+  coverage: 'Coverage',
+  pruning: 'Pruning',
+  condition: 'Condition',
+  discoloring: 'Discoloring',
+  leaning: 'Leaning',
+  constrictingGrate: 'Constricting Grate',
+  wounds: 'Wounds',
+  pooling: 'Pooling',
+  stakesWith: 'Stakes With',
+  stakesWithout: 'Stakes Without',
+  light: 'Light',
+  bicycle: 'Bicycle',
+  bagWith: 'Bag With',
+  bagWithout: 'Bag Without',
+  tape: 'Tape',
+  suckerGrowth: 'Sucker Growth',
+  siteType: 'Site Type',
+  sidewalkWidth: 'Sidewalk Width',
+  siteWidth: 'Site Width',
+  siteLength: 'Site Length',
+  material: 'Material',
+  raisedBed: 'Raised Bed',
+  fence: 'Fence',
+  trash: 'Trash',
+  wires: 'Wires',
+  grate: 'Grate',
+  stump: 'Stump',
+  treeNotes: 'Tree Notes',
+  siteNotes: 'Site Notes',
+};
+
+export interface TreeCare {
+  date: string;
+  message: string;
+}