Added association tracking

client/src/components/profile-content/profile-content.component.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
 import ProfileMyComponent from "../profile-my/profile-my.component";
+import ProfileShopsContainer from "../profile-shops/profile-shops.container";
 
 export default function ProfileContent({ sidebarSelection }) {
   const { t } = useTranslation();
@@ -10,7 +11,7 @@ export default function ProfileContent({ sidebarSelection }) {
     case "profile":
       return <ProfileMyComponent />;
     case "shops":
-      return <div>Shop stuff</div>;
+      return <ProfileShopsContainer />;
     default:
       return (
         <AlertComponent message={t("profile.errors.state")} type="error" />

client/src/components/profile-my/profile-my.component.jsx

@@ -44,7 +44,14 @@ export default connect(
 
     return (
       <div>
-        <AlertComponent message={"hi"} />
+        {isFieldsTouched() ? (
+          //TODO: Appropriate Error
+          <AlertComponent
+            message={t("jobs.errors.validation")}
+            onClick={() => resetFields()}
+          />
+        ) : null}
+
         <Form onSubmit={handleSubmit} autoComplete={"no"}>
           <Form.Item label={t("user.fields.displayname")}>
             {getFieldDecorator("displayname", {
@@ -58,7 +65,7 @@ export default connect(
             htmlType="submit"
             onClick={handleSubmit}
           >
-            Save
+            {t("user.actions.updateprofile")}
           </Button>
         </Form>
       </div>

client/src/components/profile-shops/profile-shops.component.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Table, Button } from "antd";
+export default function ProfileShopsComponent({
+  loading,
+  data,
+  updateActiveShop
+}) {
+  const { t } = useTranslation();
+
+  const columns = [
+    {
+      title: t("associations.fields.shopname"),
+      dataIndex: "shopname",
+      key: "shopname",
+      width: "25%",
+      render: (text, record) => <span>{record.bodyshop.shopname}</span>
+    },
+    {
+      title: t("associations.fields.active"),
+      dataIndex: "active",
+      key: "active",
+      width: "25%",
+      render: (text, record) => <span>{record.active ? "Yes" : "No"}</span>
+    },
+    {
+      title: t("associations.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      width: "25%",
+      render: (text, record) => (
+        <span>
+          {record.active ? null : (
+            <Button onClick={() => updateActiveShop(record.id)}>
+              Activate
+            </Button>
+          )}
+        </span>
+      )
+    }
+  ];
+
+  return (
+    <Table
+      loading={loading}
+      size="small"
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={data}
+    />
+  );
+}

client/src/components/profile-shops/profile-shops.container.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { useQuery } from "react-apollo";
+import { QUERY_ALL_ASSOCIATIONS } from "../../graphql/associations.queries";
+import AlertComponent from "../alert/alert.component";
+import ProfileShopsComponent from "./profile-shops.component";
+
+export default function ProfileShopsContainer() {
+  
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ASSOCIATIONS);
+
+  const updateActiveShop = activeShopId => {
+    console.log("activeShopId", activeShopId);
+    refetch();
+  };
+
+  if (error) return <AlertComponent type="error" message={error.message} />;
+  return (
+    <ProfileShopsComponent
+      loading={loading}
+      data={data ? data.associations : null}
+      updateActiveShop={updateActiveShop}
+    />
+  );
+}