From bd91287c5b5401c25d38b83dbc13ec1265ecf93c Mon Sep 17 00:00:00 2001 From: Kevin Charles Date: Mon, 6 Mar 2023 14:59:33 +0000 Subject: [PATCH] More progress on Home --- src/Tools/_framework/Paths/Home.jsx | 460 +++++++++++++++++++++++++++- 1 file changed, 454 insertions(+), 6 deletions(-) diff --git a/src/Tools/_framework/Paths/Home.jsx b/src/Tools/_framework/Paths/Home.jsx index 8f62c52bfe..eab6ba2b07 100644 --- a/src/Tools/_framework/Paths/Home.jsx +++ b/src/Tools/_framework/Paths/Home.jsx @@ -1,11 +1,459 @@ -import React, { useRef, useState } from 'react'; -import { useOutletContext } from 'react-router'; +// import React, { useEffect, useRef } from 'react'; +// import { useOutletContext } from 'react-router'; -export default function Home(props){ - let context = useOutletContext(); - if (context.signedIn == null){ return null;} +// export default function Home(props){ +// let context = useOutletContext(); +// const videoEl = useRef(null); - return
Home
+// const attemptPlay = () => { +// videoEl && +// videoEl.current && +// videoEl.current.play().catch(error => { +// console.error("Error attempting to play", error); +// }); +// }; + +// useEffect(() => { +// attemptPlay(); +// }, []); + +// if (context.signedIn == null){ return null;} + +// return
Home
+// } + + +import React, { useEffect, useRef, useState } from 'react'; +import { useLoaderData, useNavigate } from 'react-router'; +import styled from 'styled-components'; +import Button from '../../../_reactComponents/PanelHeaderComponents/Button'; +import { checkIfUserClearedOut } from '../../../_utils/applicationUtils'; +// import PageViewer from '../../../Viewer/PageViewer'; +import { pageVariantInfoAtom, pageVariantPanelAtom } from '../../../_sharedRecoil/PageViewerRecoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; +// import { Carousel } from '../../../_reactComponents/PanelHeaderComponents/Carousel'; +// import RouterLogo from '../RouterLogo'; + + +const SectionText = styled.div` + text-align: center; + max-width: 800px; + display: inline-block; + margin-left:3em; + margin-right:3em;`; + +const Footer = styled.div` + background-color: var(--mainGray); + color: var(--canvastext); + font-size: 14px; + padding: 20px 40px; + text-align: center; +`; + +const LinkStyling = styled.a` + color: var(--mainBlue); + border-radius: 5px; + &: focus { + outline: 2px solid var(--mainBlue); + } +`; + +const H1responsive = styled.h1` + line-height: 0.1em; + @media (max-width: 800px) { + font-size: 1.1em; + } +` + +const H4responsive = styled.h4` + line-height: 0.1em; + @media (max-width: 800px) { + font-size: .6em; + } +` + +const HPVideo = styled.video` + height: 350px; + @media (max-width: 780px) { + height: 240px; + } + @media (max-width: 450px) { + height: 180px; + } +` + +const CarouselSection = styled.div` + display: flex; + flex-direction: column; + padding: 60px 10px 60px 10px; + margin: 0px; + row-gap: 45px; + justify-content: center; + align-items: center; + text-align: center; + background: var(--mainGray); + height: 300px; + /* @media (max-width: 800px) { + height: 500px; + } + @media (max-width: 500px) { + height: 1000px; + } */ +` + +const CreateContentSection = styled.div` + display: flex; + column-gap: 20px; + justify-content: center; + align-items: center; + height: 500px; + background: #0e1111; + @media (max-width: 1024px) { + /* height: 300px; */ + flex-direction: column; + row-gap: 20px; + height: 600px; + } +` + +let doenetML = ` + + +2 +x^2+4x-3 +2x^2+4x-7 +x^2-3 +2x^2-7 + + +

Simplify the equation $left0 = $right0, explaining each step in the box at the right.

+ + + + + + + + + + + +Hint on showing simplification steps +

To perform a simplification step, click the + button, which will copy your work to a new line. Modify the expression and explain the step in the box to the right. You can remove a line by clicking the - button. Your work will be hand-graded after the due date.

+ + + +` +function Heading(props) { + return
+

{props.heading}

+

{props.subheading}

+
+} + +const SignInButtonContainer = styled.div` + margin: auto 10px auto 0px; +` + +const Header = styled.header` + background-color: #fff; + color: #000; + height: 40px; + position: fixed; + top: 0; + width: 100%; + margin: 0; + display: flex; + justify-content: space-between; + +`; + +const Main = styled.main` + margin-top: 40px; + /* padding: 20px; */ + overflow-y: scroll; + height: 100vh; + margin: 0; +`; + +const HeaderSection = styled.div` + margin-top: 40px; + display: flex; + background: var(--mainGray); + justify-content: center; + align-items: center; + height: 175px; + /* position: relative; */ + @media (max-width: 500px) { + height: 300px; + flex-direction: column-reverse; + } +` +const Branding = styled.span` + margin: 4px 0px 4px 10px; + display: flex; + justify-content: space-between; + align-items: center; + width: 110px; + cursor: default; + font-size: 16px; +` + +const MenuItem = styled.div` + padding: 8px; + color: ${props => props.active ? "var(--mainBlue)" : "black"}; + border-bottom: ${props => props.active ? "2px solid var(--mainBlue)" : null}; + cursor: pointer; +` + +const BarMenu = styled.div` + margin: 0px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 16px; + column-gap: 20px; +` + + +export default function HomePage(props) { + const loaderData = useLoaderData(); + let navigate = useNavigate(); + let checkingCookie = useRef(false); + const [signedIn, setSignedIn] = useState(null); + const favorites = loaderData?.carouselData[3]; + + //Only ask once + if (!checkingCookie.current) { + checkingCookie.current = true; + checkIfUserClearedOut().then(({ cookieRemoved }) => { + setSignedIn(!cookieRemoved); + }) + } + + const videoEl = useRef(null); + + const attemptPlay = () => { + videoEl && + videoEl.current && + videoEl.current.play().catch(error => { + console.error("Error attempting to play", error); + }); + }; + + useEffect(() => { + attemptPlay(); + }, []); + + const setVariantPanel = useSetRecoilState(pageVariantPanelAtom); + const [variantInfo, setVariantInfo] = useRecoilState(pageVariantInfoAtom); + + function variantCallback(generatedVariantInfo, allPossibleVariants) { + // console.log(">>>variantCallback",generatedVariantInfo,allPossibleVariants) + const cleanGeneratedVariant = JSON.parse(JSON.stringify(generatedVariantInfo)) + setVariantPanel({ + index: cleanGeneratedVariant.index, + allPossibleVariants, + }); + setVariantInfo({ + index: cleanGeneratedVariant.index, + }); + } + + + let signInButton =