Merge pull request #81 from mbwatson/dashboard-api

Dashboard api

components/people/person-card.js

@@ -16,7 +16,7 @@ export const PersonCard = ({ person, showTitle = false, anchorName }) => {
         "& a": { textDecoration: "none" },
       }}
     >
-      <Link to={`/people/${person.slug}`}>
+      <Link to={`/people/${person.personId}`}>
         <Box sx={{
           display: "flex",
           flexDirection: "column",
@@ -35,7 +35,7 @@ export const PersonCard = ({ person, showTitle = false, anchorName }) => {
                 width: 100,
               },
             }}
-            image={person.photoURL ? person.photoURL : avatar.src}
+            image={`https://dashboard.renci.org/api/webinfo/people/${person.personId}/photo`}
             alt={`${person.firstName} ${person.lastName} photo`}
           />
 

components/projectSpotlight.js

@@ -5,6 +5,7 @@ import { Link } from './link'
 import { Pre } from './pre'
 import { useTheme } from '@mui/material/styles'
 import { MarkdownLess } from './markdown'
+import serverRacks from '../images/racks.jpg'
 
 export const ProjectCard = ({project}) => {
   const styles = {
@@ -61,15 +62,16 @@ export const ProjectCard = ({project}) => {
       }
     }
   }
+
   return (
     <Card sx={styles.project} key={project.slug}>
       <CardActionArea component={Link} to={ `/projects/${ project.slug }` }>
-          <CardMedia component={'img'} src={ project.featuredImage  } sx={styles.cardMedia} />
+          <CardMedia component={'img'} src={ project.featuredImage.length > 0 ? project.featuredImage[0].url : serverRacks.src } sx={styles.cardMedia} />
           <Box sx={styles.textOverlay}>
-            <Typography variant='h6'>{project.shortTitle ? project.shortTitle : project.name}</Typography>
+            <Typography variant='h6'>{project.shortTitle ? project.shortTitle : project.webName}</Typography>
           </Box>
       </CardActionArea>
-      <CardContent sx={project.description ? styles.description : styles.noSnippet}>
+      <CardContent sx={project.webDescription ? styles.description : styles.noSnippet}>
         <MarkdownLess paragraph >{ project.snippet }</MarkdownLess>
       </CardContent>
       <CardContent>

components/projects/search-bar.js

@@ -0,0 +1,53 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { styled } from "@mui/material";
+import TextField from "@mui/material/TextField";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+
+const StyledAutocompleteSearch = styled("div")(
+  ({ theme, bottomBorderRadius = true }) => `
+    display: flex;
+    border-radius: inherit;
+    border-bottom-left-radius: ${bottomBorderRadius ? "inherit" : 0};
+    border-bottom-right-radius: ${bottomBorderRadius ? "inherit" : 0};
+  
+    &.focused {
+      border-color: ${theme.palette.primary.main}90;
+      box-shadow: 0 0 0 3px ${theme.palette.primary.main}a0;
+    }
+  
+    &:focus-visible {
+      outline: 0;
+    }
+  `
+);
+
+export const SearchBar = ({ setSearchQuery, options }) => {
+  return (
+    <FormControl
+      style={{
+        width: "100%",
+      }}
+    >
+      <FormLabel>Project Search</FormLabel>
+      <StyledAutocompleteSearch>
+        <TextField
+              style={{
+                width: "100%",
+              }}
+          id="search-bar"
+          onInput={(e) => {
+            setSearchQuery(e.target.value.toLowerCase());
+          }}
+          placeholder="Search..."
+        />
+      </StyledAutocompleteSearch>
+    </FormControl>
+  );
+};
+
+SearchBar.propTypes = {
+  setSearchQuery: PropTypes.func.isRequired,
+  options: PropTypes.array.isRequired,
+};

lib/dashboard/collaborations.js

@@ -0,0 +1,7 @@
+import { fetchFromDashboard } from "@/utils/dashboard";
+
+export const fetchDashboardCollaborations = async () => {
+  const payload = await fetchFromDashboard("collaborations");
+
+  return payload;
+};

lib/dashboard/organizations.js

@@ -0,0 +1,7 @@
+import { fetchFromDashboard } from "@/utils/dashboard";
+
+export const fetchOrganizations = async () => {
+  const payload = await fetchFromDashboard("organizations");
+
+  return payload;
+};

lib/dashboard/people.js

@@ -0,0 +1,65 @@
+import { fetchFromDashboard } from "@/utils/dashboard";
+
+export const fetchDashboardPeople = async () => {
+  const payload = await fetchFromDashboard("people");
+
+  let ood = [{
+    active: true,
+    email
+      :
+      "[email protected]",
+    firstName
+      :
+      "Ashok",
+    fullName
+      :
+      "Ashok Krishnamurthy",
+    lastName
+      :
+      "Krishnamurthy",
+    photoData
+      :
+      "https://radx-images.s3.amazonaws.com/ashok_krishnamurthy_83f4cde9ac.jpeg",
+    pid
+      :
+      "720441075",
+    personId: "_5SMp4qd1tUKnpfA_niwgnQ",
+    slug
+      :
+      "ashok-krishnamurthy",
+    title
+      :
+      "Interim Director of RENCI"
+  }, {
+    active
+      :
+      true,
+    email
+      :
+      "[email protected]",
+    firstName
+      :
+      "Asia",
+    fullName
+      :
+      "Asia Mieczkowska",
+    lastName
+      :
+      "Mieczkowska",
+    photoData
+      :
+      "https://radx-images.s3.amazonaws.com/mieczkowska_asia_c5aaf7ad4f.png",
+    pid
+      :
+      "708744185",
+    personId: "_0KDiHdVaskGZmHbyoVs4Yg",
+    slug
+      :
+      "asia-mieczkowska",
+    title
+      :
+      "Interim Chief Operations Officer"
+  }]
+
+  return {ood: ood, people: payload};
+};

lib/dashboard/projects.js

@@ -0,0 +1,30 @@
+import { fetchFromDashboard } from "@/utils/dashboard";
+
+export const fetchDashboardProjects = async () => {
+  const allProjects = await fetchFromDashboard("projects");
+
+  const getPayload = (array) => {
+    const trimText = (description, wordCount = 25) => {
+      //split the description into an array of words
+      const snippetArray = (description).split(' ')
+
+      //grab the first X number of words as defined by the wordCount above
+      const trimmedSnippetArray = snippetArray.slice(0, wordCount)
+
+      //if the number of words in the description is longer than the wordcount, return a string that has an ellipsis at the end. if not, return a string that just joins the words from the trimmed array
+      return snippetArray.length >= wordCount ? `${trimmedSnippetArray.join(' ')} ...` : trimmedSnippetArray.join(' ')
+    }
+
+    return array.map((project) => (
+        {
+          snippet: project.webDescription ? trimText(project.webDescription) : "Click to read more", 
+          ... project
+        }
+    ))
+  }
+
+  const payload = getPayload(allProjects)
+
+
+  return payload;
+};

lib/dashboard/research-groups.js

@@ -0,0 +1,7 @@
+import { fetchFromDashboard } from "@/utils/dashboard";
+
+export const fetchResearchGroups = async () => {
+  const payload = await fetchFromDashboard("research-groups");
+
+  return payload;
+};

lib/dashboard/teams.js

@@ -0,0 +1,7 @@
+import { fetchFromDashboard } from "@/utils/dashboard";
+
+export const fetchDashboardTeams = async () => {
+  const payload = await fetchFromDashboard("teams");
+
+  return payload;
+};

next.config.js

@@ -21,6 +21,6 @@ module.exports = {
     defaultLocale: "en",
   },
   images: {
-    domains: ['radx-images.s3.amazonaws.com'],
+    domains: ['https://dashboard.renci.org/','radx-images.s3.amazonaws.com', 'dashboard.renci.org'],
   },
 };