Timeline empty state improvements

apps/reactotron-app/src/renderer/pages/timeline/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from "react"
-import { clipboard } from "electron"
+import { clipboard, shell } from "electron"
 import fs from "fs"
 import {
  Header,
@@ -9,6 +9,7 @@ import {
  EmptyState,
  ReactotronContext,
  TimelineContext,
+ RandomJoke,
 } from "reactotron-core-ui"
 import { MdSearch, MdDeleteSweep, MdFilterList, MdSwapVert, MdReorder } from "react-icons/md"
 import styled from "styled-components"
@@ -18,13 +19,11 @@ const Container = styled.div`
  flex-direction: column;
  width: 100%;
 `
-
 const TimelineContainer = styled.div`
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
 `
-
 const SearchContainer = styled.div`
  display: flex;
  align-items: center;
@@ -46,6 +45,26 @@ const SearchInput = styled.input`
  color: ${(props) => props.theme.foregroundDark};
  font-size: 14px;
 `
+const HelpMessage = styled.div`
+ margin: 0 40px;
+`
+const ButtonContainer = styled.div`
+ display: flex;
+ padding: 4px 8px;
+ margin: 30px 20px;
+ border-radius: 4px;
+ cursor: pointer;
+ background-color: ${(props) => props.theme.backgroundLighter};
+ color: ${(props) => props.theme.foreground};
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+`
+const Divider = styled.div`
+ height: 1px;
+ background-color: ${(props) => props.theme.foregroundDark};
+ margin: 40px 10px;
+`
 
 function Timeline() {
  const { sendCommand, clearCommands, commands, openDispatchModal } = useContext(ReactotronContext)
@@ -73,6 +92,10 @@ function Timeline() {
  sendCommand("state.action.dispatch", { action })
  }
 
+ function openDocs() {
+ shell.openExternal("https://docs.infinite.red/reactotron/quick-start/react-native/")
+ }
+
  return (
  <Container>
  <Header
@@ -119,7 +142,14 @@ function Timeline() {
  <TimelineContainer>
  {filteredCommands.length === 0 ? (
  <EmptyState icon={MdReorder} title="No Activity">
- Once your app connects and starts sending events, they will appear here.
+ <HelpMessage>
+ Once your app connects and starts sending events, they will appear here.
+ </HelpMessage>
+ <ButtonContainer onClick={openDocs}>
+ Check out the quick start guide here!
+ </ButtonContainer>
+ <Divider />
+ <RandomJoke />
  </EmptyState>
  ) : (
  filteredCommands.map((command) => {

lib/reactotron-core-ui/src/components/RandomJoke/RandomJoke.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef } from "react"
+import styled from "styled-components"
+
+const JokeSetup = styled.div`
+ font-size: 14px;
+ color: ${(props) => props.theme.foregroundDark};
+ font-weight: bold;
+`
+const JokePunchline = styled.div`
+ font-size: 14px;
+ color: ${(props) => props.theme.foregroundDark};
+ font-style: italic;
+ margin-top: 5px;
+`
+
+const jokes = [
+ {
+ setup: "Why was the JavaScript developer sad?",
+ punchline: "Because he didn't Node how to Express himself.",
+ },
+ {
+ setup: "How does a debugger break up a fight?",
+ punchline: "It steps in.",
+ },
+ {
+ setup: "Why do programmers prefer dark mode?",
+ punchline: "Because light attracts bugs!",
+ },
+ {
+ setup: "Why did the developer go broke?",
+ punchline: "Because he lost his domain in a bet!",
+ },
+ {
+ setup: "Why did the programmer quit his job?",
+ punchline: "Because he didn't get arrays!",
+ },
+ {
+ setup: "How do you comfort a JavaScript bug?",
+ punchline: "You console it.",
+ },
+ {
+ setup: "Why don't programmers like nature?",
+ punchline: "It has too many bugs.",
+ },
+ {
+ setup: "What's a debugger's favorite music? ",
+ punchline: "Break beats",
+ },
+ {
+ setup: "Why don't debuggers get along with compilers?",
+ punchline: "They always point out each other's mistakes.",
+ },
+ {
+ setup: "Why was the debugger bad at hide and seek?",
+ punchline: "It always showed where the bugs were hiding.",
+ },
+]
+
+export function RandomJoke() {
+ const jokeRef = useRef(0)
+
+ useEffect(() => {
+ const ref = Math.floor(Math.random() * jokes.length)
+ jokeRef.current = ref
+ }, [])
+
+ return (
+ <>
+ <JokeSetup>{jokes[jokeRef.current].setup}</JokeSetup>
+ <JokePunchline>{jokes[jokeRef.current].punchline}</JokePunchline>
+ </>
+ )
+}

lib/reactotron-core-ui/src/components/RandomJoke/index.ts

@@ -0,0 +1,3 @@
+import { RandomJoke } from "./RandomJoke"
+
+export default RandomJoke

lib/reactotron-core-ui/src/index.ts

@@ -2,16 +2,17 @@
 import theme from "./theme"
 
 // Components
+import ActionButton from "./components/ActionButton"
 import ContentView from "./components/ContentView"
 import EmptyState from "./components/EmptyState"
 import Header from "./components/Header"
 import Modal from "./components/Modal"
+import RandomJoke from "./components/RandomJoke"
 import ReactotronAppProvider from "./components/ReactotronAppProvider"
-import ActionButton from "./components/ActionButton"
-import Tooltip from "./components/Tooltip"
 import TimelineCommand from "./components/TimelineCommand"
 import TimelineCommandTabButton from "./components/TimelineCommandTabButton"
 import Timestamp from "./components/Timestamp"
+import Tooltip from "./components/Tooltip"
 import TreeView from "./components/TreeView"
 
 // Contexts
@@ -35,36 +36,37 @@ import repairSerialization from "./utils/repair-serialization"
 import filterCommands from "./utils/filterCommands"
 
 export {
- theme,
+ // Contexts
+ ActionButton,
  ContentView,
+ CustomCommandsContext,
+ CustomCommandsProvider,
+ DispatchActionModal,
  EmptyState,
+ filterCommands,
  Header,
  Modal,
+ RandomJoke,
+ ReactNativeContext,
+ ReactNativeProvider,
  ReactotronAppProvider,
- ActionButton,
- Tooltip,
- TimelineCommand,
- timelineCommandResolver,
- TimelineCommandTabButton,
- DispatchActionModal,
- SnapshotRenameModal,
- SubscriptionAddModal,
- TimelineFilterModal,
- Timestamp,
- TreeView,
- repairSerialization,
- filterCommands,
- // Contexts
  ReactotronContext,
  ReactotronProvider,
- CustomCommandsContext,
- CustomCommandsProvider,
- ReactNativeContext,
- ReactNativeProvider,
+ repairSerialization,
+ SnapshotRenameModal,
  StateContext,
  StateProvider,
+ SubscriptionAddModal,
+ theme,
+ TimelineCommand,
+ timelineCommandResolver,
+ TimelineCommandTabButton,
  TimelineContext,
+ TimelineFilterModal,
  TimelineProvider,
+ Timestamp,
+ Tooltip,
+ TreeView,
 }
 
 export type { CustomCommand } from "./contexts/CustomCommands/useCustomCommands"