Added rates containers + cached language selection

client/src/App/App.js

@@ -2,6 +2,7 @@ import React, { useEffect, Suspense, lazy, useState } from "react";
 import { useApolloClient, useQuery } from "@apollo/react-hooks";
 import { Switch, Route, Redirect } from "react-router-dom";
 import firebase from "../firebase/firebase.utils";
+import i18next from "i18next";
 
 import "./App.css";
 
@@ -12,7 +13,7 @@ import ErrorBoundary from "../components/error-boundary/error-boundary.component
 
 import { auth } from "../firebase/firebase.utils";
 import { UPSERT_USER } from "../graphql/user.queries";
-import { GET_CURRENT_USER } from "../graphql/local.queries";
+import { GET_CURRENT_USER, GET_LANGUAGE } from "../graphql/local.queries";
 // import { QUERY_BODYSHOP } from "../graphql/bodyshop.queries";
 
 import PrivateRoute from "../utils/private-route";
@@ -89,11 +90,23 @@ export default () => {
     };
   }, [apolloClient]);
   const HookCurrentUser = useQuery(GET_CURRENT_USER);
+  const HookLanguage = useQuery(GET_LANGUAGE);
 
   if (!loaded) return <LoadingSpinner />;
-  if (HookCurrentUser.loading) return <LoadingSpinner />;
-  if (HookCurrentUser.error)
-    return <AlertComponent message={HookCurrentUser.error.message} />;
+  if (HookCurrentUser.loading || HookLanguage.loading)
+    return <LoadingSpinner />;
+  if (HookCurrentUser.error || HookLanguage.error)
+    return (
+      <AlertComponent
+        message={HookCurrentUser.error.message || HookLanguage.error.message}
+      />
+    );
+
+  if (HookLanguage.data.language)
+    i18next.changeLanguage(HookLanguage.data.language, (err, t) => {
+      if (err)
+        return console.log("Error encountered when changing languages.", err);
+    });
 
   return (
     <div>

client/src/components/current-user-dropdown/current-user-dropdown.component.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery, useApolloClient } from "@apollo/react-hooks";
 import { Avatar, Col, Dropdown, Icon, Menu, Row } from "antd";
 import i18next from "i18next";
 import React from "react";
