Perf exm feed

.github/workflows/exm.yaml

@@ -0,0 +1,61 @@
+name: exm feed CI
+
+on:
+  push:
+    branches:
+      - dev
+      - staging
+      - perf-exm-feed
+    paths:
+      - "exm/**"
+      - ".github/workflows/exm.yaml"
+  pull_request:
+    branches:
+      - master
+      - develop
+      - apm
+      - staging
+      - perf-exm-feed
+    paths:
+      - "exm/**"
+
+jobs:
+  exm:
+    runs-on: ubuntu-20.04
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js 14.20.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.20.x
+
+      # https://github.com/actions/cache/blob/master/examples.md#node---yarn
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-exm-${{ hashFiles('yarn.lock', 'exm/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-exm-
+            ${{ runner.os }}-yarn-
+
+      - name: Build
+        run: |
+          cd exm
+          rm -rf node_modules
+          yarn install --frozen-lockfile
+          yarn build
+
+      - name: Build docker image
+        if: github.event_name == 'push' && ( github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/staging' || github.ref == 'refs/heads/perf-exm-feed' )
+        run: |
+          cd exm
+          echo ${{ secrets.DOCKERHUB_TOKEN }} | docker login -u ${{ secrets.DOCKERHUB_USERNAME }} --password-stdin
+          docker build -t erxes/exm:${GITHUB_REF#refs/heads/} -f Dockerfile .
+          docker push erxes/exm:${GITHUB_REF#refs/heads/}

exm/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }],
+  [
+    "module-resolver",
+    {
+      "root": ["./"],
+      "alias": {
+        "modules": "./components"
+      }
+    }
+  ]]
+}

exm/.env.sample

@@ -0,0 +1,4 @@
+REACT_APP_DOMAIN=http://localhost:4000
+REACT_APP_SUBSCRIPTION_URL=ws://localhost:4000/graphql
+
+PORT=4200

exm/Dockerfile

@@ -0,0 +1,7 @@
+FROM node:12.19-alpine
+WORKDIR /exm/
+RUN chown -R node:node /exm
+COPY --chown=node:node . /exm
+USER node
+ENTRYPOINT [ "sh", "./docker-entrypoint.sh" ]
+CMD [ "yarn", "start" ]

exm/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

exm/docker-entrypoint.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+
+ENV="$(cat <<EOF
+  window.env = {
+      REACT_APP_DOMAIN: "$REACT_APP_DOMAIN",
+      REACT_APP_SUBSCRIPTION_URL: "$REACT_APP_SUBSCRIPTION_URL",
+  }
+EOF
+)"
+
+echo $ENV > /exm/static/js/env.js
+
+exec "$@"

exm/modules/WebSocketLink.ts

@@ -0,0 +1,26 @@
+import { ApolloLink, FetchResult, Observable, Operation } from '@apollo/client';
+import { Client, ClientOptions, createClient } from 'graphql-ws';
+
+import { print } from 'graphql';
+
+export default class WebSocketLink extends ApolloLink {
+    private client: Client;
+
+    constructor(options: ClientOptions) {
+      super();
+      this.client = createClient(options);
+    }
+
+    public request(operation: Operation): Observable<FetchResult> {
+      return new Observable((sink) => {
+        return this.client.subscribe<FetchResult>(
+          { ...operation, query: print(operation.query) },
+          {
+            next: sink.next.bind(sink),
+            complete: sink.complete.bind(sink),
+            error: sink.error.bind(sink),
+          },
+        );
+      });
+    }
+  }

exm/modules/apolloClient.ts

@@ -0,0 +1,72 @@
+import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
+
+import { getEnv } from "../utils/configs";
+import { getMainDefinition } from '@apollo/client/utilities';
+import { onError } from '@apollo/client/link/error';
+import { setContext } from '@apollo/client/link/context';
+import { split } from '@apollo/client/link/core';
+
+const { REACT_APP_API_URL } = getEnv();
+
+// Create an http link:
+const httpLink = createHttpLink({
+  uri: `${REACT_APP_API_URL}/graphql`,
+  credentials: 'include'
+});
+
+// Error handler
+const errorLink = onError(({ graphQLErrors }) => {
+  if (graphQLErrors && graphQLErrors.length > 0) {
+    const [error] = graphQLErrors;
+
+    if (error.message === 'Login required') {
+      window.location.reload();
+    }
+  }
+});
+
+const authLink = setContext((_, { headers }) => {
+  return {
+    headers: {
+      ...headers,
+      sessioncode: sessionStorage.getItem('sessioncode') || ''
+    }
+  };
+});
+
+// Combining httpLink and warelinks altogether
+const httpLinkWithMiddleware = errorLink.concat(authLink).concat(httpLink);
+
+// Subscription config
+// export const wsLink: any = new WebSocketLink({
+//   url: REACT_APP_API_SUBSCRIPTION_URL || 'ws://localhost:4000/graphql',
+//   retryAttempts: 1000,
+//   retryWait: async () => {
+//     await new Promise(resolve => setTimeout(resolve, 5000));
+//   }
+// });
+
+type Definintion = {
+  kind: string;
+  operation?: string;
+};
+
+// Setting up subscription with link
+const link = split(
+  // split based on operation type
+  ({ query }) => {
+    const { kind, operation }: Definintion = getMainDefinition(query);
+    return kind === 'OperationDefinition' && operation === 'subscription';
+  },
+  // wsLink,
+  httpLinkWithMiddleware
+);
+
+// Creating Apollo-client
+const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  queryDeduplication: false,
+  link
+});
+
+export default client;

