feat(project-list): highlight active link.

src/commons/route/active-link.tsx

@@ -0,0 +1,20 @@
+import { ActiveHookProps, Link, LinkProps, useActive } from '@curi/react-dom';
+import React, { FC, ReactNode } from 'react';
+
+export type ActiveLinkProps = ActiveHookProps &
+  LinkProps & {
+    className?: string;
+    children: ReactNode;
+  };
+
+export const ActiveLink:FC<ActiveLinkProps> = ({ name, params, partial, className = "", ...rest }) => {
+  const active = useActive({ name, params, partial });
+  return (
+    <Link
+      name={name}
+      params={params}
+      {...rest}
+      className={active ? `${className} active` : className}
+    />
+  );
+};

src/pipelines/pipeline-list.tsx

@@ -3,7 +3,6 @@ import { Link } from '@curi/react-dom';
 import { List, ListItem, Typography, ListItemText } from '@material-ui/core';
 import { FC } from 'react';
 import { Pipeline } from '../generated/graphql';
-import { Fragment } from 'react';
 import { CallMerge } from '@material-ui/icons';
 
 interface Props {

src/projects/project-panel.tsx

@@ -1,12 +1,12 @@
-import { gql, useQuery } from '@apollo/client';
+import { gql, useQuery } from "@apollo/client";
-import { Link, useRouter } from '@curi/react-dom';
+import { Link } from "@curi/react-dom";
-import { Box, List, ListItem } from '@material-ui/core';
+import { Box, List, ListItem, makeStyles, Theme } from "@material-ui/core";
-import { find, propEq } from 'ramda';
+import { FC } from "react";
-import React, { useState, FC, useEffect } from 'react';
+import { Project } from "../generated/graphql";
-import { Project } from '../generated/graphql';
+import { ListItemText } from "@material-ui/core";
-import { ListItemText } from '@material-ui/core';
+import { Button } from "@material-ui/core";
-import { Button } from '@material-ui/core';
+import { AddBox } from "@material-ui/icons";
-import { AddBox } from '@material-ui/icons';
+import { ActiveLink } from "../commons/route/active-link";
 
 const PROJECTS = gql`
   query Projects {
@@ -21,13 +21,31 @@ const PROJECTS = gql`
   }
 `;
 
+const useStyles = makeStyles((theme: Theme) => ({
+  item: {
+    position: "relative",
+    ".active &": {
+      backgroundColor: theme.palette.background.default,
+    },
+    ".active &::before": {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      content: '""',
+      display: "block",
+      borderLeftColor: theme.palette.secondary.main,
+      borderLeftWidth: 4,
+      borderLeftStyle: "solid",
+    },
+  },
+}));
+
 export function ProjectPanel() {
   return (
     <section>
       <Box m={2}>
-        <Link
+        <Link name="create-project">
-          name="create-project"
-        >
           <Button
             variant="contained"
             color="primary"
@@ -44,32 +62,23 @@ export function ProjectPanel() {
 }
 
 const ProjectList: FC<{}> = () => {
-  const { data, refetch } = useQuery<{
+  const { data } = useQuery<{
     projects: Project[];
   }>(PROJECTS);
   const projects = data?.projects;
-  const [currentProject, setCurrentProject] = useState<Project | undefined>(
-    undefined
-  );
-  const { current } = useRouter();
 
-  useEffect(() => {
+  const classes = useStyles();
-    const currId = current()?.response?.params.projectId;
-    console.log(currId);
-    setCurrentProject(find(propEq("id", currId), projects ?? []));
-  }, [current, projects]);
 
   const items = projects?.map((item) => (
-    <Link
+    <ActiveLink
       name="project-detail"
       params={{ projectId: item.id }}
       key={item.id}
-      onNav={() => setCurrentProject(item)}
     >
-      <ListItem button>
+      <ListItem button className={classes.item}>
         <ListItemText primary={item.name} secondary={item.comment} />
       </ListItem>
-    </Link>
+    </ActiveLink>
   ));
   return <List>{items}</List>;
 };