Redirect to last selected project id (#22)

* Redirect to last selected project id * Remove unnecessary import * Fix lint warning * Remove unnecessary variable Co-authored-by: Tio Pramayudi <[email protected]>
caraml-dev · Jun 3, 2021 · 1745a94 · 1745a94
1 parent 39c65a2
commit 1745a94
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 50 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gojek/mlp-ui",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "private": true,
   "repository": {
     "type": "git",

diff --git a/ui/packages/app/package.json b/ui/packages/app/package.json
@@ -1,12 +1,12 @@
 {
   "name": "mlp-ui",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
     "@elastic/datemath": "5.0.3",
     "@elastic/eui": "31.10.0",
-    "@gojek/mlp-ui": "1.4.1",
+    "@gojek/mlp-ui": "1.4.4",
     "@reach/router": "1.3.3",
     "@sentry/browser": "5.15.5",
     "moment": "2.25.3",

diff --git a/ui/packages/app/src/pages/Home.js b/ui/packages/app/src/pages/Home.js
@@ -1,50 +1,19 @@
-import React, { Fragment } from "react";
-import {
-  EuiButton,
-  EuiCard,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiFlexGrid,
-  EuiEmptyPrompt
-} from "@elastic/eui";
-import { ApplicationsContext } from "@gojek/mlp-ui";
+import React, { useContext } from "react";
+import { EuiLoadingContent, EuiPage, EuiPageBody } from "@elastic/eui";
+import { CurrentProjectContext } from "@gojek/mlp-ui";
+import { Redirect } from "@reach/router";
 
 const Home = () => {
-  return (
-    <Fragment>
-      <EuiEmptyPrompt
-        iconType="machineLearningApp"
-        title={<h2>Machine Learning Platform</h2>}
-      />
-      <EuiFlexGroup style={{ paddingLeft: 50, paddingRight: 50 }}>
-        <EuiFlexItem grow={false} style={{ margin: "auto" }}>
-          <EuiFlexGrid columns={3}>
-            <ApplicationsContext.Consumer>
-              {({ apps }) =>
-                apps.map((app, idx) => {
-                  return (
-                    <EuiFlexItem key={idx}>
-                      <EuiCard
-                        icon={<EuiIcon size="xxl" type={app.icon} />}
-                        title={app.name}
-                        description={app.description}
-                        footer={
-                          <EuiButton href={app.href}>
-                            Go to {app.name}
-                          </EuiButton>
-                        }
-                        betaBadgeLabel={app.is_in_beta ? "Beta" : undefined}
-                      />
-                    </EuiFlexItem>
-                  );
-                })
-              }
-            </ApplicationsContext.Consumer>
-          </EuiFlexGrid>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </Fragment>
+  const { projectId } = useContext(CurrentProjectContext);
+
+  return projectId === null ? (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiLoadingContent lines={5} />
+      </EuiPageBody>
+    </EuiPage>
+  ) : (
+    <Redirect to={`/projects/${projectId}`} noThrow />
   );
 };
 

diff --git a/ui/packages/lib/package.json b/ui/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gojek/mlp-ui",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

diff --git a/ui/packages/lib/src/providers/project/currentProjectContext.js b/ui/packages/lib/src/providers/project/currentProjectContext.js
@@ -2,10 +2,33 @@ import React, { useContext, useMemo } from "react";
 import ProjectsContext from "./projectsContext";
 
 const CurrentProjectContext = React.createContext({});
+const projectIdKey = "lastSelectedProjectId";
+
+const getSelectedProjectId = (projectId, projects) => {
+  if (projectId !== undefined) {
+    localStorage.setItem(projectIdKey, projectId);
+    return projectId;
+  }
+
+  let lastSelectedProjectId = localStorage.getItem(projectIdKey);
+
+  if (localStorage.getItem(projectIdKey) === null) {
+    if (projects.length > 0) {
+      const selectedProject = projects.sort((a, b) =>
+        a.name.localeCompare(b.name)
+      )[0];
+      lastSelectedProjectId = selectedProject.id;
+    }
+  }
+  if (lastSelectedProjectId !== null) {
+    localStorage.setItem(projectIdKey, lastSelectedProjectId);
+  }
+  return lastSelectedProjectId;
+};
 
 export const CurrentProjectContextProvider = ({ projectId, children }) => {
   const { projects, refresh } = useContext(ProjectsContext);
-
+  projectId = getSelectedProjectId(projectId, projects);
   const project = useMemo(() => {
     return !!projects
       ? projects.find(p => String(p.id) === projectId)