exm/modules/appContext.tsx

@@ -0,0 +1,41 @@
+import React, { createContext } from "react";
+import { gql, useQuery } from "@apollo/client";
+
+import { CurrentUserQueryResponse } from "./auth/types";
+import Spinner from "./common/Spinner";
+import queries from "./auth/graphql/queries";
+
+const AppContext = createContext({});
+
+export const AppConsumer = AppContext.Consumer;
+
+type Props = {
+  children: any;
+};
+
+function AppProvider({ children }: Props) {
+  const { data, loading } = useQuery<CurrentUserQueryResponse>(
+    gql(queries.currentUser),
+    {
+      fetchPolicy: "network-only",
+    }
+  );
+
+  if (loading) {
+    return <Spinner />;
+  }
+
+  const currentUser = data?.currentUser || null;
+
+  return (
+    <AppContext.Provider
+      value={{
+        currentUser,
+      }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+}
+
+export default AppProvider;

exm/modules/auth/components/ForgotPassword.tsx

@@ -0,0 +1,74 @@
+import { AuthBox } from "../styles";
+import Button from "../../common/Button";
+import FormControl from "../../common/form/Control";
+import FormGroup from "../../common/form/Group";
+import Link from "next/link";
+import React from "react";
+import { __ } from "../../../utils";
+import { getThemeItem } from "../../utils";
+import { readFile } from "../../common/utils";
+
+type Props = {
+  forgotPassword: (
+    doc: { email: string },
+    callback: (e: Error) => void
+  ) => void;
+};
+
+class ForgotPassword extends React.Component<Props, { email: string }> {
+  constructor(props) {
+    super(props);
+
+    this.state = { email: "" };
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+
+    const { email } = this.state;
+
+    this.props.forgotPassword({ email }, (err) => {
+      if (!err) {
+        window.location.href = "/sign-in";
+      }
+    });
+  };
+
+  handleEmailChange = (e) => {
+    e.preventDefault();
+    this.setState({ email: e.target.value });
+  };
+
+  renderLogo() {
+    const logo = "/images/logo-dark.png";
+    const thLogo = getThemeItem("logo");
+    return thLogo ? readFile(thLogo) : `/images/${logo}`;
+  }
+
+  render() {
+    return (
+      <AuthBox>
+        <img src={this.renderLogo()} alt="erxes" />
+        <h2>{__("Reset your password")}</h2>
+        <p>{__("Please reset your password via email")}</p>
+        <form onSubmit={this.handleSubmit}>
+          <FormGroup>
+            <FormControl
+              type="email"
+              placeholder={__("Enter your email")}
+              value={this.state.email}
+              required={true}
+              onChange={this.handleEmailChange}
+            />
+          </FormGroup>
+          <Button type="submit" block={true}>
+            Email me the instruction
+          </Button>
+        </form>
+        <Link href="/sign-in">{__("Sign in")}</Link>
+      </AuthBox>
+    );
+  }
+}
+
+export default ForgotPassword;