From be5101e649cdd202996d8f3ef70560a846b6781f Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Fri, 28 Feb 2020 00:08:07 -0800 Subject: [PATCH 1/5] draft of swipe capability for tutorial page, would require redesign for permissions, maybe buttons on each page. seems to be working in dev tools, need to do a draft PR --- src/App.js | 4 + src/organisms/DraftTutorialPage.jsx | 326 ++++++++++++++++++++++++++++ 2 files changed, 330 insertions(+) create mode 100644 src/organisms/DraftTutorialPage.jsx diff --git a/src/App.js b/src/App.js index d915222..8a81390 100644 --- a/src/App.js +++ b/src/App.js @@ -18,6 +18,7 @@ import { lightTheme, darkTheme } from "./molecules/theme"; import { useDarkMode } from "./molecules/useDarkMode"; import { GlobalStyles } from "./molecules/global"; import CameraNav from "./molecules/CameraNav"; +import DraftTutorialPage from "./organisms/DraftTutorialPage"; export const GET_CATEGORIES = gql` query getAllFamilies { @@ -114,6 +115,9 @@ const App = () => { + + + diff --git a/src/organisms/DraftTutorialPage.jsx b/src/organisms/DraftTutorialPage.jsx new file mode 100644 index 0000000..b1f1899 --- /dev/null +++ b/src/organisms/DraftTutorialPage.jsx @@ -0,0 +1,326 @@ +import React, { useState, useEffect } from "react"; +import { withTheme } from "styled-components"; +import Stepper from "../molecules/Stepper"; +import styled from "styled-components"; +import Button from "../atoms/Button"; + +import location from "../utils/UserLocation"; +import { useMutation } from "@apollo/react-hooks"; +import gql from "graphql-tag"; + +import { useHistory } from "react-router-dom"; + +import photoImg from "../images/photo_illustration.svg"; + +const Container = styled.div` + display: flex; + width: 100vw; + flex-direction: column; + align-items: center; + justify-content: center; + + background-color: ${({ theme }) => theme.body}; +`; + +const Title = styled.h2` + font-family: Muli; + font-style: normal; + font-weight: bold; + text-align: center; + font-size: 28px; + color: ${({ theme }) => theme.text}; + + margin-top: 20px; + margin-bottom: 25px; +`; + +const SubTitle = styled.h3` + font-family: Muli; + font-style: normal; + font-weight: bold; + font-size: 20px; + line-height: 25px; + text-align: center; + + color: ${({ theme }) => theme.text}; + margin-top: 30px; + margin-bottom: 11px; + margin-left: 30px; + margin-right: 30px; + height: 50px; +`; + +const Img = styled.img` + margin-bottom: ${props => props.marginBottom}px; +`; + +const PText = styled.p` + font-family: Muli; + font-style: normal; + font-weight: normal; + font-size: 20px; + line-height: 25px; + text-align: center; + + color: ${({ theme }) => theme.text}; + + margin-left: 60px; + margin-right: 60px; + margin-top: 0px; + margin-bottom: ${props => props.marginBottom}px; + + height: 76px; +`; + +const CenterContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +`; + +let p1, p2, p3; + +let startingX; + +function renderPage(step, theme) { + function handleTouchStart(e, prev, current, next) { + startingX = e.touches[0].clientX; + console.log("e touches starting", startingX); /////////////OK + if (current === p1) { + return; + } else { + prev.style.transition = ""; + current.style.transition = ""; + prev.style.display = "flex"; + } + } + + function handleTouchMove(e, prev, current, next) { + ///YAYAYAYA! + const touch = e.touches[0]; + const change = startingX - touch.clientX; + // console.log("move", touch.clientX); + // console.log("move change", change); + e.preventDefault(); + if ((current === p1 && change < 0) || (current === p3 && change > 0)) { + return; + } else if ((current === p1 || current === p2) && change > 0) { + current.style.left -= change + "px"; //"-" + + next.style.display = "flex"; + next.style.left -= change + "px"; //was screen not current.style, screen.width - + console.log("nexty", next.style.left); + } else if (current === p2 && change < 0) { + prev.style.left -= change + "px"; //plus negative + prev.style.display = "flex"; + current.style.left = screen.width - change + "px"; //should already be a negative number + next.style.display = "none"; + console.log("current.style.left", current.style.left); + } else if (current === p3 && change < 0) { + prev.style.left -= change + "px"; //plus negative + prev.style.display = "flex"; + current.style.left -= change + "px"; + } + } + + function handleTouchEnd(e, prev, current, next) { + // console.log("e end", e.changedTouches[0].clientX); /////OK + // console.log("current end", current); + // console.log("next end", next); + // console.log("prev end", prev); + const change = startingX - e.changedTouches[0].clientX; + const screenThreshold = screen.width / 30; + // console.log("change end", change); + // console.log("screenThreshold", screenThreshold); + const invertedChange = change * -1; + // console.log("ic", invertedChange); + e.preventDefault(); + if (0 < change && change < screenThreshold && next !== "out of bounds") { + current.style.left = 0; + next.style.left = "100%"; + next.style.display = "none"; + } else if ( + 0 < change && + change > screenThreshold && + next !== "out of bounds" + ) { + current.style.transition = "all .3s"; + next.style.transition = "all .3s"; + next.style.display = "flex"; + current.style.left = "-100%"; + next.style.left = 0; + + current.style.display = "none"; + } else if ( + change < 0 && + invertedChange < screenThreshold && + prev !== "out of bounds" + ) { + current.style.left = 0; + prev.style.left = "-100%"; + prev.style.display = "none"; + next.style.display = "none"; + } else if (invertedChange > screenThreshold && prev !== "out of bounds") { + current.style.transition = "all .3s"; + prev.style.transition = "all .3s"; + current.style.left = "100%"; + prev.style.left = 0; + prev.style.display = "flex"; + } else { + return "error on touchend negative change"; + } + } + + // switch (step) { + // case 1: + return ( +
+ handleTouchStart(e, "out of bounds", p1, p2)} + onTouchMove={e => handleTouchMove(e, "out of bounds", p1, p2)} + onTouchEnd={e => handleTouchEnd(e, "out of bounds", p1, p2)} + > + Trash Panda + + Here to help you create better recycling habits. + + + + + handleTouchStart(e, p1, p2, p3)} + onTouchMove={e => handleTouchMove(e, p1, p2, p3)} + onTouchEnd={e => handleTouchEnd(e, p1, p2, p3)} + > + Certain areas have different regulations. + + Let us use your location to help you properly dispose of the item. + + + + + handleTouchStart(e, p2, p3, "out of bounds")} + onTouchMove={e => handleTouchMove(e, p2, p3, "out of bounds")} + onTouchEnd={e => handleTouchEnd(e, p2, p3, "out of bounds")} + > + Snap a photo of the item you want to recycle. + + We’ll tell you what it’s made of and how to properly dispose of it. + + + +
+ ); +} + +function getCamera(onSuccess, onError) { + const constraints = (window.constraints = { + audio: false, + video: true + }); + + if (navigator.mediaDevices) { + navigator.mediaDevices + .getUserMedia(constraints) + .then(stream => { + if (onSuccess) onSuccess(); + stream.getTracks().forEach(function(track) { + track.stop(); + }); + }) + .catch(err => { + if (onError) onError(err); + stream.getTracks().forEach(function(track) { + track.stop(); + }); + }); + } else { + //Media devices api does not support user + console.log("Browser does not support media devices API"); + } +} + +const DraftTutorialPage = ({ theme }) => { + const [step, setStep] = useState(1); + const history = useHistory(); + + useEffect(() => { + p1 = document.getElementById("first"); + + p2 = document.getElementById("second"); + + p3 = document.getElementById("third"); + }); + console.log("p1", p1); + + const handleNext = () => { + switch (step) { + case 3: { + localStorage.setItem( + "permissions", + JSON.stringify({ firstVisit: false }) + ); + getCamera( + () => history.push("/"), + () => history.push("/") + ); + break; + } + case 2: + location.setGps( + () => { + setStep(3); + }, + () => { + setStep(3); + } + ); + break; + default: + setStep(step + 1); + } + }; + + return ( + + {renderPage(step, theme)} + + + + ); +}; + +export default withTheme(DraftTutorialPage); From e175b9ec56c6d2a43959e8b2e41eba771e868718 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Fri, 28 Feb 2020 00:56:12 -0800 Subject: [PATCH 2/5] removed preventDefault to end warnings about element being passive, attempting to move stepper and next button to render function- displaying but not allowing repositioning --- src/organisms/DraftTutorialPage.jsx | 51 +++++++++++++++++++---------- 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/src/organisms/DraftTutorialPage.jsx b/src/organisms/DraftTutorialPage.jsx index b1f1899..047857a 100644 --- a/src/organisms/DraftTutorialPage.jsx +++ b/src/organisms/DraftTutorialPage.jsx @@ -83,7 +83,7 @@ let p1, p2, p3; let startingX; -function renderPage(step, theme) { +function renderPage(step, theme, handleNext) { function handleTouchStart(e, prev, current, next) { startingX = e.touches[0].clientX; console.log("e touches starting", startingX); /////////////OK @@ -102,7 +102,7 @@ function renderPage(step, theme) { const change = startingX - touch.clientX; // console.log("move", touch.clientX); // console.log("move change", change); - e.preventDefault(); + //e.preventDefault(); if ((current === p1 && change < 0) || (current === p3 && change > 0)) { return; } else if ((current === p1 || current === p2) && change > 0) { @@ -115,7 +115,7 @@ function renderPage(step, theme) { prev.style.display = "flex"; current.style.left = screen.width - change + "px"; //should already be a negative number next.style.display = "none"; - console.log("current.style.left", current.style.left); + //console.log("current.style.left", current.style.left); } else if (current === p3 && change < 0) { prev.style.left -= change + "px"; //plus negative prev.style.display = "flex"; @@ -134,7 +134,7 @@ function renderPage(step, theme) { // console.log("screenThreshold", screenThreshold); const invertedChange = change * -1; // console.log("ic", invertedChange); - e.preventDefault(); + //e.preventDefault(); if (0 < change && change < screenThreshold && next !== "out of bounds") { current.style.left = 0; next.style.left = "100%"; @@ -171,10 +171,14 @@ function renderPage(step, theme) { } } - // switch (step) { - // case 1: return ( -
+
+ +
); } @@ -281,9 +293,20 @@ const DraftTutorialPage = ({ theme }) => { p2 = document.getElementById("second"); p3 = document.getElementById("third"); - }); - console.log("p1", p1); + }, []); + useEffect(() => { + if (p3.style.left == 0) { + setStep(step + 1); + } + if (p2.style.left < 0) { + setStep(step + 1); + } + if (p2.style.left === 0) { + setStep(step + 1); + } + }, [p2, p3]); + console.log("step", step); const handleNext = () => { switch (step) { case 3: { @@ -312,15 +335,7 @@ const DraftTutorialPage = ({ theme }) => { } }; - return ( - - {renderPage(step, theme)} - - - - ); + return {renderPage(step, theme, handleNext)}; }; export default withTheme(DraftTutorialPage); From 7d8c05b03746c153df1dc51bd6219774f255c87f Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Fri, 28 Feb 2020 01:17:57 -0800 Subject: [PATCH 3/5] repositioned button and stepper to below content on mobile --- src/organisms/DraftTutorialPage.jsx | 38 ++++++++++++++--------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/organisms/DraftTutorialPage.jsx b/src/organisms/DraftTutorialPage.jsx index 047857a..03108ce 100644 --- a/src/organisms/DraftTutorialPage.jsx +++ b/src/organisms/DraftTutorialPage.jsx @@ -172,13 +172,7 @@ function renderPage(step, theme, handleNext) { } return ( -
+
handleTouchStart(e, "out of bounds", p1, p2)} onTouchMove={e => handleTouchMove(e, "out of bounds", p1, p2)} @@ -208,7 +202,7 @@ function renderPage(step, theme, handleNext) { top: 0, left: "100%", width: "100%", - height: "100vh" + height: "90vh" }} onTouchStart={e => handleTouchStart(e, p1, p2, p3)} onTouchMove={e => handleTouchMove(e, p1, p2, p3)} @@ -232,7 +226,7 @@ function renderPage(step, theme, handleNext) { top: 0, left: "200%", width: "100%", - height: "100vh" + height: "90vh" }} onTouchStart={e => handleTouchStart(e, p2, p3, "out of bounds")} onTouchMove={e => handleTouchMove(e, p2, p3, "out of bounds")} @@ -244,18 +238,24 @@ function renderPage(step, theme, handleNext) { - - +
+ + +
); } - +//style={{ position: "absolute", bottom: "15vh" }} +//style={{ position: "absolute", bottom: "10vh" }} function getCamera(onSuccess, onError) { const constraints = (window.constraints = { audio: false, From b29336f0d757220342136c39568100734eb23ba1 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Fri, 28 Feb 2020 11:04:07 -0800 Subject: [PATCH 4/5] swiping working and updating stepper properly on chrome dev tools mobile view, also triggering permissions at proper times. next button only appears if screen width over 800px. stepper and button display not styled properly for mobile but currently UX didn't have fix for simultaneously having buttons and swipe to go 'next' so issue discontinued --- src/organisms/DraftTutorialPage.jsx | 79 ++++++++++++++++++++--------- 1 file changed, 55 insertions(+), 24 deletions(-) diff --git a/src/organisms/DraftTutorialPage.jsx b/src/organisms/DraftTutorialPage.jsx index 03108ce..0d2d33e 100644 --- a/src/organisms/DraftTutorialPage.jsx +++ b/src/organisms/DraftTutorialPage.jsx @@ -12,6 +12,8 @@ import { useHistory } from "react-router-dom"; import photoImg from "../images/photo_illustration.svg"; +// CURRENT ISSUES: next button no longer working on desktop view, button and stepper misaligned on desktop + const Container = styled.div` display: flex; width: 100vw; @@ -83,10 +85,10 @@ let p1, p2, p3; let startingX; -function renderPage(step, theme, handleNext) { +function renderPage(step, theme, handleNext, setStep) { function handleTouchStart(e, prev, current, next) { startingX = e.touches[0].clientX; - console.log("e touches starting", startingX); /////////////OK + // console.log("e touches starting", startingX); /////////////OK if (current === p1) { return; } else { @@ -109,7 +111,7 @@ function renderPage(step, theme, handleNext) { current.style.left -= change + "px"; //"-" + next.style.display = "flex"; next.style.left -= change + "px"; //was screen not current.style, screen.width - - console.log("nexty", next.style.left); + //console.log("nexty", next.style.left); } else if (current === p2 && change < 0) { prev.style.left -= change + "px"; //plus negative prev.style.display = "flex"; @@ -123,7 +125,7 @@ function renderPage(step, theme, handleNext) { } } - function handleTouchEnd(e, prev, current, next) { + async function handleTouchEnd(e, prev, current, next) { // console.log("e end", e.changedTouches[0].clientX); /////OK // console.log("current end", current); // console.log("next end", next); @@ -149,8 +151,8 @@ function renderPage(step, theme, handleNext) { next.style.display = "flex"; current.style.left = "-100%"; next.style.left = 0; - current.style.display = "none"; + handleNext(); } else if ( change < 0 && invertedChange < screenThreshold && @@ -166,11 +168,20 @@ function renderPage(step, theme, handleNext) { current.style.left = "100%"; prev.style.left = 0; prev.style.display = "flex"; + setStep(step - 1); } else { return "error on touchend negative change"; } } + let nextButtonDisplay; + + nextButtonDisplay = screen.width < 800 ? "none" : "flex"; + + if (step === 3) { + handleNext(); + } + return (
handleTouchStart(e, "out of bounds", p1, p2)} + onTouchStart={e => { + handleTouchStart(e, "out of bounds", p1, p2); + setStep(1); + }} onTouchMove={e => handleTouchMove(e, "out of bounds", p1, p2)} - onTouchEnd={e => handleTouchEnd(e, "out of bounds", p1, p2)} + onTouchEnd={e => { + handleTouchEnd(e, "out of bounds", p1, p2); + }} > Trash Panda @@ -204,9 +220,13 @@ function renderPage(step, theme, handleNext) { width: "100%", height: "90vh" }} - onTouchStart={e => handleTouchStart(e, p1, p2, p3)} + onTouchStart={e => { + handleTouchStart(e, p1, p2, p3); + }} onTouchMove={e => handleTouchMove(e, p1, p2, p3)} - onTouchEnd={e => handleTouchEnd(e, p1, p2, p3)} + onTouchEnd={async e => { + handleTouchEnd(e, p1, p2, p3); + }} > Certain areas have different regulations. @@ -228,9 +248,14 @@ function renderPage(step, theme, handleNext) { width: "100%", height: "90vh" }} - onTouchStart={e => handleTouchStart(e, p2, p3, "out of bounds")} + onTouchStart={e => { + handleTouchStart(e, p2, p3, "out of bounds"); + setStep(3); + }} onTouchMove={e => handleTouchMove(e, p2, p3, "out of bounds")} - onTouchEnd={e => handleTouchEnd(e, p2, p3, "out of bounds")} + onTouchEnd={e => { + handleTouchEnd(e, p2, p3, "out of bounds"); + }} > Snap a photo of the item you want to recycle. @@ -247,7 +272,10 @@ function renderPage(step, theme, handleNext) { }} > -
@@ -295,17 +323,19 @@ const DraftTutorialPage = ({ theme }) => { p3 = document.getElementById("third"); }, []); - useEffect(() => { - if (p3.style.left == 0) { - setStep(step + 1); - } - if (p2.style.left < 0) { - setStep(step + 1); - } - if (p2.style.left === 0) { - setStep(step + 1); - } - }, [p2, p3]); + // useEffect(() => { + // //NOT WORKING!!! + // if (p3.style.left == 0) { + // setStep(step + 1); + // } + // if (p2.style.left < 0) { + // setStep(step + 1); + // } + // if (p2.style.left === 0) { + // setStep(step + 1); + // } + // }, [p2, p3]); + console.log("step", step); const handleNext = () => { switch (step) { @@ -330,12 +360,13 @@ const DraftTutorialPage = ({ theme }) => { } ); break; + default: setStep(step + 1); } }; - return {renderPage(step, theme, handleNext)}; + return {renderPage(step, theme, handleNext, setStep)}; }; export default withTheme(DraftTutorialPage); From 1335aa5311cd8364369ff0e061434dba77dff53c Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Fri, 28 Feb 2020 11:17:00 -0800 Subject: [PATCH 5/5] switched tutorial page with draft tutorial page on 'intro' route for mobile testing --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 8a81390..88dac6e 100644 --- a/src/App.js +++ b/src/App.js @@ -96,7 +96,7 @@ const App = () => { - +