[Feature #287]: Contributor Form and Profile Page Updates

backend/routes/incidents.py

@@ -52,8 +52,8 @@ def create_incident():
 
 class SearchIncidentsSchema(BaseModel):
  location: Optional[str] = None
- startTime: Optional[datetime] = None
- endTime: Optional[datetime] = None
+ dateStart: Optional[str] = None
+ dateEnd: Optional[str] = None
  description: Optional[str] = None
  page: Optional[int] = 1
  perPage: Optional[int] = 20
@@ -63,9 +63,9 @@ class Config:
  schema_extra = {
  "example": {
  "description": "Test description",
- "endTime": "2019-12-01 00:00:00",
+ "dateEnd": "2019-12-01",
  "location": "Location 1",
- "startTime": "2019-09-01 00:00:00",
+ "dateStart": "2019-09-01",
  }
  }
 
@@ -86,10 +86,14 @@ def search_incidents():
  # TODO: eventually replace with geosearch. Geocode records and integrate
  # PostGIS
  query = query.filter(Incident.location.ilike(f"%{body.location}%"))
- if body.startTime:
- query = query.filter(Incident.time_of_incident >= body.startTime)
- if body.endTime:
- query = query.filter(Incident.time_of_incident <= body.endTime)
+ if body.dateStart:
+ query = query.filter(
+ Incident.time_of_incident >=
+ datetime.strptime(body.dateStart, "%Y-%m-%d"))
+ if body.dateEnd:
+ query = query.filter(
+ Incident.time_of_incident <=
+ datetime.strptime(body.dateEnd, "%Y-%m-%d"))
  if body.description:
  query = query.filter(
  Incident.description.ilike(f"%{body.description}%")

backend/tests/test_incidents.py

@@ -111,8 +111,8 @@ def test_get_incident(app, client, db_session, access_token):
  ),
  (
  {
- "startTime": "2021-09-30 00:00:00",
- "endTime": "2021-10-02 00:00:00",
+ "dateStart": "2021-09-30",
+ "dateEnd": "2021-10-02",
  },
  ["traffic"],
  ),

frontend/compositions/search-panel/search-panel.tsx

@@ -3,8 +3,9 @@ import { FormProvider, useForm } from "react-hook-form"
 
 import { useAuth, useSearch } from "../../helpers"
 import { searchPanelInputs, SearchTypes, ToggleOptions } from "../../models"
-import { FormLevelError, PrimaryButton, PrimaryInput, ToggleBox } from "../../shared-components"
+import { FormLevelError, PrimaryButton, PrimaryInput, SecondaryInput, ToggleBox } from "../../shared-components"
 import styles from "./search.module.css"
+import SecondaryInputStories from "../../shared-components/secondary-input/secondary-input.stories"
 
 const { searchPanelContainer, searchForm } = styles
 
@@ -28,13 +29,14 @@ export const SearchPanel = () => {
  setFormInputs(searchPanelInputs[e.target.value as SearchTypes])
  }
 
- async function onSubmit({ location, startTime, endTime, description }: any) {
+ async function onSubmit({ location, dateEnd, dateStart, description, source }: any) {
  setIsLoading(true)
  try {
- await searchIncidents({ accessToken, description, endTime, location, startTime })
+ await searchIncidents({ accessToken, description, dateEnd, location, dateStart, source })
  } catch (e) {
  console.error("Unexpected search error", e)
  setErrorMessage("Something went wrong. Please try again.")
+ /* # TODO: Add error handling when a 401 is recieved. Redirect to login */
  }
  setIsLoading(false)
  }
@@ -54,6 +56,7 @@ export const SearchPanel = () => {
  formInputs.map((inputName) => (
  <PrimaryInput isRequired={false} key={inputName} inputName={inputName} />
  ))}
+ <SecondaryInput inputName="source" />
  </fieldset>
  {errorMessage && <FormLevelError errorId="ErrorMessage" errorMessage={errorMessage} />}
  <PrimaryButton loading={isLoading} type="submit">

frontend/helpers/api/api.ts

@@ -82,9 +82,10 @@ export type LoginRequest = LoginCredentials
 export type WhoamiRequest = AuthenticatedRequest
 export interface IncidentSearchRequest extends AuthenticatedRequest {
  description?: string
- startTime?: string
- endTime?: string
+ dateStart?: string
+ dateEnd?: string
  location?: string
+ source?: string
  page?: number
  perPage?: number
 }

frontend/models/app-routes.tsx

@@ -1,4 +1,5 @@
 export enum AppRoutes {
+ CONTRIBUTOR = "/contributor",
  DASHBOARD = "/search",
  FORGOT = "/forgot",
  RESET = "/reset",

frontend/models/enrollment-cta.tsx

@@ -8,6 +8,7 @@ interface CallToActionText {
 
 export enum CallToActionTypes {
  LOGIN = "login",
+ CONTRIBUTOR = "contributor",
  REGISTER = "register",
  DASHBOARD = "dashboard",
  FORGOT = "forgot",
@@ -30,6 +31,11 @@ export const enrollmentCallToActionText: { [key in CallToActionTypes]: CallToAct
  linkText: "Return to dashboard",
  linkPath: AppRoutes.DASHBOARD
  },
+ [CallToActionTypes.CONTRIBUTOR]: {
+ description: "Want to report an issue the police in your area?",
+ linkText: "Become a Contributor",
+ linkPath: AppRoutes.CONTRIBUTOR
+ },
  [CallToActionTypes.FORGOT]: {
  //description: "New to the National Police Data Coalition?",
  linkText: "Forgot your password?",

frontend/models/index.tsx

@@ -4,6 +4,7 @@ export * from "./info-tooltip"
 export * from "./logo-sizes"
 export * from "./password-aid"
 export * from "./primary-input"
+export * from "./secondary-input"
 export * from "./response"
 export * from "./results-alert"
 export * from "./saved-table"

frontend/models/primary-input.tsx

@@ -9,11 +9,15 @@ export enum PrimaryInputNames {
  EMAIL_ADDRESS = "emailAddress",
  FIRST_NAME = "firstName",
  INCIDENT_TYPE = "incidentType",
+ DESCRIPTION = "description",
  KEY_WORDS = "keyWords",
  LAST_NAME = "lastName",
  LOCATION = "location",
  LOGIN_PASSWORD = "loginPassword",
  OFFICER_NAME = "officerName",
+ ORGANIZATION_NAME = "organizationName",
+ ORGANIZATION_URL = "organizationUrl",
+ ORGANIZATION_EMAIL = "organizationEmail",
  PHONE_NUMBER = "phoneNumber",
  STREET_ADDRESS = "streetAddress",
  ZIP_CODE = "zipCode"
@@ -23,6 +27,9 @@ const passwordRgx: RegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d\s]).
 const nameRgx: RegExp = new RegExp("^[' -]*[a-z]+[a-z' -]+$", "i")
 const anyString: RegExp = new RegExp("[sS]*")
 const phoneNumberRgx: RegExp = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/
+const emailRgx: RegExp = /^[a-z0-9_.-]+@[a-z0-9_.-]+\.[a-z]{2,4}$/i
+const urlRgx: RegExp = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/
+const dateRgx: RegExp = /^\d{4}-\d{2}-\d{2}$/
 
 export const primaryInputValidation = {
  [PrimaryInputNames.BADGE_NUMBER]: {
@@ -47,23 +54,23 @@ export const primaryInputValidation = {
  inputType: "password"
  },
  [PrimaryInputNames.DATE]: {
- errorMessage: "Date",
- pattern: anyString,
+ errorMessage: "Enter a valid date in the format YYYY-MM-DD.",
+ pattern: dateRgx,
  inputType: "date"
  },
  [PrimaryInputNames.DATE_START]: {
- errorMessage: "Enter a date",
- pattern: anyString,
+ errorMessage: "Enter a valid date in the format YYYY-MM-DD.",
+ pattern: dateRgx,
  inputType: "date"
  },
  [PrimaryInputNames.DATE_END]: {
- errorMessage: "Enter a date",
- pattern: anyString,
+ errorMessage: "Enter a valid date in the format YYYY-MM-DD.",
+ pattern: dateRgx,
  inputType: "date"
  },
  [PrimaryInputNames.EMAIL_ADDRESS]: {
  errorMessage: "Please enter a valid email",
- pattern: /^[a-z0-9_.-]+@[a-z0-9_.-]+\.[a-z]{2,4}$/i,
+ pattern: emailRgx,
  inputType: "email"
  },
  [PrimaryInputNames.FIRST_NAME]: {
@@ -72,7 +79,12 @@ export const primaryInputValidation = {
  inputType: "text"
  },
  [PrimaryInputNames.INCIDENT_TYPE]: {
- errorMessage: "A name requires 2+ letters",
+ errorMessage: "Must include at least 2 characters.",
+ pattern: anyString,
+ inputType: "text"
+ },
+ [PrimaryInputNames.DESCRIPTION]: {
+ errorMessage: "Must include at least 2 characters.",
  pattern: anyString,
  inputType: "text"
  },
@@ -81,6 +93,21 @@ export const primaryInputValidation = {
  pattern: nameRgx,
  inputType: "text"
  },
+ [PrimaryInputNames.ORGANIZATION_NAME]: {
+ errorMessage: "Must include at least 2 characters.",
+ pattern: nameRgx,
+ inputType: "text"
+ },
+ [PrimaryInputNames.ORGANIZATION_URL]: {
+ errorMessage: "Must include at least 2 characters.",
+ pattern: urlRgx,
+ inputType: "text"
+ },
+ [PrimaryInputNames.ORGANIZATION_EMAIL]: {
+ errorMessage: "Please enter a valid email",
+ pattern: emailRgx,
+ inputType: "text"
+ },
  [PrimaryInputNames.PHONE_NUMBER]: {
  errorMessage: "A valid phone number is required",
  pattern: phoneNumberRgx,
@@ -125,13 +152,16 @@ export enum SearchTypes {
 
 export const searchPanelInputs: { [key in SearchTypes]: PrimaryInputNames[] } = {
  [SearchTypes.INCIDENTS]: [
+ PrimaryInputNames.DESCRIPTION,
  PrimaryInputNames.LOCATION,
- PrimaryInputNames.INCIDENT_TYPE,
- PrimaryInputNames.DATE
+ PrimaryInputNames.DATE_START,
+ PrimaryInputNames.DATE_END
  ],
  [SearchTypes.OFFICERS]: [
  PrimaryInputNames.OFFICER_NAME,
  PrimaryInputNames.LOCATION,
- PrimaryInputNames.BADGE_NUMBER
+ PrimaryInputNames.BADGE_NUMBER,
+ PrimaryInputNames.DATE_START,
+ PrimaryInputNames.DATE_END
  ]
 }

frontend/models/profile.tsx

@@ -73,7 +73,7 @@ export const publicUser = (user: User): UserDataType => ({
  firstName: user.firstName || "",
  lastName: user.lastName || "",
  email: user.email,
- phone: fakePhoneNumber,
+ phone: user.phoneNumber,
  active: user.active,
  role: UserRoles.PUBLIC
 })
@@ -82,7 +82,7 @@ export const passportUser = (user: User): UserDataType => ({
  firstName: user.firstName || "",
  lastName: user.lastName || "",
  email: user.email,
- phone: fakePhoneNumber,
+ phone: user.phoneNumber,
  active: user.active,
  role: UserRoles.PASSPORT
 })
@@ -91,7 +91,7 @@ export const contributorUser = (user: User): UserDataType => ({
  firstName: user.firstName || "",
  lastName: user.lastName || "",
  email: user.email,
- phone: fakePhoneNumber,
+ phone: user.phoneNumber,
  active: user.active,
  role: UserRoles.CONTRIBUTOR
 })
@@ -100,7 +100,7 @@ export const adminUser = (user: User): UserDataType => ({
  firstName: user.firstName || "",
  lastName: user.lastName || "",
  email: user.email,
- phone: fakePhoneNumber,
+ phone: user.phoneNumber,
  active: user.active,
  role: UserRoles.ADMIN
 })
@@ -109,7 +109,7 @@ export const someUser = (user: User, role: UserRoles): UserDataType => ({
  firstName: user.firstName || "",
  lastName: user.lastName || "",
  email: user.email,
- phone: fakePhoneNumber,
+ phone: user.phoneNumber,
  active: user.active,
  role: role
 })
@@ -152,6 +152,3 @@ export const profileTypeContent: { [key in UserRoles]: ProfileTypeText } = {
  content: ""
  }
 }
-
-// not currently part of API data
-export const fakePhoneNumber = "9995550123"

frontend/models/response.tsx

@@ -8,7 +8,8 @@ interface EnrollmentErrorText {
 
 export enum EnrollmentTypes {
  VIEWER = "viewer",
- PASSPORT = "passport"
+ PASSPORT = "passport",
+ CONTRIBUTOR = "contributor"
 }
 
 export const enrollmentMessage: { [key in EnrollmentTypes]: EnrollmentErrorText } = {
@@ -21,5 +22,10 @@ export const enrollmentMessage: { [key in EnrollmentTypes]: EnrollmentErrorText
  statusMessage: "submit your application",
  returnText: "Return to dashboard",
  returnPath: AppRoutes.DASHBOARD
+ },
+ [EnrollmentTypes.CONTRIBUTOR]: {
+ statusMessage: "submit your application",
+ returnText: "Return to dashboard",
+ returnPath: AppRoutes.DASHBOARD
  }
 }

frontend/models/secondary-input.tsx

@@ -0,0 +1,19 @@
+export enum SecondaryInputNames {
+ SOURCE = "source"
+}
+
+const passwordRgx: RegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d\s]).{8,}$/
+const nameRgx: RegExp = new RegExp("^[' -]*[a-z]+[a-z' -]+$", "i")
+const anyString: RegExp = new RegExp("[sS]*")
+const phoneNumberRgx: RegExp = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/
+const emailRgx: RegExp = /^[a-z0-9_.-]+@[a-z0-9_.-]+\.[a-z]{2,4}$/i
+const urlRgx: RegExp = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/
+
+export const secondaryInputValidation = {
+ [SecondaryInputNames.SOURCE]: {
+ errorMessage: "A badge number requires 2+ letters",
+ pattern: anyString,
+ inputType: "text"
+ }
+}
+

frontend/pages/contributor/contributor.module.css

@@ -0,0 +1,21 @@
+.contributorIntro {
+ width: var(--size384);
+ margin-bottom: var(--size8);
+}
+
+.contributorForm {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: var(--size424);
+}
+
+.contributorForm fieldset {
+ display: flex;
+ flex-flow: row wrap;
+}
+
+.submissionConfirmation {
+ max-width: var(--size424);
+ overflow: scroll;
+}