loader for portfolio and start of cards

jaltekruse · Mar 14, 2023 · cf288e2 · cf288e2
1 parent aeef05f
commit cf288e2
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 24 deletions.
diff --git a/src/Tools/_framework/Paths/Portfolio.jsx b/src/Tools/_framework/Paths/Portfolio.jsx
@@ -1,8 +1,27 @@
 import React from 'react';
-import { redirect, Form, useOutletContext } from 'react-router-dom';
+import { redirect, Form, useOutletContext, useLoaderData } from 'react-router-dom';
 import styled from 'styled-components';
 import Button from '../../../_reactComponents/PanelHeaderComponents/Button';
 
+export async function action() {
+  let response = await fetch("/api/getNextDoenetId.php");
+
+      if (response.ok) {
+        let { doenetId } = await response.json();
+        console.log("doenetId",doenetId)
+        return redirect(`${doenetId}/settings`) //Should use doenetId next for loader
+      }else{
+        throw Error(response.message)
+      }
+}
+
+export async function loader(){
+  const response = await fetch('/api/getPortfolio.php');
+  const data = await response.json();
+  return {publicActivities:data.publicActivities,
+    privateActivities:data.privateActivities};
+}
+
 const SecondHeader = styled.header`
   background-color: #fff;
   /* background-color: lightskyblue; */
@@ -36,7 +55,7 @@ const PublicActivitiesSection = styled.div`
 `
 const PublicActivityCardsContainer = styled.div`
       display: flex;
-      flex-direction: column;
+      /* flex-direction: column; */
       padding: 10px 10px 10px 10px;
       margin: 0px;
       justify-content: center;
@@ -57,34 +76,97 @@ const PrivateActivitiesSection = styled.div`
 `
 const PrivateActivityCardsContainer = styled.div`
       display: flex;
-      flex-direction: column;
+      /* flex-direction: column; */
       padding: 10px 10px 10px 10px;
       margin: 0px;
       /* justify-content: center; */
       align-items: center;
       text-align: center;
 `
-// export async function action({request}) {
-// const formData = await request.formData();
-// console.log("Called Action!!!",formData)
 
-export async function action() {
-  let response = await fetch("/api/getNextDoenetId.php");
 
-      if (response.ok) {
-        let { doenetId } = await response.json();
-        console.log("doenetId",doenetId)
-        return redirect(`${doenetId}/settings`) //Should use doenetId next for loader
-      }else{
-        throw Error(response.message)
-      }
+function Card({ doenetId,imagePath,label }) {
+  const cardStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '180px',
+    backgroundColor: 'black',
+    overflow: 'hidden',
+    margin: '10px',
+    border: "2px solid #949494",
+    borderRadius: "6px",
+    width: "240px"
+  };
+
+  const topStyle = {
+    height: '128px',
+    // minWidth: '200px',
+  };
+
+  const imgStyle = {
+    height: 'auto',
+    maxWidth: '100%',
+    // maxHeight: '50px',
+    maxHeight: '110px',
+    objectFit: 'cover',
+  };
+
+  const bottomStyle = {
+    height: '54px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    padding: '2px',
+    color: 'black',
+    background: 'white',
+    // whiteSpace: 'normal',
+    // overflow: 'hidden',
+    // textOverflow: 'ellipsis',
+    // display: '-webkit-box',
+    // WebkitLineClamp: 2,
+    // WebkitBoxOrient: 'vertical',
+  };
+
+  const textStyle = {
+    fontSize: '.8em',
+    display: 'inline',
+    WebkitLineClamp: 2,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    // display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    wordWrap: 'break-word',
+  }
+
+  const linkStyle = {
+    textDecoration: 'none',
+    userSelect: 'none',
+    cursor: 'pointer',
+    flexGrow: '1',
+    // maxWidth: '240px',
+  }
+
+  const activityLink = `/portfolio/${doenetId}/editor`;
+
+  return (
+    <a style={linkStyle} href={activityLink} target="_blank">
+      <div style={cardStyle}>
+        <div style={topStyle}>
+          <img src={imagePath} alt="Card" style={imgStyle} />
+        </div>
+        <div style={bottomStyle}>
+          <span style={textStyle}>{label}</span>
+        </div>
+      </div>
+     </a>
+  );
 }
-// const contact = await createContact();
-// return redirect(`/contacts/${contact.id}/edit`);
-// return { contact };
 
-export default function Portfolio(){
+
+export function Portfolio(){
   let context = useOutletContext();
+  let data = useLoaderData();
+  console.log("data",data)
   // const navigate = useNavigate();
 
   //Don't do more processing if we don't know if we are signed in or not
@@ -109,15 +191,23 @@ export default function Portfolio(){
   <PublicActivitiesSection>
     <h2>Public</h2>
     <PublicActivityCardsContainer>
-      <div>No Public Activities</div>
+
+      {data.publicActivities.length < 1 ? <div>No Public Activities</div>  :
+    <>{data.publicActivities.map((activity)=>{
+      return <Card key={`Card${activity.doenetId}`} {...activity} />
+    })}</>
+     }
     </PublicActivityCardsContainer>
   </PublicActivitiesSection>
 
   <PrivateActivitiesSection>
     <h2>Private</h2>
     <PrivateActivityCardsContainer>
-
-   <div>No Private Activities</div>
+      {data.privateActivities.length < 1 ? <div>No Private Activities</div>  :
+    <>{data.privateActivities.map((activity)=>{
+      return <Card key={`Card${activity.doenetId}`} {...activity} />
+    })}</>
+     }
     </PrivateActivityCardsContainer>
   </PrivateActivitiesSection>
 

diff --git a/src/Tools/singlepage/index.jsx b/src/Tools/singlepage/index.jsx
@@ -16,10 +16,9 @@ import { mathjaxConfig } from '../../Core/utils/math';
 import DarkmodeController from '../_framework/DarkmodeController';
 import SiteHeader from "../_framework/Paths/SiteHeader";
 import Community from "../_framework/Paths/Community";
-import Portfolio from "../_framework/Paths/Portfolio";
 import {loader as caroselLoader, Home} from "../_framework/Paths/Home";
 import {loader as portfolioActivitySettingsLoader, action as portfolioActivitySettingsAction, PortfolioActivitySettings} from "../_framework/Paths/PortfolioActivitySettings";
-import { action as portfolioAction } from "../_framework/Paths/Portfolio";
+import {loader as portfolioLoader, action as portfolioAction, Portfolio } from "../_framework/Paths/Portfolio";
 
 const router = createBrowserRouter([
   {
@@ -48,6 +47,7 @@ const router = createBrowserRouter([
       },
       {
         path: "portfolio",
+        loader: portfolioLoader,
         action: portfolioAction,
         element: <Portfolio />,
       },