fix(reactotron-app): Timeline empty state improvements (#1395 by @carlinisaacson)

#1359

- Timeline empty state improvements
  - Adds a button for the quick start guide
  - Adds a random developer joke

Contributors: @carlinisaacson @trevor-coleman @darinwilson 


![DD321274-A94C-42AF-BCAF-AB9A6996B126](https://github.com/infinitered/reactotron/assets/1761434/d1c2d3fb-38b2-4f0a-96f4-e021fc41fb46)

---------

Co-authored-by: Frank Calise <[email protected]>

Author: carlinisaacson

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo } from "react"
-import { clipboard } from "electron"
+import { clipboard, shell } from "electron"
 import fs from "fs"
 import debounce from "lodash.debounce"
 import {
@@ -10,6 +10,7 @@ import {
   EmptyState,
   ReactotronContext,
   TimelineContext,
+  RandomJoke,
 } from "reactotron-core-ui"
 import { MdSearch, MdDeleteSweep, MdFilterList, MdSwapVert, MdReorder } from "react-icons/md"
 import { FaTimes } from "react-icons/fa"
@@ -20,13 +21,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;
@@ -48,6 +47,27 @@ const SearchInput = styled.input`
   color: ${(props) => props.theme.foregroundDark};
   font-size: 14px;
 `
+const HelpMessage = styled.div`
+  margin: 0 40px;
+`
+const QuickStartButtonContainer = 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;
+`
+
 export const ButtonContainer = styled.div`
   padding: 10px;
   cursor: pointer;
@@ -80,6 +100,10 @@ function Timeline() {
     sendCommand("state.action.dispatch", { action })
   }
 
+  function openDocs() {
+    shell.openExternal("https://docs.infinite.red/reactotron/quick-start/react-native/")
+  }
+
   const { searchString, handleInputChange } = useDebouncedSearchInput(search, setSearch, 300)
 
   return (
@@ -139,7 +163,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>
+            <QuickStartButtonContainer onClick={openDocs}>
+              Check out the quick start guide here!
+            </QuickStartButtonContainer>
+            <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"