@@ -12,13 +12,14 @@ import SignOut from "../sign-out/sign-out.component";
 export default function CurrentUserDropdown() {
   const { t } = useTranslation();
   const { loading, error, data } = useQuery(GET_CURRENT_USER);
+  const client = useApolloClient();
 
   const handleMenuClick = e => {
-    console.log("e", e);
     if (e.item.props.actiontype === "lang-select") {
       i18next.changeLanguage(e.key, (err, t) => {
         if (err)
           return console.log("Error encountered when changing languages.", err);
+        client.writeData({ data: { language: e.key } });
       });
     }
   };

client/src/components/jobs-list/jobs-list.component.jsx

@@ -25,6 +25,7 @@ export default withRouter(function JobsList({
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
+      width: "8%",
       // onFilter: (value, record) => record.ro_number.includes(value),
       // filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => alphaSort(a, b),
@@ -45,6 +46,7 @@ export default withRouter(function JobsList({
       key: "owner",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+      width: "25%",
       sortOrder:
         state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
       render: (text, record) => {
@@ -64,6 +66,7 @@ export default withRouter(function JobsList({
       title: t("jobs.fields.phone1"),
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
+      width: "12%",
       ellipsis: true,
       render: (text, record) => {
         return record.ownr_ph1 ? (
@@ -86,6 +89,7 @@ export default withRouter(function JobsList({
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
+      width: "10%",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a, b),
       sortOrder:
@@ -99,6 +103,7 @@ export default withRouter(function JobsList({
       title: t("jobs.fields.vehicle"),
       dataIndex: "vehicle",
       key: "vehicle",
+      width: "15%",
       ellipsis: true,
       render: (text, record) => {
         return record.vehicle ? (
@@ -115,6 +120,7 @@ export default withRouter(function JobsList({
       title: t("vehicles.fields.plate_no"),
       dataIndex: "plate_no",
       key: "plate_no",
+      width: "8%",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a, b),
       sortOrder:
@@ -131,6 +137,7 @@ export default withRouter(function JobsList({
       title: t("jobs.fields.clm_no"),
       dataIndex: "clm_no",
       key: "clm_no",
+      width: "12%",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a, b),
       sortOrder:
@@ -147,11 +154,12 @@ export default withRouter(function JobsList({
       title: t("jobs.fields.clm_total"),
       dataIndex: "clm_total",
       key: "clm_total",
-      sorter: (a, b) => {
-        return a > b;
-      },
-      sortOrder:
-        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
+      width: "8%",
+      // sorter: (a, b) => {
+      //   return a > b;
+      // },
+      // sortOrder:
+      //   state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
       render: (text, record) => {
         return record.clm_total ? (
           <span>{record.clm_total}</span>
@@ -164,6 +172,7 @@ export default withRouter(function JobsList({
       title: t("jobs.fields.owner_owing"),
       dataIndex: "owner_owing",
       key: "owner_owing",
+      width: "8%",
       render: (text, record) => {
         return record.owner_owing ? (
           <span>{record.owner_owing}</span>

client/src/components/jobs-rates/jobs-rates.component.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function JobsRatesComponent() {
+  return <div>Jobs Rates Comp</div>;
+}

client/src/components/jobs-rates/jobs-rates.container.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import JobsRatesComponent from "./jobs-rates.component";
+
+export default function JobsRatesContainer() {
+  return <JobsRatesComponent />;
+}

client/src/components/language-selector/langauge-selector.component.jsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import i18next from "i18next";
-import { Dropdown, Menu, Icon } from "antd";
-
-export default function LanguageSelector() {
-  const { t } = useTranslation();
-
-  const handleMenuClick = e => {
-    i18next.changeLanguage(e.key, (err, t) => {
-      if (err)
-        return console.log("Error encountered when changing languages.", err);
-    });
-  };
-  const menu = (
-    <Menu onClick={handleMenuClick}>
-      <Menu.Item key="en_us">{t("general.languages.english")}</Menu.Item>
-      <Menu.Item key="fr">{t("general.languages.french")}</Menu.Item>
-      <Menu.Item key="es">{t("general.languages.spanish")}</Menu.Item>
-    </Menu>
-  );
-  return (
-    <Dropdown overlay={menu}>
-      <Icon type="global" />
-    </Dropdown>
-  );
-}

client/src/graphql/initial-state.js

@@ -3,5 +3,6 @@ export default {
   currentUser: null,
   selectedNavItem: "Home",
   recentItems: [],
-  bodyShopData: null
+  bodyShopData: null,
+  language: "en_us"
 };

client/src/graphql/jobs.queries.js

@@ -27,8 +27,8 @@ export const GET_ALL_OPEN_JOBS = gql`
   }
 `;
 
-export const SUBSCRIPTION_ALL_OPEN_JOBS = gql`
-  subscription SUBSCRIPTION_ALL_OPEN_JOBS {
+export const QUERY_ALL_OPEN_JOBS = gql`
+  query QUERY_ALL_OPEN_JOBS {
     jobs {
       ownr_fn
       ownr_ln

client/src/graphql/local.queries.js

@@ -1,13 +1,5 @@
 import { gql } from "apollo-boost";
 
-export const SET_CURRENT_USER = gql`
-  mutation SetCurrentUser($user: User!) {
-    setCurrentUser(user: $user) @client {
-      email
-    }
-  }
-`;
-
 export const GET_CURRENT_USER = gql`
   query GET_CURRENT_USER {
     currentUser @client {
@@ -26,16 +18,8 @@ export const GET_CURRENT_SELECTED_NAV_ITEM = gql`
   }
 `;
 
-export const GET_WHITE_BOARD_LEFT_SIDER_VISIBLE = gql`
-  {
-    whiteBoardLeftSiderVisible @client
-  }
-`;
-
-export const GET_BODYSHOP = gql`
-  query LOCAL_GET_BODY_SHOP {
-    bodyShopData @client {
-      shopname 
-    }
+export const GET_LANGUAGE = gql`
+  query GET_USER_LANGUAGE {
+    language @client
   }
 `;

client/src/pages/jobs-detail/jobs-detail.page.jsx

@@ -7,6 +7,7 @@ import JobLinesContainer from "../../components/job-lines/job-lines.container.co
 import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
 import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
 import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
+import JobsRatesContainer from "../../components/jobs-rates/jobs-rates.container";
 
 function JobsDetailPage({ jobId, hash, data, match, history }) {
   const { t } = useTranslation();
@@ -39,7 +40,7 @@ function JobsDetailPage({ jobId, hash, data, match, history }) {
               </span>
             }
             key='#rates'>
-            Estimate Rates
+            <JobsRatesContainer />
           </Tabs.TabPane>
           <Tabs.TabPane
             tab={

client/src/pages/jobs/jobs.page.jsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from "react";
-import { useSubscription } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../../components/alert/alert.component";
 import { Col } from "antd";
-import { SUBSCRIPTION_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
+import { QUERY_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
 import { useTranslation } from "react-i18next";
 import JobsList from "../../components/jobs-list/jobs-list.component";
 import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
 
 //TODO: Implement pagination for this.
 export default function JobsPage({ match, location }) {
-  const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
+  const { loading, error, data } = useQuery(QUERY_ALL_OPEN_JOBS, {
     fetchPolicy: "network-only"
   });
   const { t } = useTranslation();