overmind/packages/overmind-devtools-client/src/components/Components/index.tsx at patch-3 · hipertracker/overmind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import * as React from 'react'
import { useAppState, useActions } from '../../overmind'
import * as styles from './styles'
import * as textStyles from '../../styles/text'
import { css } from 'emotion'
import { colors } from '../../theme'
import { FaChevronDown, FaChevronUp } from 'react-icons/fa'

const Components: React.FunctionComponent = () => {
  const state = useAppState()
  const actions = useActions()

  function renderStats() {
    return (
      <div className={styles.statsContainer}>
        <div className={styles.panels}>
          <div className={styles.panel}>
            <span className={css(textStyles.label, textStyles.denseLabel)}>
              connected
            </span>
            <span className={css(textStyles.header, textStyles.denseHeader)}>
              {state.componentsMounted.length}
            </span>
          </div>
          <div className={styles.panel}>
            <span className={css(textStyles.label, textStyles.denseLabel)}>
              update count
            </span>
            <span
              className={css(textStyles.header, textStyles.denseHeader)}
              style={{ color: colors.blue }}
            >
              {state.componentsUpdateCount}
            </span>
          </div>
          <div className={styles.panel}>
            <span className={css(textStyles.label, textStyles.denseLabel)}>
              paths count
            </span>
            <span
              className={css(textStyles.header, textStyles.denseHeader)}
              style={{ color: colors.green }}
            >
              {state.componentsStatePathCount}
            </span>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className={styles.wrapper}>
      {renderStats()}
      {Object.keys(state.groupedComponents).map((name) => {
        const groupedComponent = state.groupedComponents[name]

        return (
          <div key={name}>
            {groupedComponent.components.map((component) => {
              return (
                <div
                  key={component.id}
                  className={styles.component}
                  onClick={() => actions.toggleCollapsedComponent(component)}
                >
                  <div className={styles.componentName}>{component.name}</div>
                  <div
                    className={styles.componentPathsCount}
                    style={{
                      backgroundColor: colors.blue,
                    }}
                  >
                    {component.updateCount}
                  </div>
                  <div
                    className={styles.componentPathsCount}
                    style={{
                      backgroundColor:
                        component.paths.length <= 10
                          ? colors.green
                          : component.paths.length <= 20
                          ? colors.yellow
                          : colors.red,
                    }}
                  >
                    {component.paths.length}
                  </div>
                  <div className={styles.componentPaths}>
                    <div className={styles.componentPathsBody}>
                      <div className={styles.componentPathsHeader}>
                        <span className={css(textStyles.hint, styles.faded)}>
                          {component.isCollapsed ? (
                            <FaChevronDown />
                          ) : (
                            <FaChevronUp />
                          )}
                        </span>
                      </div>
                      {component.isCollapsed ? null : (
                        <div className={styles.componentPathsItems}>
                          {component.paths.map((path, index) => (
                            <span key={path}>
                              {path}
                              {index < component.paths.length - 1 ? (
                                <span className={styles.separator}>|</span>
                              ) : null}
                            </span>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        )
      })}
    </div>
  )
}

export default Components