Implement Timestamp

Merge branch 'next' into timestamp

Fix test and translations

Merge branch 'timestamp' of github.com:coralproject/talk into timestamp

* 'timestamp' of github.com:coralproject/talk:
  Fix test and translations
  Implement Timestamp

src/core/client/framework/lib/bootstrap/TalkContext.tsx

@@ -1,7 +1,9 @@
 import { LocalizationProvider } from "fluent-react/compat";
 import { MessageContext } from "fluent/compat";
 import React, { StatelessComponent } from "react";
+import { Formatter } from "react-timeago";
 import { Environment } from "relay-runtime";
+import { UIContext } from "talk-ui/components";
 
 export interface TalkContext {
   // relayEnvironment for our relay framework.
@@ -9,6 +11,9 @@ export interface TalkContext {
 
   // localMessages for our i18n framework.
   localeMessages: MessageContext[];
+
+  // formatter for timeago.
+  timeagoFormatter: Formatter;
 }
 
 const { Provider, Consumer } = React.createContext<TalkContext>({} as any);
@@ -27,7 +32,9 @@ export const TalkContextProvider: StatelessComponent<{
 }> = ({ value, children }) => (
   <Provider value={value}>
     <LocalizationProvider messages={value.localeMessages}>
-      {children}
+      <UIContext.Provider value={{ timeagoFormatter: value.timeagoFormatter }}>
+        {children}
+      </UIContext.Provider>
     </LocalizationProvider>
   </Provider>
 );

src/core/client/framework/lib/bootstrap/createContext.tsx

@@ -1,4 +1,7 @@
+import { Localized } from "fluent-react/compat";
 import { noop } from "lodash";
+import React from "react";
+import { Formatter } from "react-timeago";
 import { Environment, Network, RecordSource, Store } from "relay-runtime";
 
 import { generateMessages, LocalesData, negotiateLanguages } from "../i18n";
@@ -16,6 +19,25 @@ interface CreateContextArguments {
   init?: ((context: TalkContext) => void | Promise<void>);
 }
 
+/**
+ * timeagoFormatter integrates timeago into our translation
+ * framework. It gets injected into the UIContext.
+ */
+export const timeagoFormatter: Formatter = (value, unit, suffix) => {
+  // We use 'in' instead of 'from now' for language consistency
+  const ourSuffix = suffix === "from now" ? "in" : suffix;
+  return (
+    <Localized
+      id="framework-timeago"
+      $value={value}
+      $unit={unit}
+      $suffix={ourSuffix}
+    >
+      <span>now</span>
+    </Localized>
+  );
+};
+
 /**
  * `createContext` manages the dependencies of our framework
  * and returns a `TalkContext` that can be passed to the
@@ -46,6 +68,7 @@ export default async function createContext({
   const context = {
     relayEnvironment,
     localeMessages,
+    timeagoFormatter,
   };
 
   // Run custom initializations.