[next] Email (#2261)

* feat: suspending, banning, now propogation

* feat: added email rendering + localization support

* fix: fix related to lib

* refactor: moved juicer to queue task

* refactor: cleanup of job processor

* refactor: improved error messaging around failed email

* feat: initial forgot passwor impl

* fix: fixed rebase errors

* feat: send back Content-Language header with requests

* feat: added ban email

* feat: implemented forgotten password API

* fix: linting

* feat: support more emails

* fix: promise patches

* feat: initial confirm email API

* feat: added rate limiting

* feat: added URL support

* feat: added email docs

* fix: updated docs

* chore: documentation review

* fix: fixed build bug

* feat: implement forgot password in auth popup

* test: add tests + fixes

* chore: rename StatelessComponent to FunctionComponent

* fix: types and test fixes

* chore: upgrade deps

* fix: THANK YOU TESTS FOR SAVING MY A**

* chore: reorder imports

* chore: remove obsolete !

* feat: implement accounts bundle

* refactor: review suggestion

* fix: rebase upgrade error

* fix: rebase bug

* feat: reset password link support

* test: add tests for account password reset page

* fix: remove redirect uri

* fix: revert local state changes

src/core/client/admin/components/App.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 import { Logo } from "talk-ui/components";
@@ -17,7 +17,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const App: StatelessComponent<Props> = ({ children, viewer }) => (
+const App: FunctionComponent<Props> = ({ children, viewer }) => (
   <div className={styles.root}>
     <AppBar gutterBegin gutterEnd>
       <Begin itemGutter="double">

src/core/client/admin/components/AuthBox.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import {
   BrandIcon,
@@ -15,7 +15,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const AuthBox: StatelessComponent<Props> = ({ title, children }) => {
+const AuthBox: FunctionComponent<Props> = ({ title, children }) => {
   return (
     <div data-testid="authBox">
       <Flex justifyContent="center">

src/core/client/admin/components/DecisionHistoryButton.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { BaseButton, ClickOutside, Icon, Popover } from "talk-ui/components";
 
@@ -9,7 +9,7 @@ import styles from "./DecisionHistoryButton.css";
 
 const popoverID = "decision-history-popover";
 
-const DecisionHistoryButton: StatelessComponent = () => (
+const DecisionHistoryButton: FunctionComponent = () => (
   <Localized id="decisionHistory-popover" attrs={{ description: true }}>
     <Popover
       data-testid="decisionHistory-popover"

src/core/client/admin/components/MainLayout.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./MainLayout.css";
 
@@ -8,7 +8,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-const MainLayout: StatelessComponent<Props> = ({
+const MainLayout: FunctionComponent<Props> = ({
   children,
   className,
   ...rest

src/core/client/admin/components/Navigation.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { AppBarNavigation } from "talk-ui/components";
 
@@ -9,7 +9,7 @@ interface Props {
   showConfigure: boolean;
 }
 
-const Navigation: StatelessComponent<Props> = props => (
+const Navigation: FunctionComponent<Props> = props => (
   <AppBarNavigation>
     <Localized id="navigation-moderate">
       <NavigationLink to="/admin/moderate">Moderate</NavigationLink>

src/core/client/admin/components/NavigationLink.tsx

@@ -1,5 +1,5 @@
 import { Link, LocationDescriptor } from "found";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { AppBarNavigationItem } from "talk-ui/components";
 
@@ -8,7 +8,7 @@ interface Props {
   to: string | LocationDescriptor;
 }
 
-const NavigationLink: StatelessComponent<Props> = props => (
+const NavigationLink: FunctionComponent<Props> = props => (
   <Link to={props.to} Component={AppBarNavigationItem} activePropName="active">
     {props.children}
   </Link>

src/core/client/admin/components/NotAvailable.tsx

@@ -1,9 +1,9 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./NotAvailable.css";
 
-const NotAvailable: StatelessComponent = props => (
+const NotAvailable: FunctionComponent = props => (
   <Localized id="general-notAvailable">
     <span className={styles.root}>Not available</span>
   </Localized>

src/core/client/admin/components/TranslatedRole.tsx

@@ -19,7 +19,7 @@ function createElement(
   }
 }
 
-const TranslatedRole: React.StatelessComponent<Props> = props => {
+const TranslatedRole: React.FunctionComponent<Props> = props => {
   switch (props.children) {
     case GQLUSER_ROLE.COMMENTER:
       return (

src/core/client/admin/components/TranslatedStoryStatus.tsx

@@ -19,7 +19,7 @@ function createElement(
   }
 }
 
-const TranslatedRole: React.StatelessComponent<Props> = props => {
+const TranslatedRole: React.FunctionComponent<Props> = props => {
   switch (props.children) {
     case GQLSTORY_STATUS.OPEN:
       return (

src/core/client/admin/components/UserMenu.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import {
   Button,
@@ -18,7 +18,7 @@ interface Props {
   onSignOut: React.EventHandler<React.MouseEvent>;
 }
 
-const UserMenu: StatelessComponent<Props> = props => (
+const UserMenu: FunctionComponent<Props> = props => (
   <Localized id="userMenu-popover" attrs={{ description: true }}>
     <Popover
       id="userMenu"

src/core/client/admin/components/Version.tsx

@@ -1,10 +1,10 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Typography } from "talk-ui/components";
 
 import styles from "./Version.css";
 
-const Version: StatelessComponent = () => {
+const Version: FunctionComponent = () => {
   return (
     <Typography className={styles.version} variant="detail">
       {process.env.TALK_VERSION ? `v${process.env.TALK_VERSION}` : "Unknown"}

src/core/client/admin/containers/AppContainer.tsx

@@ -21,7 +21,7 @@ class AppContainer extends React.Component<Props> {
   }
 }
 
-const enhanced = withRouteConfig({
+const enhanced = withRouteConfig<Props>({
   query: graphql`
     query AppContainerQuery {
       viewer {

src/core/client/admin/containers/AuthCheckContainer.tsx

@@ -94,7 +94,7 @@ class AuthCheckContainer extends React.Component<Props> {
   }
 }
 
-const enhanced = withRouteConfig({
+const enhanced = withRouteConfig<Props>({
   query: graphql`
     query AuthCheckContainerQuery {
       viewer {

src/core/client/admin/containers/EntryContainer.tsx

@@ -1,7 +1,7 @@
 import { BrowserProtocol, queryMiddleware } from "farce";
 import { createFarceRouter, ElementsRenderer } from "found";
 import { Resolver } from "found-relay";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import TransitionControl from "talk-framework/testHelpers/TransitionControl";
 
 import { TalkContextConsumer } from "talk-framework/lib/bootstrap/TalkContext";
@@ -25,7 +25,7 @@ const Router = createFarceRouter({
   ),
 });
 
-const EntryContainer: StatelessComponent = () => (
+const EntryContainer: FunctionComponent = () => (
   <TalkContextConsumer>
     {({ relayEnvironment }) => (
       <Router resolver={new Resolver(relayEnvironment)} />

src/core/client/admin/index.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 import { createManaged } from "talk-framework/lib/bootstrap";
 
@@ -13,7 +13,7 @@ async function main() {
     userLocales: navigator.languages,
   });
 
-  const Index: StatelessComponent = () => (
+  const Index: FunctionComponent = () => (
     <ManagedTalkContextProvider>
       <EntryContainer />
     </ManagedTalkContextProvider>

src/core/client/admin/mutations/CompleteAccountMutation.ts

@@ -2,7 +2,7 @@ import { Environment } from "relay-runtime";
 
 import { TalkContext } from "talk-framework/lib/bootstrap";
 import { createMutation } from "talk-framework/lib/relay";
-import { commit as setAccessToken } from "talk-framework/mutations/SetAccessTokenMutation";
+import SetAccessTokenMutation from "talk-framework/mutations/SetAccessTokenMutation";
 
 const CompleteAccountMutation = createMutation(
   "completeAccount",
@@ -13,7 +13,7 @@ const CompleteAccountMutation = createMutation(
     },
     context: TalkContext
   ) =>
-    await setAccessToken(
+    await SetAccessTokenMutation.commit(
       environment,
       { accessToken: input.accessToken },
       context

src/core/client/admin/routes/NotFound.tsx

@@ -1,7 +1,7 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { HorizontalGutter, Typography } from "talk-ui/components";
 
-const NotFound: StatelessComponent = ({ children }) => (
+const NotFound: FunctionComponent = ({ children }) => (
   <HorizontalGutter>
     <Typography variant="heading3">Not Found</Typography>
   </HorizontalGutter>

src/core/client/admin/routes/community/components/BanModal.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import NotAvailable from "talk-admin/components/NotAvailable";
 import {
@@ -21,7 +21,7 @@ interface Props {
   onConfirm: () => void;
 }
 
-const BanModal: StatelessComponent<Props> = ({
+const BanModal: FunctionComponent<Props> = ({
   open,
   onClose,
   onConfirm,

src/core/client/admin/routes/community/components/Community.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import MainLayout from "talk-admin/components/MainLayout";
 import { PropTypesOf } from "talk-framework/types";
@@ -11,7 +11,7 @@ interface Props {
   query: PropTypesOf<typeof UserTableContainer>["query"];
 }
 
-const Community: StatelessComponent<Props> = props => (
+const Community: FunctionComponent<Props> = props => (
   <MainLayout className={styles.root} data-testid="community-container">
     <UserTableContainer query={props.query} />
   </MainLayout>

src/core/client/admin/routes/community/components/EmptyMessage.tsx

@@ -1,11 +1,11 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Typography } from "talk-ui/components";
 
 import styles from "./EmptyMessage.css";
 
-const EmptyMessage: StatelessComponent = props => (
+const EmptyMessage: FunctionComponent = props => (
   <Localized id="community-emptyMessage">
     <Typography className={styles.root} variant="bodyCopyBold" align="center">
       We could not find anyone in your community matching your criteria.

src/core/client/admin/routes/community/components/RoleChange.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import TranslatedRole from "talk-admin/components/TranslatedRole";
 import { GQLUSER_ROLE, GQLUSER_ROLE_RL } from "talk-framework/schema";
@@ -20,7 +20,7 @@ interface Props {
   role: GQLUSER_ROLE_RL;
 }
 
-const RoleChange: StatelessComponent<Props> = props => (
+const RoleChange: FunctionComponent<Props> = props => (
   <Localized id="community-role-popover" attrs={{ description: true }}>
     <Popover
       id="community-roleChange"

src/core/client/admin/routes/community/components/RoleText.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import TranslatedRole from "talk-admin/components/TranslatedRole";
 import { GQLUSER_ROLE } from "talk-framework/schema";
@@ -11,7 +11,7 @@ interface Props {
   children: PropTypesOf<typeof TranslatedRole>["children"];
 }
 
-const RoleText: StatelessComponent<Props> = props => (
+const RoleText: FunctionComponent<Props> = props => (
   <TranslatedRole
     container={
       <span

src/core/client/admin/routes/community/components/UserRow.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import NotAvailable from "talk-admin/components/NotAvailable";
 import { PropTypesOf } from "talk-framework/types";
@@ -21,7 +21,7 @@ interface Props {
   user: PropTypesOf<typeof UserStatusChangeContainer>["user"];
 }
 
-const UserRow: StatelessComponent<Props> = props => (
+const UserRow: FunctionComponent<Props> = props => (
   <TableRow>
     <TableCell className={styles.usernameColumn}>
       {props.username || <NotAvailable />}

src/core/client/admin/routes/community/components/UserStatus.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex, Typography } from "talk-ui/components";
 import { PropTypesOf } from "talk-ui/types";
@@ -25,7 +25,7 @@ const render = (
   </Typography>
 );
 
-const UserStatus: StatelessComponent<Props> = props => {
+const UserStatus: FunctionComponent<Props> = props => {
   if (props.banned) {
     return render(
       "error",

src/core/client/admin/routes/community/components/UserStatusChange.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import {
   Button,
@@ -22,7 +22,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const UserStatusChange: StatelessComponent<Props> = props => (
+const UserStatusChange: FunctionComponent<Props> = props => (
   <Localized id="community-userStatus-popover" attrs={{ description: true }}>
     <Popover
       id="community-statusChange"

src/core/client/admin/routes/community/components/UserTable.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -28,7 +28,7 @@ interface Props {
   loading: boolean;
 }
 
-const UserTable: StatelessComponent<Props> = props => (
+const UserTable: FunctionComponent<Props> = props => (
   <>
     <HorizontalGutter size="double">
       <Table fullWidth>

src/core/client/admin/routes/community/components/UserTableFilter.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field, Form } from "react-final-form";
 
 import {
@@ -31,7 +31,7 @@ interface Props {
   onSetSearchFilter: (search: string) => void;
 }
 
-const UserTableFilter: StatelessComponent<Props> = props => (
+const UserTableFilter: FunctionComponent<Props> = props => (
   <Flex itemGutter="double">
     <FieldSet>
       <Localized id="community-filter-search">

src/core/client/admin/routes/community/containers/CommunityContainer.tsx

@@ -1,5 +1,5 @@
 import { FormApi } from "final-form";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
 import { CommunityContainerQueryResponse } from "talk-admin/__generated__/CommunityContainerQuery.graphql";
@@ -12,11 +12,11 @@ interface Props {
   form: FormApi;
 }
 
-const CommunityContainer: StatelessComponent<Props> = props => {
+const CommunityContainer: FunctionComponent<Props> = props => {
   return <Community query={props.data} />;
 };
 
-const enhanced = withRouteConfig({
+const enhanced = withRouteConfig<Props>({
   query: graphql`
     query CommunityContainerQuery {
       ...UserTableContainer_query

src/core/client/admin/routes/community/containers/RoleChangeContainer.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent, useCallback } from "react";
+import React, { FunctionComponent, useCallback } from "react";
 
 import { UpdateUserRoleMutation } from "talk-admin/mutations";
 import { useMutation } from "talk-framework/lib/relay";
@@ -11,7 +11,7 @@ interface Props {
   role: GQLUSER_ROLE_RL;
 }
 
-const RoleChangeContainer: StatelessComponent<Props> = props => {
+const RoleChangeContainer: FunctionComponent<Props> = props => {
   const updateUserRole = useMutation(UpdateUserRoleMutation);
   const handleOnChangeRole = useCallback(
     (role: GQLUSER_ROLE_RL) => {

src/core/client/admin/routes/community/containers/UserRowContainer.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
 import { UserRowContainer_user as UserData } from "talk-admin/__generated__/UserRowContainer_user.graphql";
@@ -14,7 +14,7 @@ interface Props {
   viewer: ViewerData;
 }
 
-const UserRowContainer: StatelessComponent<Props> = props => {
+const UserRowContainer: FunctionComponent<Props> = props => {
   const { locales } = useTalkContext();
   return (
     <UserRow

src/core/client/admin/routes/community/containers/UserStatusChangeContainer.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent, useCallback, useState } from "react";
+import React, { FunctionComponent, useCallback, useState } from "react";
 
 import { UserStatusChangeContainer_user as UserData } from "talk-admin/__generated__/UserStatusChangeContainer_user.graphql";
 import { BanUserMutation, RemoveUserBanMutation } from "talk-admin/mutations";
@@ -18,7 +18,7 @@ interface Props {
   user: UserData;
 }
 
-const UserStatusChangeContainer: StatelessComponent<Props> = props => {
+const UserStatusChangeContainer: FunctionComponent<Props> = props => {
   const banUser = useMutation(BanUserMutation);
   const removeUserBan = useMutation(RemoveUserBanMutation);
   const [showBanned, setShowBanned] = useState<boolean>(false);

src/core/client/admin/routes/community/containers/UserStatusContainer.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
 import { UserStatusContainer_user as UserData } from "talk-admin/__generated__/UserStatusContainer_user.graphql";
@@ -11,7 +11,7 @@ interface Props {
   user: UserData;
 }
 
-const UserStatusContainer: StatelessComponent<Props> = props => {
+const UserStatusContainer: FunctionComponent<Props> = props => {
   return (
     <UserStatus
       banned={props.user.status.current.includes(GQLUSER_STATUS.BANNED)}

src/core/client/admin/routes/community/containers/UserTableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent, useState } from "react";
+import React, { FunctionComponent, useState } from "react";
 import { graphql, RelayPaginationProp } from "react-relay";
 
 import { UserTableContainer_query as QueryData } from "talk-admin/__generated__/UserTableContainer_query.graphql";
@@ -20,7 +20,7 @@ interface Props {
   relay: RelayPaginationProp;
 }
 
-const UserTableContainer: StatelessComponent<Props> = props => {
+const UserTableContainer: FunctionComponent<Props> = props => {
   const users = props.query
     ? props.query.users.edges.map(edge => edge.node)
     : [];

src/core/client/admin/routes/configure/components/ConfigBox.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex } from "talk-ui/components";
 
@@ -11,7 +11,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const ConfigBox: StatelessComponent<Props> = ({
+const ConfigBox: FunctionComponent<Props> = ({
   id,
   title,
   topRight,

src/core/client/admin/routes/configure/components/ConfigurationSubHeader.tsx

@@ -1,9 +1,9 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import Subheader from "../components/Subheader";
 
-const ConfigurationSubHeader: StatelessComponent<{}> = () => (
+const ConfigurationSubHeader: FunctionComponent<{}> = () => (
   <Localized id="configure-configurationSubHeader" strong={<strong />}>
     <Subheader>Configuration</Subheader>
   </Localized>

src/core/client/admin/routes/configure/components/Configure.tsx

@@ -1,6 +1,6 @@
 import { FormApi, FormState } from "final-form";
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Form, FormSpy } from "react-final-form";
 
 import MainLayout from "talk-admin/components/MainLayout";
@@ -17,7 +17,7 @@ interface Props {
   children: React.ReactElement;
 }
 
-const Configure: StatelessComponent<Props> = ({
+const Configure: FunctionComponent<Props> = ({
   onSubmit,
   onChange,
   children,

src/core/client/admin/routes/configure/components/Header.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Typography } from "talk-ui/components";
 import { PropTypesOf } from "talk-ui/types";
@@ -8,11 +8,7 @@ import styles from "./Header.css";
 
 type Props = PropTypesOf<typeof Typography>;
 
-const Header: StatelessComponent<Props> = ({
-  children,
-  className,
-  ...rest
-}) => (
+const Header: FunctionComponent<Props> = ({ children, className, ...rest }) => (
   <Typography
     variant="heading1"
     className={cn(className, styles.root)}

src/core/client/admin/routes/configure/components/HorizontalRule.tsx

@@ -1,8 +1,8 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./HorizontalRule.css";
 
-const HorizontalRule: StatelessComponent = ({ children }) => (
+const HorizontalRule: FunctionComponent = ({ children }) => (
   <hr className={styles.root} />
 );
 

src/core/client/admin/routes/configure/components/Layout.tsx

@@ -1,9 +1,9 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Flex } from "talk-ui/components";
 
 import styles from "./Layout.css";
 
-const Layout: StatelessComponent = ({ children }) => (
+const Layout: FunctionComponent = ({ children }) => (
   <Flex className={styles.root}>{children}</Flex>
 );
 

src/core/client/admin/routes/configure/components/Main.tsx

@@ -1,8 +1,8 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./Main.css";
 
-const Main: StatelessComponent = ({ children }) => (
+const Main: FunctionComponent = ({ children }) => (
   <div className={styles.root}>{children}</div>
 );
 

src/core/client/admin/routes/configure/components/Navigation/Link.tsx

@@ -1,5 +1,5 @@
 import { Link as FoundLink, LocationDescriptor } from "found";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./Link.css";
 
@@ -9,7 +9,7 @@ interface Props {
   to: string | LocationDescriptor;
 }
 
-const Link: StatelessComponent<Props> = props => (
+const Link: FunctionComponent<Props> = props => (
   <li className={props.className}>
     <FoundLink
       to={props.to}

src/core/client/admin/routes/configure/components/Navigation/Navigation.tsx

@@ -1,8 +1,8 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./Navigation.css";
 
-const Navigation: StatelessComponent = ({ children }) => (
+const Navigation: FunctionComponent = ({ children }) => (
   <nav className={styles.root}>
     <ul className={styles.ul}>{children}</ul>
   </nav>

src/core/client/admin/routes/configure/components/OnOffField.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { parseStringBool } from "talk-framework/lib/form";
@@ -15,7 +15,7 @@ interface Props {
   offLabel?: React.ReactNode;
 }
 
-const OnOffField: StatelessComponent<Props> = ({
+const OnOffField: FunctionComponent<Props> = ({
   name,
   disabled,
   onLabel,

src/core/client/admin/routes/configure/components/PermissionField.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { parseStringBool } from "talk-framework/lib/form";
@@ -13,7 +13,7 @@ interface Props {
   invert?: boolean;
 }
 
-const PermissionField: StatelessComponent<Props> = ({
+const PermissionField: FunctionComponent<Props> = ({
   name,
   disabled,
   invert = false,

src/core/client/admin/routes/configure/components/SideBar.tsx

@@ -1,8 +1,8 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./SideBar.css";
 
-const SideBar: StatelessComponent = ({ children }) => (
+const SideBar: FunctionComponent = ({ children }) => (
   <div className={styles.root}>{children}</div>
 );
 

src/core/client/admin/routes/configure/components/Subheader.tsx

@@ -1,9 +1,9 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Typography } from "talk-ui/components";
 
 import styles from "./Subheader.css";
 
-const Subheader: StatelessComponent = ({ children }) => (
+const Subheader: FunctionComponent = ({ children }) => (
   <Typography variant="heading3" className={styles.root}>
     {children}
   </Typography>

src/core/client/admin/routes/configure/components/ValidationMessage.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { ValidationMessage as UIValidationMessage } from "talk-ui/components";
 
@@ -9,10 +9,7 @@ interface Props extends PropTypesOf<typeof UIValidationMessage> {
   children: React.ReactNode;
 }
 
-const ValidationMessage: StatelessComponent<Props> = ({
-  children,
-  ...rest
-}) => (
+const ValidationMessage: FunctionComponent<Props> = ({ children, ...rest }) => (
   <UIValidationMessage {...rest} className={styles.root}>
     {children}
   </UIValidationMessage>

src/core/client/admin/routes/configure/sections/advanced/components/AdvancedConfig.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 import { HorizontalGutter } from "talk-ui/components";
@@ -13,7 +13,7 @@ interface Props {
   onInitValues: (values: any) => void;
 }
 
-const AdvancedConfig: StatelessComponent<Props> = ({
+const AdvancedConfig: FunctionComponent<Props> = ({
   disabled,
   settings,
   onInitValues,

src/core/client/admin/routes/configure/sections/advanced/components/CustomCSSConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { formatEmpty, parseEmptyAsNull } from "talk-framework/lib/form";
@@ -17,7 +17,7 @@ interface Props {
   disabled: boolean;
 }
 
-const CustomCSSConfig: StatelessComponent<Props> = ({ disabled }) => (
+const CustomCSSConfig: FunctionComponent<Props> = ({ disabled }) => (
   <FormField>
     <HorizontalGutter size="full">
       <Localized id="configure-advanced-customCSS">

src/core/client/admin/routes/configure/sections/advanced/components/PermittedDomainsConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { formatStringList, parseStringList } from "talk-framework/lib/form";
@@ -17,7 +17,7 @@ interface Props {
   disabled: boolean;
 }
 
-const PermittedDomainsConfig: StatelessComponent<Props> = ({ disabled }) => (
+const PermittedDomainsConfig: FunctionComponent<Props> = ({ disabled }) => (
   <FormField>
     <HorizontalGutter size="full">
       <Localized id="configure-advanced-permittedDomains">

src/core/client/admin/routes/configure/sections/advanced/containers/AdvancedConfigRouteContainer.tsx

@@ -33,7 +33,7 @@ class AdvancedConfigRouteContainer extends React.Component<Props> {
   }
 }
 
-const enhanced = withRouteConfig({
+const enhanced = withRouteConfig<Props>({
   query: graphql`
     query AdvancedConfigRouteContainerQuery {
       settings {

src/core/client/admin/routes/configure/sections/auth/components/AuthConfig.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 import { HorizontalGutter } from "talk-ui/components";
@@ -11,7 +11,7 @@ interface Props {
   onInitValues: (values: any) => void;
 }
 
-const AuthConfig: StatelessComponent<Props> = ({
+const AuthConfig: FunctionComponent<Props> = ({
   disabled,
   auth,
   onInitValues,

src/core/client/admin/routes/configure/sections/auth/components/AuthIntegrationsConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 import { HorizontalGutter } from "talk-ui/components";
@@ -25,7 +25,7 @@ interface Props {
   onInitValues: (values: any) => void;
 }
 
-const AuthIntegrationsConfig: StatelessComponent<Props> = ({
+const AuthIntegrationsConfig: FunctionComponent<Props> = ({
   disabled,
   auth,
   onInitValues,

src/core/client/admin/routes/configure/sections/auth/components/ClientIDField.tsx

@@ -1,6 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import { identity } from "lodash";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { Validator } from "talk-framework/lib/validation";
@@ -14,7 +14,7 @@ interface Props {
   disabled: boolean;
 }
 
-const ClientSecretField: StatelessComponent<Props> = ({
+const ClientSecretField: FunctionComponent<Props> = ({
   name,
   disabled,
   validate,

src/core/client/admin/routes/configure/sections/auth/components/ClientSecretField.tsx

@@ -1,6 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import { identity } from "lodash";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { Validator } from "talk-framework/lib/validation";
@@ -14,7 +14,7 @@ interface Props {
   disabled: boolean;
 }
 
-const ClientSecretField: StatelessComponent<Props> = ({
+const ClientSecretField: FunctionComponent<Props> = ({
   name,
   disabled,
   validate,

src/core/client/admin/routes/configure/sections/auth/components/ConfigBoxWithToggleField.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import { parseBool } from "talk-framework/lib/form";
 
@@ -15,7 +15,7 @@ interface Props {
   children: (disabledInside: boolean) => React.ReactNode;
 }
 
-const ConfigBoxWithToggleField: StatelessComponent<Props> = ({
+const ConfigBoxWithToggleField: FunctionComponent<Props> = ({
   id,
   name,
   title,

src/core/client/admin/routes/configure/sections/auth/components/ConfigDescription.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { InputDescription } from "talk-ui/components";
 import { PropTypesOf } from "talk-ui/types";
@@ -10,7 +10,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const ConfigDescription: StatelessComponent<Props> = ({
+const ConfigDescription: FunctionComponent<Props> = ({
   children,
   container,
 }) => (

src/core/client/admin/routes/configure/sections/auth/components/FacebookConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { required, Validator } from "talk-framework/lib/validation";
 import { HorizontalGutter, TextLink, Typography } from "talk-ui/components";
@@ -33,7 +33,7 @@ const validateWhenEnabled = (validator: Validator): Validator => (
   return "";
 };
 
-const FacebookConfig: StatelessComponent<Props> = ({
+const FacebookConfig: FunctionComponent<Props> = ({
   disabled,
   callbackURL,
 }) => (

src/core/client/admin/routes/configure/sections/auth/components/GoogleConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { required, Validator } from "talk-framework/lib/validation";
 import { HorizontalGutter, TextLink, Typography } from "talk-ui/components";
@@ -35,7 +35,7 @@ const validateWhenEnabled = (validator: Validator): Validator => (
   return "";
 };
 
-const GoogleConfig: StatelessComponent<Props> = ({ disabled, callbackURL }) => (
+const GoogleConfig: FunctionComponent<Props> = ({ disabled, callbackURL }) => (
   <ConfigBoxWithToggleField
     title={
       <Localized id="configure-auth-google-loginWith">

src/core/client/admin/routes/configure/sections/auth/components/LocalAuthConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { HorizontalGutter } from "talk-ui/components";
 
@@ -11,7 +11,7 @@ interface Props {
   disabled?: boolean;
 }
 
-const LocalAuthConfig: StatelessComponent<Props> = ({ disabled }) => (
+const LocalAuthConfig: FunctionComponent<Props> = ({ disabled }) => (
   <ConfigBoxWithToggleField
     title={
       <Localized id="configure-auth-local-loginWith">

src/core/client/admin/routes/configure/sections/auth/components/OIDCConfig.tsx

@@ -1,6 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import { identity } from "lodash";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import {
@@ -42,7 +42,7 @@ const OIDCLink = () => (
   <TextLink target="_blank">{"https://openid.net/connect/"}</TextLink>
 );
 
-const OIDCConfig: StatelessComponent<Props> = ({
+const OIDCConfig: FunctionComponent<Props> = ({
   disabled,
   callbackURL,
   onDiscover,

src/core/client/admin/routes/configure/sections/auth/components/RedirectField.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { CopyButton } from "talk-framework/components";
 import { Flex, FormField, InputLabel, TextField } from "talk-ui/components";
@@ -9,7 +9,7 @@ interface Props {
   url: string;
 }
 
-const RedirectField: StatelessComponent<Props> = ({ url, description }) => (
+const RedirectField: FunctionComponent<Props> = ({ url, description }) => (
   <FormField>
     <Localized id="configure-auth-redirectURI">
       <InputLabel>Redirect URI</InputLabel>

src/core/client/admin/routes/configure/sections/auth/components/RegistrationField.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { CheckBox, FormField, InputLabel } from "talk-ui/components";
@@ -11,7 +11,7 @@ interface Props {
   disabled: boolean;
 }
 
-const RegistrationField: StatelessComponent<Props> = ({ name, disabled }) => (
+const RegistrationField: FunctionComponent<Props> = ({ name, disabled }) => (
   <FormField>
     <Localized id="configure-auth-registration">
       <InputLabel>Registration</InputLabel>

src/core/client/admin/routes/configure/sections/auth/components/SSOConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 import { HorizontalGutter } from "talk-ui/components";
@@ -14,7 +14,7 @@ interface Props {
   sso: PropTypesOf<typeof SSOKeyFieldContainer>["sso"];
 }
 
-const SSOConfig: StatelessComponent<Props> = ({ disabled, sso }) => (
+const SSOConfig: FunctionComponent<Props> = ({ disabled, sso }) => (
   <ConfigBoxWithToggleField
     title={
       <Localized id="configure-auth-sso-loginWith">

src/core/client/admin/routes/configure/sections/auth/components/SSOKeyField.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import {
   Button,
@@ -20,7 +20,7 @@ interface Props {
   onRegenerate?: () => void;
 }
 
-const SSOKeyField: StatelessComponent<Props> = ({
+const SSOKeyField: FunctionComponent<Props> = ({
   generatedKey,
   keyGeneratedAt,
   disabled,

src/core/client/admin/routes/configure/sections/auth/components/TargetFilterField.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import { parseBool } from "talk-framework/lib/form";
 
@@ -11,7 +11,7 @@ interface Props {
   disabled: boolean;
 }
 
-const TargetFilterField: StatelessComponent<Props> = ({
+const TargetFilterField: FunctionComponent<Props> = ({
   name,
   label,
   disabled,

src/core/client/admin/routes/configure/sections/auth/containers/AuthConfigRouteContainer.tsx

@@ -33,7 +33,7 @@ class AuthRouteContainer extends React.Component<Props> {
   }
 }
 
-const enhanced = withRouteConfig({
+const enhanced = withRouteConfig<Props>({
   query: graphql`
     query AuthConfigRouteContainerQuery {
       settings {

src/core/client/admin/routes/configure/sections/auth/containers/OIDCConfigContainer.tsx

@@ -1,7 +1,8 @@
 import { FormApi } from "final-form";
-import PropTypes from "prop-types";
 import React from "react";
+import { ReactContext, withReactFinalForm } from "react-final-form";
 import { graphql } from "react-relay";
+import { InferableComponentEnhancer } from "recompose";
 
 import { OIDCConfigContainer_auth as AuthData } from "talk-admin/__generated__/OIDCConfigContainer_auth.graphql";
 import { OIDCConfigContainer_authReadOnly as AuthReadOnlyData } from "talk-admin/__generated__/OIDCConfigContainer_authReadOnly.graphql";
@@ -20,6 +21,7 @@ interface Props {
   onInitValues: (values: AuthData) => void;
   disabled?: boolean;
   discoverOIDCConfiguration: FetchProp<typeof DiscoverOIDCConfigurationFetch>;
+  reactFinalForm: FormApi;
 }
 
 interface State {
@@ -27,16 +29,12 @@ interface State {
 }
 
 class OIDCConfigContainer extends React.Component<Props, State> {
-  public static contextTypes = {
-    reactFinalForm: PropTypes.object,
-  };
-
   public state = {
     awaitingResponse: false,
   };
 
   private handleDiscover = async () => {
-    const form = this.context.reactFinalForm as FormApi;
+    const form = this.props.reactFinalForm;
     this.setState({ awaitingResponse: true });
     try {
       const config = await this.props.discoverOIDCConfiguration({
@@ -75,39 +73,45 @@ class OIDCConfigContainer extends React.Component<Props, State> {
   }
 }
 
-const enhanced = withFetch(DiscoverOIDCConfigurationFetch)(
-  withFragmentContainer<Props>({
-    auth: graphql`
-      fragment OIDCConfigContainer_auth on Auth {
-        integrations {
-          oidc {
-            enabled
-            allowRegistration
-            targetFilter {
-              admin
-              stream
+// (cvle) Fix `withReactFinalForm` typings (v4.1.0), forgive this, we'll
+// probably only use hooks in the future instead anyway ;-)
+const withForm = withReactFinalForm as InferableComponentEnhancer<ReactContext>;
+
+const enhanced = withForm(
+  withFetch(DiscoverOIDCConfigurationFetch)(
+    withFragmentContainer<Props>({
+      auth: graphql`
+        fragment OIDCConfigContainer_auth on Auth {
+          integrations {
+            oidc {
+              enabled
+              allowRegistration
+              targetFilter {
+                admin
+                stream
+              }
+              name
+              clientID
+              clientSecret
+              authorizationURL
+              tokenURL
+              jwksURI
+              issuer
             }
-            name
-            clientID
-            clientSecret
-            authorizationURL
-            tokenURL
-            jwksURI
-            issuer
           }
         }
-      }
-    `,
-    authReadOnly: graphql`
-      fragment OIDCConfigContainer_authReadOnly on Auth {
-        integrations {
-          oidc {
-            callbackURL
+      `,
+      authReadOnly: graphql`
+        fragment OIDCConfigContainer_authReadOnly on Auth {
+          integrations {
+            oidc {
+              callbackURL
+            }
           }
         }
-      }
-    `,
-  })(OIDCConfigContainer)
+      `,
+    })(OIDCConfigContainer)
+  )
 );
 
 export default enhanced;

src/core/client/admin/routes/configure/sections/general/components/ClosedStreamMessageConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent, Suspense } from "react";
+import React, { FunctionComponent, Suspense } from "react";
 import { Field } from "react-final-form";
 
 import { MarkdownEditor } from "talk-framework/components/loadables";
@@ -16,7 +16,7 @@ interface Props {
   disabled: boolean;
 }
 
-const ClosedStreamMessageConfig: StatelessComponent<Props> = ({ disabled }) => (
+const ClosedStreamMessageConfig: FunctionComponent<Props> = ({ disabled }) => (
   <HorizontalGutter size="oneAndAHalf">
     <Localized id="configure-general-closedStreamMessage-title">
       <Header

src/core/client/admin/routes/configure/sections/general/components/ClosingCommentStreamsConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { DURATION_UNIT, DurationField } from "talk-framework/components";
 import {
@@ -25,7 +25,7 @@ interface Props {
   disabled: boolean;
 }
 
-const ClosingCommentStreamsConfig: StatelessComponent<Props> = ({
+const ClosingCommentStreamsConfig: FunctionComponent<Props> = ({
   disabled,
 }) => (
   <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>

src/core/client/admin/routes/configure/sections/general/components/CommentEditingConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { DURATION_UNIT, DurationField } from "talk-framework/components";
@@ -23,7 +23,7 @@ interface Props {
   disabled: boolean;
 }
 
-const CommentEditingConfig: StatelessComponent<Props> = ({ disabled }) => (
+const CommentEditingConfig: FunctionComponent<Props> = ({ disabled }) => (
   <HorizontalGutter size="oneAndAHalf">
     <Localized id="configure-general-commentEditing-title">
       <Header>Comment Editing</Header>

src/core/client/admin/routes/configure/sections/general/components/CommentLengthConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import {
@@ -38,7 +38,7 @@ interface Props {
   disabled: boolean;
 }
 
-const CommentLengthConfig: StatelessComponent<Props> = ({ disabled }) => (
+const CommentLengthConfig: FunctionComponent<Props> = ({ disabled }) => (
   <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
     <Localized id="configure-general-commentLength-title">
       <Header container="legend">Comment Length</Header>

src/core/client/admin/routes/configure/sections/general/components/GeneralConfig.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 import { HorizontalGutter } from "talk-ui/components";
@@ -21,7 +21,7 @@ interface Props {
   onInitValues: (values: any) => void;
 }
 
-const General: StatelessComponent<Props> = ({
+const General: FunctionComponent<Props> = ({
   disabled,
   settings,
   onInitValues,

src/core/client/admin/routes/configure/sections/general/components/GuidelinesConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent, Suspense } from "react";
+import React, { FunctionComponent, Suspense } from "react";
 import { Field } from "react-final-form";
 
 import { ExternalLink } from "talk-framework/lib/i18n/components";
@@ -22,7 +22,7 @@ interface Props {
   disabled: boolean;
 }
 
-const GuidelinesConfig: StatelessComponent<Props> = ({ disabled }) => (
+const GuidelinesConfig: FunctionComponent<Props> = ({ disabled }) => (
   <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
     <Localized id="configure-general-guidelines-title">
       <Header container="legend">Community Guidelines Summary</Header>

src/core/client/admin/routes/configure/sections/general/components/SitewideCommentingConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent, Suspense } from "react";
+import React, { FunctionComponent, Suspense } from "react";
 import { Field } from "react-final-form";
 
 import {
@@ -21,7 +21,7 @@ interface Props {
   disabled: boolean;
 }
 
-const SitewideCommentingConfig: StatelessComponent<Props> = ({ disabled }) => (
+const SitewideCommentingConfig: FunctionComponent<Props> = ({ disabled }) => (
   <HorizontalGutter size="oneAndAHalf" container="fieldset">
     <Localized id="configure-general-sitewideCommenting-title">
       <Header container="legend">Sitewide Commenting</Header>

src/core/client/admin/routes/configure/sections/general/containers/GeneralConfigRouteContainer.tsx

@@ -34,7 +34,7 @@ class GeneralConfigRouteContainer extends React.Component<Props> {
   }
 }
 
-const enhanced = withRouteConfig({
+const enhanced = withRouteConfig<Props>({
   getQuery: () => {
     // Start prefetching markdown editor.
     loadMarkdownEditor();

src/core/client/admin/routes/configure/sections/moderation/components/APIKeyField.tsx

@@ -1,6 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import { identity } from "lodash";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { Validator } from "talk-framework/lib/validation";
@@ -14,7 +14,7 @@ interface Props {
   disabled: boolean;
 }
 
-const APIKeyField: StatelessComponent<Props> = ({
+const APIKeyField: FunctionComponent<Props> = ({
   name,
   disabled,
   validate,

src/core/client/admin/routes/configure/sections/moderation/components/AkismetConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { ExternalLink } from "talk-framework/lib/i18n/components";
@@ -28,7 +28,7 @@ interface Props {
   disabled: boolean;
 }
 
-const AkismetConfig: StatelessComponent<Props> = ({ disabled }) => {
+const AkismetConfig: FunctionComponent<Props> = ({ disabled }) => {
   const validateWhenEnabled = (validator: Validator): Validator => (
     v,
     values

src/core/client/admin/routes/configure/sections/moderation/components/ModerationConfig.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 import { HorizontalGutter } from "talk-ui/components";
@@ -13,7 +13,7 @@ interface Props {
   onInitValues: (values: any) => void;
 }
 
-const ModerationConfig: StatelessComponent<Props> = ({
+const ModerationConfig: FunctionComponent<Props> = ({
   disabled,
   settings,
   onInitValues,

src/core/client/admin/routes/configure/sections/moderation/components/PerspectiveConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Field } from "react-final-form";
 
@@ -39,7 +39,7 @@ interface Props {
   disabled: boolean;
 }
 
-const PerspectiveConfig: StatelessComponent<Props> = ({ disabled }) => {
+const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
   const validateWhenEnabled = (validator: Validator): Validator => (
     v,
     values

src/core/client/admin/routes/configure/sections/moderation/containers/ModerationConfigRouteContainer.tsx

@@ -33,7 +33,7 @@ class ModerationConfigRouteContainer extends React.Component<Props> {
   }
 }
 
-const enhanced = withRouteConfig({
+const enhanced = withRouteConfig<Props>({
   query: graphql`
     query ModerationConfigRouteContainerQuery {
       settings {

src/core/client/admin/routes/configure/sections/organization/components/OrganizationConfig.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 import { HorizontalGutter } from "talk-ui/components";
@@ -13,7 +13,7 @@ interface Props {
   onInitValues: (values: any) => void;
 }
 
-const OrganizationConfig: StatelessComponent<Props> = ({
+const OrganizationConfig: FunctionComponent<Props> = ({
   disabled,
   settings,
   onInitValues,

src/core/client/admin/routes/configure/sections/organization/components/OrganizationContactEmailConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { required } from "talk-framework/lib/validation";
@@ -17,7 +17,7 @@ interface Props {
   disabled: boolean;
 }
 
-const OrganizationNameConfig: StatelessComponent<Props> = ({ disabled }) => (
+const OrganizationNameConfig: FunctionComponent<Props> = ({ disabled }) => (
   <FormField>
     <HorizontalGutter size="full">
       <Localized id="configure-organization-email">

src/core/client/admin/routes/configure/sections/organization/components/OrganizationNameConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { required } from "talk-framework/lib/validation";
@@ -17,7 +17,7 @@ interface Props {
   disabled: boolean;
 }
 
-const OrganizationNameConfig: StatelessComponent<Props> = ({ disabled }) => (
+const OrganizationNameConfig: FunctionComponent<Props> = ({ disabled }) => (
   <FormField>
     <HorizontalGutter size="full">
       <Localized id="configure-organization-name">

src/core/client/admin/routes/configure/sections/organization/containers/OrganizationRouteContainer.tsx

@@ -33,7 +33,7 @@ class OrganizationRouteContainer extends React.Component<Props> {
   }
 }
 
-const enhanced = withRouteConfig({
+const enhanced = withRouteConfig<Props>({
   query: graphql`
     query OrganizationRouteContainerQuery {
       settings {

src/core/client/admin/routes/configure/sections/wordList/components/BannedWordListConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { ExternalLink } from "talk-framework/lib/i18n/components";
 import {
@@ -19,7 +19,7 @@ interface Props {
   disabled: boolean;
 }
 
-const BannedWordListConfig: StatelessComponent<Props> = ({ disabled }) => (
+const BannedWordListConfig: FunctionComponent<Props> = ({ disabled }) => (
   <HorizontalGutter size="oneAndAHalf">
     <Localized id="configure-wordList-banned-bannedWordsAndPhrases">
       <Header>Banned Words and Phrases</Header>

src/core/client/admin/routes/configure/sections/wordList/components/SuspectWordListConfig.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { ExternalLink } from "talk-framework/lib/i18n/components";
 import {
@@ -19,7 +19,7 @@ interface Props {
   disabled: boolean;
 }
 
-const SuspectWordListConfig: StatelessComponent<Props> = ({ disabled }) => (
+const SuspectWordListConfig: FunctionComponent<Props> = ({ disabled }) => (
   <HorizontalGutter size="oneAndAHalf">
     <Localized id="configure-wordList-suspect-bannedWordsAndPhrases">
       <Header>Suspect Words and Phrases</Header>

src/core/client/admin/routes/configure/sections/wordList/components/WordListConfig.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 import { HorizontalGutter } from "talk-ui/components";
@@ -13,7 +13,7 @@ interface Props {
   onInitValues: (values: any) => void;
 }
 
-const WordListConfig: StatelessComponent<Props> = ({
+const WordListConfig: FunctionComponent<Props> = ({
   disabled,
   settings,
   onInitValues,

src/core/client/admin/routes/configure/sections/wordList/components/WordListTextArea.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import {
@@ -20,7 +20,7 @@ interface Props {
   disabled: boolean;
 }
 
-const WordListTextArea: StatelessComponent<Props> = ({
+const WordListTextArea: FunctionComponent<Props> = ({
   id,
   name,
   disabled,

src/core/client/admin/routes/configure/sections/wordList/containers/WordListRouteContainer.tsx

@@ -33,7 +33,7 @@ class WordListRouteContainer extends React.Component<Props> {
   }
 }
 
-const enhanced = withRouteConfig({
+const enhanced = withRouteConfig<Props>({
   query: graphql`
     query WordListRouteContainerQuery {
       settings {

src/core/client/admin/routes/login/components/CompleteAccountBox.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex, Typography } from "talk-ui/components";
 
@@ -9,7 +9,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const CompleteAccountBox: StatelessComponent<Props> = ({ title, children }) => {
+const CompleteAccountBox: FunctionComponent<Props> = ({ title, children }) => {
   return (
     <div data-testid="completeAccountBox">
       <Flex justifyContent="center">

src/core/client/admin/routes/login/components/EmailField.tsx

@@ -1,6 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import * as React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import {
   composeValidators,
@@ -18,7 +18,7 @@ interface Props {
   disabled: boolean;
 }
 
-const EmailField: StatelessComponent<Props> = props => (
+const EmailField: FunctionComponent<Props> = props => (
   <Field name="email" validate={composeValidators(required, validateEmail)}>
     {({ input, meta }) => (
       <FormField>

src/core/client/admin/routes/login/components/Login.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -11,7 +11,6 @@ export type View =
   | "SIGN_UP"
   | "SIGN_IN"
   | "FORGOT_PASSWORD"
-  | "RESET_PASSWORD"
   | "CREATE_USERNAME"
   | "CREATE_PASSWORD"
   | "ADD_EMAIL_ADDRESS"
@@ -37,7 +36,7 @@ const renderView = (view: AppProps["view"], auth: AppProps["auth"]) => {
   }
 };
 
-const App: StatelessComponent<AppProps> = ({ view, auth }) => (
+const App: FunctionComponent<AppProps> = ({ view, auth }) => (
   <div>{renderView(view, auth)}</div>
 );
 

src/core/client/admin/routes/login/views/addEmailAddress/components/AddEmailAddress.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Form } from "react-final-form";
 
 import { OnSubmit } from "talk-framework/lib/form";
@@ -22,7 +22,7 @@ export interface AddEmailAddressForm {
   onSubmit: OnSubmit<FormProps>;
 }
 
-const AddEmailAddress: StatelessComponent<AddEmailAddressForm> = props => {
+const AddEmailAddress: FunctionComponent<AddEmailAddressForm> = props => {
   return (
     <CompleteAccountBox
       title={

src/core/client/admin/routes/login/views/addEmailAddress/components/ConfirmEmailField.tsx

@@ -1,6 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import * as React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import {
   composeValidators,
@@ -18,7 +18,7 @@ interface Props {
   disabled: boolean;
 }
 
-const ConfirmEmailField: StatelessComponent<Props> = props => (
+const ConfirmEmailField: FunctionComponent<Props> = props => (
   <Field
     name="confirmEmail"
     validate={composeValidators(required, validateEqualEmails)}

src/core/client/admin/routes/login/views/addEmailAddress/components/EmailField.tsx

@@ -1,6 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import * as React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import {
   composeValidators,
@@ -18,7 +18,7 @@ interface Props {
   disabled: boolean;
 }
 
-const EmailField: StatelessComponent<Props> = props => (
+const EmailField: FunctionComponent<Props> = props => (
   <Field name="email" validate={composeValidators(required, validateEmail)}>
     {({ input, meta }) => (
       <FormField>

src/core/client/admin/routes/login/views/addEmailAddress/components/UnorderedList/ListItem.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 
 import { Icon } from "talk-ui/components";
 
@@ -9,7 +9,7 @@ interface Props {
   icon?: React.ReactNode;
 }
 
-const ListItem: StatelessComponent<Props> = props => (
+const ListItem: FunctionComponent<Props> = props => (
   <li className={styles.root}>
     <div className={styles.leftCol}>{props.icon}</div>
     <div>{props.children}</div>

src/core/client/admin/routes/login/views/addEmailAddress/components/UnorderedList/UnorderedList.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 
 import styles from "./UnorderedList.css";
 
-const UnorderedList: StatelessComponent = props => (
+const UnorderedList: FunctionComponent = props => (
   <ul className={styles.root}>{props.children}</ul>
 );
 

src/core/client/admin/routes/login/views/createPassword/components/CreatePassword.tsx

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Form } from "react-final-form";
 
 import { OnSubmit } from "talk-framework/lib/form";
@@ -21,7 +21,7 @@ export interface CreatePasswordForm {
   onSubmit: OnSubmit<FormProps>;
 }
 
-const CreatePassword: StatelessComponent<CreatePasswordForm> = props => {
+const CreatePassword: FunctionComponent<CreatePasswordForm> = props => {
   return (
     <CompleteAccountBox
       title={

src/core/client/admin/routes/login/views/createPassword/components/SetPasswordField.tsx

@@ -1,6 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import * as React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import { PasswordField } from "talk-framework/components";
 import {
@@ -19,7 +19,7 @@ interface Props {
   disabled: boolean;
 }
 
-const SetPasswordField: StatelessComponent<Props> = props => (
+const SetPasswordField: FunctionComponent<Props> = props => (
   <Field
     name="password"
     validate={composeValidators(required, validatePassword)}