From 14d9240992ff3bb4ac8ed2d9be75838c82a24f52 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Wed, 6 Jan 2021 11:05:55 +0100
Subject: [PATCH] feat: enable restarting onboarding tour
---
src/components/Navbar.jsx | 10 ++--
src/components/onboarding/index.jsx | 32 +++++++++++
src/containers/PostFilters.jsx | 4 +-
src/pages/Home.jsx | 89 +++++++++++++++++------------
4 files changed, 94 insertions(+), 41 deletions(-)
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index a9e974b..1c218e0 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -7,7 +7,7 @@ import classNames from "classnames";
import Button from "components/Button";
import { AuthStore, GlobalInfoStore } from "stores";
-const Navbar = () => {
+const Navbar = ({ onGetHelp }) => {
const { innerWidth } = useWindowSize();
const [showMenu, setShowMenu] = useState();
const { keycloak } = useKeycloak();
@@ -36,7 +36,7 @@ const Navbar = () => {
};
const connectionIndicator = (
- <div className="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
+ <div className="inline-flex items-center">
<span
className="relative inline-flex h-4 w-4 mr-4"
data-tip={connectionStateCaption}
@@ -109,8 +109,10 @@ const Navbar = () => {
</li>
</ul>
</div>
- <div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center">
- {connectionIndicator}
+ <div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center justify-between">
+ <div className="order-last lg:order-first lg:mr-8">
+ {connectionIndicator}
+ </div>
{!isAuthenticated && (
<Button className="btn--white joyride-login" onClick={login}>
Přihlásit se
diff --git a/src/components/onboarding/index.jsx b/src/components/onboarding/index.jsx
index 3ad27e5..6f60ffd 100644
--- a/src/components/onboarding/index.jsx
+++ b/src/components/onboarding/index.jsx
@@ -115,6 +115,38 @@ export const steps = [
),
placement: "right",
},
+ {
+ target: ".joyride-filters",
+ content: (
+ <>
+ <h1 className="head-alt-sm mb-4">FiltrovánĂ a Ĺ™azenĂ pĹ™ĂspÄ›vkĹŻ</h1>
+ <div className="leading-snug text-base space-y-2">
+ <p>
+ PĹ™ĂspÄ›vky v rozpravÄ› mĹŻĹľeš filtrovat <strong>podle typu</strong>{" "}
+ (návrhy/pĹ™ĂspÄ›vky), <strong>podle stavu</strong>{" "}
+ (aktivnĂ/archivovanĂ©) a mĹŻĹľeš taky pĹ™epĂnat jejich{" "}
+ <strong>Ĺ™azenĂ</strong> (podle podpory, podle ÄŤasu pĹ™idánĂ).
+ </p>
+ </div>
+ </>
+ ),
+ placement: "bottom",
+ },
+ {
+ target: ".joyride-pagination",
+ content: (
+ <>
+ <h1 className="head-alt-sm mb-4">StránkovánĂ pĹ™ĂspÄ›vkĹŻ</h1>
+ <div className="leading-snug text-base space-y-2">
+ <p>
+ PĹ™ĂspÄ›vky jsou stránkovanĂ© <strong>po dvaceti</strong>. Stránky
+ mĹŻĹľeš pĹ™epĂnat tÄ›mito šipkami.
+ </p>
+ </div>
+ </>
+ ),
+ placement: "bottom",
+ },
{
target: ".joyride-announcements",
content: (
diff --git a/src/containers/PostFilters.jsx b/src/containers/PostFilters.jsx
index 8189129..e1ccec4 100644
--- a/src/containers/PostFilters.jsx
+++ b/src/containers/PostFilters.jsx
@@ -65,7 +65,7 @@ const PostFilters = () => {
return (
<div className="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
- <div className="-mx-1">
+ <div className="-mx-1 joyride-filters">
<Dropdown
value={filters.flags}
onChange={onFlagsChange}
@@ -86,7 +86,7 @@ const PostFilters = () => {
/>
</div>
- <div>
+ <div className="joyride-pagination">
<Chip
color="grey-125"
className={
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index cc2e7d1..929d73a 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import Joyride, { EVENTS } from "react-joyride";
import ReactPlayer from "react-player/lazy";
@@ -45,6 +45,8 @@ const Home = () => {
const programEntry = currentId ? programEntries[currentId] : null;
const [showProgramEditModal, setShowProgramEditModal] = useState(false);
const [runJoyRide, setRunJoyride] = useState(false);
+ // The easiest way to restart the joyride tour is by simply re-rendering the component.
+ const [joyrideRenderKey, setJoyrideRenderKey] = useState(0);
const { innerWidth } = useWindowSize();
const isLg = innerWidth >= 1024;
const [
@@ -80,6 +82,11 @@ const Home = () => {
setShowProgramEditModal(false);
};
+ const showTutorial = useCallback(() => {
+ setRunJoyride(true);
+ setJoyrideRenderKey(joyrideRenderKey + 1);
+ }, [joyrideRenderKey, setRunJoyride, setJoyrideRenderKey]);
+
const handleJoyrideCallback = ({ action, index, status, type }) => {
if (type === EVENTS.TOUR_END) {
localStorage.setItem(tourLSKey, "COMPLETED");
@@ -148,6 +155,7 @@ const Home = () => {
next: "DalšĂ",
skip: "Přeskočit intro",
}}
+ key={joyrideRenderKey}
run={runJoyRide}
showProgress={true}
showSkipButton={true}
@@ -197,42 +205,53 @@ const Home = () => {
{programEntry.number !== "" && `Bod ÄŤ. ${programEntry.number}: `}
{programEntry.title}
</h1>
- {displayActions && (
- <DropdownMenu right triggerSize="lg" className="pl-4 pt-1 lg:pt-5">
- <DropdownMenuItem
- onClick={() => setShowProgramEditModal(true)}
- icon="ico--pencil"
- title="Přejmenovat bod programu"
- titleSize="base"
- iconSize="base"
+ <div className="pl-4 pt-1 lg:pt-5">
+ <div className="space-x-4 inline-flex items-center">
+ <button
+ className="ico--question text-grey-200 hover:text-black text-lg"
+ aria-label="PotĹ™ebuješ pomoc? SpusĹĄ si znovu nápovÄ›du jak tuhle aplikaci pouĹľĂvat."
+ data-tip="PotĹ™ebuješ pomoc? SpusĹĄ si znovu nápovÄ›du jak tuhle aplikaci pouĹľĂvat."
+ data-tip-at="left"
+ onClick={showTutorial}
/>
- {programEntry.discussionOpened && (
- <DropdownMenuItem
- onClick={() => setShowCloseDiscussion(true)}
- icon="ico--bubbles"
- title="UkonÄŤit rozpravu"
- titleSize="base"
- iconSize="base"
- />
+ {displayActions && (
+ <DropdownMenu right triggerSize="lg">
+ <DropdownMenuItem
+ onClick={() => setShowProgramEditModal(true)}
+ icon="ico--pencil"
+ title="Přejmenovat bod programu"
+ titleSize="base"
+ iconSize="base"
+ />
+ {programEntry.discussionOpened && (
+ <DropdownMenuItem
+ onClick={() => setShowCloseDiscussion(true)}
+ icon="ico--bubbles"
+ title="UkonÄŤit rozpravu"
+ titleSize="base"
+ iconSize="base"
+ />
+ )}
+ {!programEntry.discussionOpened && (
+ <DropdownMenuItem
+ onClick={() => setShowOpenDiscussion(true)}
+ icon="ico--bubbles"
+ title="OtevĹ™Ăt rozpravu"
+ titleSize="base"
+ iconSize="base"
+ />
+ )}
+ <DropdownMenuItem
+ onClick={() => setShowEndProgramPoint(true)}
+ icon="ico--switch"
+ title="UkonÄŤit bod programu"
+ titleSize="base"
+ iconSize="base"
+ />
+ </DropdownMenu>
)}
- {!programEntry.discussionOpened && (
- <DropdownMenuItem
- onClick={() => setShowOpenDiscussion(true)}
- icon="ico--bubbles"
- title="OtevĹ™Ăt rozpravu"
- titleSize="base"
- iconSize="base"
- />
- )}
- <DropdownMenuItem
- onClick={() => setShowEndProgramPoint(true)}
- icon="ico--switch"
- title="UkonÄŤit bod programu"
- titleSize="base"
- iconSize="base"
- />
- </DropdownMenu>
- )}
+ </div>
+ </div>
</div>
<section className="cf2021__video">
<div className="container-padding--zero md:container-padding--auto">
--
GitLab