10 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "fireadmin",
3 | "name": "fireadmin",
4 | "start_url": "./",
5 | "scope": ".",
6 | "background_color": "#ef6c00",
7 | "theme_color": "#ef6c00",
8 | "display": "standalone",
9 | "gcm_sender_id": "103953800507"
10 | }
11 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 |
--------------------------------------------------------------------------------
/scripts/snapshotResolver.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | /** resolves from test to snapshot path */
3 | resolveSnapshotPath: (testPath, snapshotExtension) => {
4 | return testPath.replace('src/', '__snapshots__/') + snapshotExtension
5 | },
6 |
7 | /** resolves from snapshot to test path */
8 | resolveTestPath: (snapshotFilePath, snapshotExtension) => {
9 | return snapshotFilePath
10 | .replace('__snapshots__/', 'src/')
11 | .slice(0, -snapshotExtension.length)
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/AnalyticsPageViewLogger/AnalyticsPageViewLogger.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useAnalytics, useUser } from 'reactfire'
3 | import { useLocation } from 'react-router-dom'
4 | import { setErrorUser } from 'utils/errorHandler'
5 |
6 | export default function AnalyticsPageViewLogger() {
7 | const location = useLocation()
8 | const analytics = useAnalytics()
9 | const user = useUser()
10 | // By passing `user.uid` to the second argument of `useEffect`,
11 | // we only set user id when it exists
12 | useEffect(() => {
13 | if (user?.uid) {
14 | analytics.setUserId(user.uid)
15 | setErrorUser(user)
16 | }
17 | }, [user?.uid]) // eslint-disable-line react-hooks/exhaustive-deps
18 |
19 | // By passing `location.pathname` to the second argument of `useEffect`,
20 | // we only log on first render and when the `pathname` changes
21 | useEffect(() => {
22 | if (!window.Cypress) {
23 | // Trigger event in Firebase analytics
24 | if (process.env.REACT_APP_FB_measurementId) {
25 | analytics.logEvent('page-view', { path_name: location.pathname })
26 | }
27 | // Track event in Segment
28 | if (process.env.REACT_APP_SEGMENT_ID && window.analytics) {
29 | window.analytics.track('page-view', { path_name: location.pathname })
30 | }
31 | }
32 | }, [location.pathname]) // eslint-disable-line react-hooks/exhaustive-deps
33 |
34 | return null
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/AnalyticsPageViewLogger/index.js:
--------------------------------------------------------------------------------
1 | import AnalyticsPageViewLogger from './AnalyticsPageViewLogger'
2 |
3 | export default AnalyticsPageViewLogger
4 |
--------------------------------------------------------------------------------
/src/components/CollectionSearch/CollectionSearch.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | spacer: {
3 | height: '2rem'
4 | },
5 | poweredBy: {
6 | ...theme.flexRowCenter,
7 | marginTop: '.4rem',
8 | marginBottom: '0rem'
9 | }
10 | })
11 |
--------------------------------------------------------------------------------
/src/components/CollectionSearch/ResultsList.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React from 'react'
3 | import PropTypes from 'prop-types'
4 | import { connectHits } from 'react-instantsearch/connectors'
5 | import MenuList from '@material-ui/core/MenuList'
6 | import SuggestedItem from './SuggestedItem'
7 |
8 | function ResultsList({ hits, onSuggestionClick }) {
9 | return (
10 |
11 |
12 | {hits.map((hit, i) => (
13 |
18 | ))}
19 |
20 |
21 | )
22 | }
23 |
24 | ResultsList.propTypes = {
25 | hits: PropTypes.array, // from connectHits
26 | onSuggestionClick: PropTypes.func // from UsersSearch
27 | }
28 |
29 | export default connectHits(ResultsList)
30 |
--------------------------------------------------------------------------------
/src/components/CollectionSearch/SearchResults.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { Stats } from 'react-instantsearch/dom'
4 | import { connectStateResults } from 'react-instantsearch/connectors'
5 | import ResultsList from './ResultsList'
6 |
7 | function SearchResults({ searchState, searchResults, onSuggestionClick }) {
8 | return searchState.query && searchResults && searchResults.nbHits !== 0 ? (
9 |
10 |
11 |
12 |
13 | ) : null
14 | }
15 |
16 | SearchResults.propTypes = {
17 | searchState: PropTypes.shape({
18 | // from connectStateResults
19 | query: PropTypes.string
20 | }),
21 | onSuggestionClick: PropTypes.func.isRequired,
22 | searchResults: PropTypes.object // from connectStateResults
23 | }
24 |
25 | export default connectStateResults(SearchResults)
26 |
--------------------------------------------------------------------------------
/src/components/CollectionSearch/SuggestedItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import MenuItem from '@material-ui/core/MenuItem'
4 | import { Highlight } from 'react-instantsearch/dom'
5 |
6 | function SuggestedItem({ hit, onClick }) {
7 | function handleClick() {
8 | onClick(hit)
9 | }
10 |
11 | return (
12 |
29 | )
30 | }
31 |
32 | SuggestedItem.propTypes = {
33 | hit: PropTypes.object,
34 | onClick: PropTypes.func
35 | }
36 |
37 | export default SuggestedItem
38 |
--------------------------------------------------------------------------------
/src/components/CollectionSearch/index.js:
--------------------------------------------------------------------------------
1 | import CollectionSearch from './CollectionSearch'
2 |
3 | export default CollectionSearch
4 |
--------------------------------------------------------------------------------
/src/components/LoadingSpinner/LoadingSpinner.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import CircularProgress from '@material-ui/core/CircularProgress'
4 | import { makeStyles } from '@material-ui/core/styles'
5 | import styles from './LoadingSpinner.styles'
6 |
7 | const useStyles = makeStyles(styles)
8 |
9 | function LoadingSpinner({ size }) {
10 | const classes = useStyles()
11 |
12 | return (
13 |
18 | )
19 | }
20 |
21 | LoadingSpinner.propTypes = {
22 | size: PropTypes.number
23 | }
24 |
25 | export default LoadingSpinner
26 |
--------------------------------------------------------------------------------
/src/components/LoadingSpinner/LoadingSpinner.styles.js:
--------------------------------------------------------------------------------
1 | export default () => ({
2 | root: {
3 | display: 'flex',
4 | alignItems: 'center',
5 | flexDirection: 'column',
6 | justifyContent: 'flex-start',
7 | paddingTop: '7rem',
8 | height: '100%'
9 | },
10 | progress: {
11 | display: 'flex',
12 | justifyContent: 'center',
13 | alignItems: 'center',
14 | height: '50%'
15 | }
16 | })
17 |
--------------------------------------------------------------------------------
/src/components/LoadingSpinner/LoadingSpinner.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import renderer from 'react-test-renderer'
4 | import LoadingSpinner from './index'
5 |
6 | it('renders without crashing', () => {
7 | const div = document.createElement('div')
8 | ReactDOM.render(, div)
9 | ReactDOM.unmountComponentAtNode(div)
10 | })
11 |
12 | it('renders a spinner', () => {
13 | const tree = renderer.create().toJSON()
14 | expect(tree).toMatchSnapshot()
15 | })
16 |
--------------------------------------------------------------------------------
/src/components/LoadingSpinner/index.js:
--------------------------------------------------------------------------------
1 | import LoadingSpinner from './LoadingSpinner'
2 |
3 | export default LoadingSpinner
4 |
--------------------------------------------------------------------------------
/src/components/SetupFirestore/SetupFirestore.js:
--------------------------------------------------------------------------------
1 | import { useFirestore } from 'reactfire'
2 |
3 | export default function SetupFirestore() {
4 | const firestore = useFirestore()
5 | const firestoreSettings = {}
6 | if (window.Cypress) {
7 | // Needed for Firestore support in Cypress (see https://github.com/cypress-io/cypress/issues/6350)
8 | firestoreSettings.experimentalForceLongPolling = true
9 | }
10 | if (process.env.REACT_APP_FIRESTORE_EMULATOR_HOST) {
11 | firestoreSettings.host = process.env.REACT_APP_FIRESTORE_EMULATOR_HOST
12 | firestoreSettings.ssl = false
13 | // eslint-disable-next-line no-console
14 | console.debug(
15 | `Firestore emulator enabled: ${process.env.REACT_APP_FIRESTORE_EMULATOR_HOST}`
16 | )
17 | }
18 | firestore.settings(firestoreSettings)
19 |
20 | return null
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/SetupFirestore/index.js:
--------------------------------------------------------------------------------
1 | import SetupFirestore from './SetupFirestore'
2 |
3 | export default SetupFirestore
4 |
--------------------------------------------------------------------------------
/src/components/SetupMessaging/SetupMessaging.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useMessaging, useUser } from 'reactfire'
3 | import useSetupMessaging from './useSetupMessaging'
4 |
5 | function LoadMessaging() {
6 | const { initializeMessaging } = useSetupMessaging()
7 | initializeMessaging()
8 | return null
9 | }
10 |
11 | function LoadIfAuthed() {
12 | const user = useUser()
13 |
14 | // Render nothing if user is not logged in or if messaging is not supported
15 | if (!user || !user.uid) {
16 | return null
17 | }
18 |
19 | return
20 | }
21 |
22 | export default function SetupMessaging() {
23 | const { isSupported } = useMessaging
24 |
25 | // Render nothing if not supported or run UI tests
26 | if (
27 | !process.env.REACT_APP_FB_measurementId ||
28 | window.Cypress ||
29 | !isSupported()
30 | ) {
31 | return null
32 | }
33 |
34 | // Load messaging if user is logged in
35 | return
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/SetupMessaging/index.js:
--------------------------------------------------------------------------------
1 | import SetupMessaging from './SetupMessaging'
2 |
3 | export default SetupMessaging
4 |
--------------------------------------------------------------------------------
/src/components/SplitButton/index.js:
--------------------------------------------------------------------------------
1 | import SplitButton from './SplitButton'
2 |
3 | export default SplitButton
4 |
--------------------------------------------------------------------------------
/src/components/TabContainer/TabContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Typography from '@material-ui/core/Typography'
4 |
5 | function TabContainer({ children }) {
6 | return (
7 |
8 | {children}
9 |
10 | )
11 | }
12 |
13 | TabContainer.propTypes = {
14 | children: PropTypes.object
15 | }
16 |
17 | export default TabContainer
18 |
--------------------------------------------------------------------------------
/src/components/TabContainer/index.js:
--------------------------------------------------------------------------------
1 | import TabContainer from './TabContainer'
2 |
3 | export default TabContainer
4 |
--------------------------------------------------------------------------------
/src/components/UsersList/UsersList.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import PersonIcon from '@material-ui/icons/Person'
4 | import Checkbox from '@material-ui/core/Checkbox'
5 | import Avatar from '@material-ui/core/Avatar'
6 | import List from '@material-ui/core/List'
7 | import ListItem from '@material-ui/core/ListItem'
8 | import ListItemAvatar from '@material-ui/core/ListItemAvatar'
9 | import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
10 | import ListItemText from '@material-ui/core/ListItemText'
11 |
12 | function UsersList({ users, onUserClick }) {
13 | return (
14 |
15 | {users.map((user, i) => (
16 |
19 |
20 | {user.avatarUrl ? (
21 |
22 | ) : (
23 |
24 |
25 |
26 | )}
27 |
28 |
29 |
30 | onUserClick(user)}
33 | checked={
34 | !!users.find(
35 | (currentUser) =>
36 | currentUser.objectID === user.id || user.objectID
37 | )
38 | }
39 | />
40 |
41 |
42 | ))}
43 |
44 | )
45 | }
46 |
47 | UsersList.propTypes = {
48 | users: PropTypes.array.isRequired,
49 | onUserClick: PropTypes.func.isRequired
50 | }
51 |
52 | export default UsersList
53 |
--------------------------------------------------------------------------------
/src/components/UsersList/index.js:
--------------------------------------------------------------------------------
1 | import UsersList from './UsersList'
2 |
3 | export default UsersList
4 |
--------------------------------------------------------------------------------
/src/components/UsersSearch/ResultsList.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { connectHits } from 'react-instantsearch/connectors'
4 | import List from '@material-ui/core/List'
5 | import SuggestedUser from './SuggestedUser'
6 |
7 | function ResultsList({ hits, onSuggestionClick }) {
8 | return (
9 |
10 | {hits.map((hit, i) => (
11 |
17 | ))}
18 |
19 | )
20 | }
21 |
22 | ResultsList.propTypes = {
23 | hits: PropTypes.array, // from connectHits
24 | onSuggestionClick: PropTypes.func // from UsersSearch
25 | }
26 |
27 | export default connectHits(ResultsList)
28 |
--------------------------------------------------------------------------------
/src/components/UsersSearch/SearchResults.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { Stats } from 'react-instantsearch/dom'
4 | import { connectStateResults } from 'react-instantsearch/connectors'
5 | import ResultsList from './ResultsList'
6 |
7 | function SearchResults({
8 | searchState,
9 | searchResults,
10 | onSuggestionClick,
11 | resultsTitle
12 | }) {
13 | return searchState.query && searchResults && searchResults.nbHits !== 0 ? (
14 |
15 | {resultsTitle ?
{resultsTitle}
: null}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
} traceId="load-navbar">
23 |
24 |
25 |
{children}
26 |
27 |
28 |
29 |
30 |
Accounts}>
13 | {providerData.map((providerAccount) => (
14 |
15 |
16 |
17 |
18 |
19 |
20 | ))}
21 |
22 | )
23 | }
24 |
25 | ProviderData.propTypes = {
26 | providerData: PropTypes.array.isRequired
27 | }
28 |
29 | export default ProviderData
30 |
--------------------------------------------------------------------------------
/src/routes/Account/components/ProviderDataForm/index.js:
--------------------------------------------------------------------------------
1 | import ProviderDataForm from './ProviderDataForm'
2 |
3 | export default ProviderDataForm
4 |
--------------------------------------------------------------------------------
/src/routes/Account/index.js:
--------------------------------------------------------------------------------
1 | import { loadable } from 'utils/router'
2 | import { ACCOUNT_PATH as path } from 'constants/paths'
3 |
4 | export default {
5 | path,
6 | authRequired: true,
7 | component: loadable(() =>
8 | import(/* webpackChunkName: 'Account' */ './components/AccountPage')
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionStepLocation/ActionStepLocation.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | field: theme.field
3 | })
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionStepLocation/index.js:
--------------------------------------------------------------------------------
1 | import ActionStepLocation from './ActionStepLocation'
2 |
3 | export default ActionStepLocation
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplateBackups/ActionTemplateBackups.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | ...theme.flexColumn
4 | },
5 | field: theme.field,
6 | addAction: {
7 | marginTop: '.5rem',
8 | marginBottom: '1.5rem'
9 | },
10 | title: {
11 | fontSize: '1.2rem',
12 | flexBasis: '33.33%',
13 | flexShrink: '0'
14 | },
15 | sections: {
16 | ...theme.flexRow,
17 | alignItems: 'center'
18 | },
19 | deleteButton: {
20 | margin: '0px',
21 | padding: '0px'
22 | },
23 | delete: {
24 | ...theme.flexRow,
25 | justifyContent: 'flex-end'
26 | }
27 | })
28 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplateBackups/index.js:
--------------------------------------------------------------------------------
1 | import ActionTemplateBackups from './ActionTemplateBackups'
2 |
3 | export default ActionTemplateBackups
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplateEnvs/ActionTemplateEnvs.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | field: theme.field,
3 | addAction: {
4 | marginTop: '.5rem',
5 | marginBottom: '1.5rem'
6 | },
7 | title: {
8 | fontSize: '1.2rem',
9 | flexBasis: '33.33%',
10 | flexShrink: '0'
11 | },
12 | type: {
13 | color: 'rgba(0, 0, 0, 0.54)'
14 | },
15 | required: {
16 | marginTop: '2rem',
17 | maxWidth: '120px'
18 | },
19 | delete: {
20 | ...theme.flexRow,
21 | justifyContent: 'flex-end'
22 | },
23 | deleteButton: {
24 | alignSelf: 'flex-end'
25 | }
26 | })
27 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplateEnvs/index.js:
--------------------------------------------------------------------------------
1 | import ActionTemplateEnvs from './ActionTemplateEnvs'
2 |
3 | export default ActionTemplateEnvs
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplateForm/ActionTemplateForm.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | ...theme.flexColumn
4 | },
5 | field: theme.field,
6 | buttons: {
7 | ...theme.flexRow,
8 | justifyContent: 'flex-start',
9 | marginTop: '2rem',
10 | marginBottom: '2rem'
11 | },
12 | paper: {
13 | padding: '2rem',
14 | width: '60%' // TODO: Replace with grid
15 | },
16 | actions: {
17 | marginTop: '2rem'
18 | },
19 | header: {
20 | color: 'rgba(0, 0, 0, 0.54)',
21 | fontSize: '1.6rem',
22 | marginRight: '2rem'
23 | },
24 | addAction: {
25 | marginBottom: '2rem'
26 | },
27 | title: {
28 | fontSize: '1.2rem'
29 | },
30 | publicToggle: {
31 | maxWidth: '5rem',
32 | marginTop: '1.5rem',
33 | marginBottom: '0.5rem'
34 | },
35 | button: {
36 | margin: theme.spacing(),
37 | cursor: 'finger'
38 | }
39 | })
40 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplateForm/index.js:
--------------------------------------------------------------------------------
1 | import ActionTemplateForm from './ActionTemplateForm'
2 |
3 | export default ActionTemplateForm
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplateInputs/ActionTemplateInputs.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | ...theme.flexColumn
4 | },
5 | field: theme.field,
6 | addAction: {
7 | marginTop: '.5rem',
8 | marginBottom: '1.5rem'
9 | },
10 | title: {
11 | fontSize: '1.2rem',
12 | flexBasis: '33.33%',
13 | flexShrink: '0'
14 | },
15 | subcollectionOption: {
16 | marginTop: '1rem'
17 | },
18 | type: {
19 | color: 'rgba(0, 0, 0, 0.54)'
20 | },
21 | required: {
22 | marginTop: '2rem',
23 | maxWidth: '120px'
24 | },
25 | delete: {
26 | ...theme.flexRow,
27 | justifyContent: 'flex-end'
28 | },
29 | deleteButton: {
30 | alignSelf: 'flex-end'
31 | }
32 | })
33 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplateInputs/index.js:
--------------------------------------------------------------------------------
1 | import ActionTemplateInputs from './ActionTemplateInputs'
2 |
3 | export default ActionTemplateInputs
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplatePage/ActionTemplatePage.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | padding: '2rem'
4 | },
5 | paper: {
6 | padding: '2rem'
7 | },
8 | header: {
9 | color: 'rgba(0, 0, 0, 0.54)',
10 | fontSize: '2.25rem'
11 | },
12 | notFound: {
13 | ...theme.flexRowCenter,
14 | marginTop: '4rem'
15 | },
16 | notFoundText: {
17 | fontSize: '2rem'
18 | }
19 | })
20 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplatePage/TemplateLoadingError.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Typography from '@material-ui/core/Typography'
4 | import { makeStyles } from '@material-ui/core/styles'
5 | import styles from './ActionTemplatePage.styles'
6 |
7 | const useStyles = makeStyles(styles)
8 |
9 | function TemplateLoadingError({ errorMessage }) {
10 | const classes = useStyles()
11 |
12 | return (
13 |
14 |
15 | Error loading templates: {errorMessage}
16 |
17 |
18 | )
19 | }
20 |
21 | TemplateLoadingError.propTypes = {
22 | errorMessage: PropTypes.string.isRequired
23 | }
24 |
25 | export default TemplateLoadingError
26 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplatePage/TemplateNotFound.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Typography from '@material-ui/core/Typography'
3 | import { makeStyles } from '@material-ui/core/styles'
4 | import styles from './ActionTemplatePage.styles'
5 |
6 | const useStyles = makeStyles(styles)
7 |
8 | function TemplateNotFound() {
9 | const classes = useStyles()
10 |
11 | return (
12 |
13 |
14 | Template Not Found
15 |
16 |
17 | )
18 | }
19 |
20 | export default TemplateNotFound
21 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplatePage/index.js:
--------------------------------------------------------------------------------
1 | import ActionTemplatePage from './ActionTemplatePage'
2 |
3 | export default ActionTemplatePage
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplateSteps/ActionTemplateSteps.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | ...theme.flexColumn
4 | },
5 | field: theme.field,
6 | multilineField: theme.multilineField,
7 | alignCenter: {
8 | textAlign: 'center'
9 | },
10 | content: {
11 | ...theme.flexColumn
12 | },
13 | buttons: {
14 | ...theme.flexRow,
15 | justifyContent: 'flex-start',
16 | marginTop: '2rem',
17 | marginBottom: '2rem'
18 | },
19 | removeButton: {
20 | ...theme.flexRow,
21 | justifyContent: 'flex-end',
22 | alignSelf: 'flex-end',
23 | padding: '0px',
24 | width: '100%'
25 | },
26 | paper: {
27 | padding: '2rem',
28 | width: '60%' // TODO: Replace with grid
29 | },
30 | actions: {
31 | marginTop: '2rem'
32 | },
33 | header: {
34 | color: 'rgba(0, 0, 0, 0.54)',
35 | fontSize: '1.6rem',
36 | marginRight: '2rem'
37 | },
38 | addAction: {
39 | marginTop: '.5rem',
40 | marginBottom: '1.5rem'
41 | },
42 | title: {
43 | fontSize: '1.2rem'
44 | },
45 | subcollectionOption: {
46 | marginTop: '1rem'
47 | },
48 | delete: {
49 | ...theme.flexRow,
50 | justifyContent: 'flex-end'
51 | }
52 | })
53 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/ActionTemplateSteps/index.js:
--------------------------------------------------------------------------------
1 | import ActionTemplateSteps from './ActionTemplateSteps'
2 |
3 | export default ActionTemplateSteps
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/DeleteTemplateDialog/DeleteTemplateDialog.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Dialog from '@material-ui/core/Dialog'
4 | import DialogTitle from '@material-ui/core/DialogTitle'
5 | import DialogActions from '@material-ui/core/DialogActions'
6 | import DialogContent from '@material-ui/core/DialogContent'
7 | import Button from '@material-ui/core/Button'
8 |
9 | function DeleteTemplateDialog({ onClose, onDeleteClick, open, templateName }) {
10 | return (
11 |
22 | )
23 | }
24 |
25 | DeleteTemplateDialog.propTypes = {
26 | onClose: PropTypes.func.isRequired,
27 | onDeleteClick: PropTypes.func.isRequired,
28 | open: PropTypes.bool.isRequired,
29 | templateName: PropTypes.string
30 | }
31 |
32 | export default DeleteTemplateDialog
33 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/components/DeleteTemplateDialog/index.js:
--------------------------------------------------------------------------------
1 | import DeleteTemplateDialog from './DeleteTemplateDialog'
2 |
3 | export default DeleteTemplateDialog
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplate/index.js:
--------------------------------------------------------------------------------
1 | import { loadable } from 'utils/router'
2 | import { ACTION_TEMPLATES_PATH } from 'constants/paths'
3 |
4 | export default {
5 | path: `${ACTION_TEMPLATES_PATH}/:templateId`,
6 | component: loadable(() =>
7 | import(
8 | /* webpackChunkName: 'ActionTemplate' */ './components/ActionTemplatePage'
9 | )
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplates/components/ActionTemplateListCard/ActionTemplateListCard.styles.js:
--------------------------------------------------------------------------------
1 | import red from '@material-ui/core/colors/red'
2 |
3 | export default (theme) => ({
4 | card: {
5 | maxWidth: 400,
6 | height: '14rem'
7 | },
8 | cardTitle: {
9 | cursor: 'pointer',
10 | color: theme.palette.text.primary
11 | },
12 | media: {
13 | height: 194,
14 | overflow: 'hidden',
15 | textOverflow: 'ellipsis',
16 | wordWrap: 'no-wrap'
17 | },
18 | expand: {
19 | transform: 'rotate(0deg)',
20 | transition: theme.transitions.create('transform', {
21 | duration: theme.transitions.duration.shortest
22 | })
23 | },
24 | expandOpen: {
25 | transform: 'rotate(180deg)'
26 | },
27 | avatar: {
28 | backgroundColor: red[500]
29 | },
30 | flexGrow: {
31 | flex: '1 1 auto'
32 | }
33 | })
34 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplates/components/ActionTemplateListCard/index.js:
--------------------------------------------------------------------------------
1 | import ActionTemplateListCard from './ActionTemplateListCard'
2 |
3 | export default ActionTemplateListCard
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplates/components/ActionTemplatesList/ActionTemplatesList.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | flexGrow: 1
4 | },
5 | new: {
6 | marginBottom: '2rem'
7 | },
8 | sectionHeader: {
9 | color: 'rgba(0, 0, 0, 0.54)',
10 | fontSize: '1.6rem',
11 | fontWeight: '300',
12 | marginTop: '2rem',
13 | marginBottom: '2rem'
14 | }
15 | })
16 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplates/components/ActionTemplatesList/index.js:
--------------------------------------------------------------------------------
1 | import ActionTemplatesList from './ActionTemplatesList'
2 |
3 | export default ActionTemplatesList
4 |
--------------------------------------------------------------------------------
/src/routes/ActionTemplates/components/ActionTemplatesPage/ActionTemplatesPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Typography from '@material-ui/core/Typography'
3 | import ActionTemplatesList from '../ActionTemplatesList'
4 | import { makeStyles } from '@material-ui/core/styles'
5 | import styles from './ActionTemplatesPage.styles'
6 |
7 | const useStyles = makeStyles(styles)
8 |
9 | function ActionTemplatesPage() {
10 | const classes = useStyles()
11 | return (
12 |
13 |
Action Templates
14 |
15 |
12 |
Whoops! 404!
13 |
This page was not found.
14 |
30 |
31 | Error Loading Project
32 | {errorMessage}
33 |
34 |
Project Not Found
13 | }
14 |
15 | export default ProjectNotFoundPage
16 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/components/ProjectPage/ProjectPage.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | ...theme.flexColumnCenter,
4 | marginBottom: theme.spacing(4)
5 | },
6 | pageHeader: theme.pageHeader
7 | })
8 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/components/ProjectPage/index.js:
--------------------------------------------------------------------------------
1 | import ProjectPage from './ProjectPage'
2 |
3 | export default ProjectPage
4 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/index.js:
--------------------------------------------------------------------------------
1 | import { loadable } from 'utils/router'
2 |
3 | export default {
4 | path: ':projectId',
5 | component: loadable(() =>
6 | import(/* webpackChunkName: 'ProjectPage' */ './components/ProjectPage')
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Actions/components/ActionsPage/ActionPage.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | container: {
3 | overflowY: 'scroll',
4 | paddingBottom: '4rem',
5 | padding: '.125rem'
6 | },
7 | pageHeader: theme.pageHeader,
8 | button: {
9 | marginLeft: '2rem'
10 | },
11 | buttons: {
12 | ...theme.flexRow,
13 | marginBottom: '2rem',
14 | marginLeft: '.75rem'
15 | },
16 | or: {
17 | ...theme.flexRowCenter,
18 | marginTop: '1rem',
19 | marginBottom: '1rem'
20 | },
21 | orFont: {
22 | fontSize: '1.3rem'
23 | },
24 | search: {
25 | // ...theme.flexRowCenter,
26 | marginTop: theme.spacing(6)
27 | },
28 | sectionHeader: {
29 | display: 'inline-block'
30 | },
31 | paperHeader: {
32 | color: theme.palette.text.secondary,
33 | textAlign: 'center',
34 | paddingBottom: 0,
35 | marginBottom: 0
36 | },
37 | paperHeaderText: {
38 | color: theme.palette.text.secondary,
39 | paddingBottom: 0
40 | },
41 | paper: {
42 | padding: theme.spacing(2),
43 | textAlign: 'center',
44 | color: theme.palette.text.secondary
45 | },
46 | helpIcon: {
47 | marginBottom: theme.spacing(1),
48 | marginLeft: theme.spacing(1)
49 | }
50 | })
51 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Actions/components/ActionsPage/index.js:
--------------------------------------------------------------------------------
1 | import ActionsPage from './ActionsPage'
2 |
3 | export default ActionsPage
4 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Actions/components/ActionsRunnerForm/ActionsRunnerForm.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | marginTop: '.75rem'
4 | },
5 | button: {
6 | marginLeft: '2rem'
7 | },
8 | buttons: {
9 | ...theme.flexRow,
10 | justifyContent: 'flex-end',
11 | marginTop: '2rem',
12 | marginBottom: '2rem',
13 | marginLeft: '.75rem'
14 | }
15 | })
16 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Actions/components/ActionsRunnerForm/index.js:
--------------------------------------------------------------------------------
1 | import ActionsRunnerForm from './ActionsRunnerForm'
2 |
3 | export default ActionsRunnerForm
4 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Actions/components/PrivateActionTemplates/NoTemplatesFound.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { makeStyles } from '@material-ui/core/styles'
3 | import styles from './PrivateActionTemplates.styles'
4 |
5 | const useStyles = makeStyles(styles)
6 |
7 | function NoTemplatesFound() {
8 | const classes = useStyles()
9 |
10 | return No Private Templates Found
11 | }
12 |
13 | export default NoTemplatesFound
14 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Actions/components/PrivateActionTemplates/PrivateActionTemplates.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Divider from '@material-ui/core/Divider'
4 | import List from '@material-ui/core/List'
5 | import ListItem from '@material-ui/core/ListItem'
6 | import ListItemText from '@material-ui/core/ListItemText'
7 | import { makeStyles } from '@material-ui/core/styles'
8 | import { useFirestore, useUser, useFirestoreCollectionData } from 'reactfire'
9 | import styles from './PrivateActionTemplates.styles'
10 | import NoTemplatesFound from './NoTemplatesFound'
11 |
12 | const useStyles = makeStyles(styles)
13 |
14 | function PrivateActionTemplates({ onTemplateClick }) {
15 | const classes = useStyles()
16 | const firestore = useFirestore()
17 | const user = useUser()
18 | const actionTemplatesQuery = firestore
19 | .collection('actionTemplates')
20 | .where('createdBy', '==', user.uid)
21 | .where('public', '==', false)
22 | const templates = useFirestoreCollectionData(actionTemplatesQuery, {
23 | idField: 'id'
24 | })
25 |
26 | if (!templates.length) {
27 | return
28 | }
29 |
30 | return (
31 |
32 |
33 |
34 | {templates.map((item, idx) => [
35 | onTemplateClick(item)}>
39 |
40 | ,
41 |
42 | ])}
43 |
44 |
15 |
16 | Storage Bucket Configuration
17 |
18 |
19 |
20 |
21 |
19 | {fields.map((item, index) => (
20 |
21 |
28 | {index !== 0 && (
29 | remove(index)}
31 | style={{ marginTop: '1.5rem' }}>
32 |
33 |
34 | )}
35 |
36 | ))}
37 |
38 |
41 |
42 |
No Members found
8 |
9 | )
10 | }
11 |
12 | export default NoPermissionsFound
13 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Permissions/components/PermissionsTable/PermissionsTable.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | heading: {
3 | fontSize: theme.typography.pxToRem(18),
4 | fontWeight: theme.typography.fontWeightRegular
5 | },
6 | header: {
7 | padding: theme.spacing(2)
8 | },
9 | headerLeft: {
10 | marginRight: theme.spacing(24),
11 | fontColor: theme.palette.text.primary,
12 | fontSize: theme.typography.pxToRem(16),
13 | fontWeight: theme.typography.fontWeightRegular
14 | },
15 | headingPaper: {
16 | ...theme.mixins.gutters(),
17 | paddingTop: theme.spacing(2),
18 | paddingBottom: theme.spacing(2),
19 | fontColor: theme.palette.text.secondary,
20 | fontWeight: theme.typography.fontWeightRegular
21 | }
22 | })
23 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Permissions/components/PermissionsTable/index.js:
--------------------------------------------------------------------------------
1 | import PermissionsTable from './PermissionsTable'
2 |
3 | export default PermissionsTable
4 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Permissions/components/PermissionsTableRow/PermissionsTableRow.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | width: '100%'
4 | },
5 | field: theme.field,
6 | heading: {
7 | fontSize: theme.typography.pxToRem(15),
8 | fontWeight: theme.typography.fontWeightRegular
9 | },
10 | displayName: {
11 | width: '15rem',
12 | marginRight: '2rem',
13 | overflow: 'hidden'
14 | },
15 | permission: {
16 | marginLeft: '-.75rem'
17 | },
18 | menu: {
19 | ...theme.flexRow,
20 | justifyContent: 'flex-end',
21 | width: '100%',
22 | marginTop: '.5rem'
23 | },
24 | roleSelect: {
25 | marginTop: '2.5rem',
26 | paddingLeft: '2rem',
27 | width: '350px'
28 | },
29 | content: {
30 | width: '100%',
31 | display: 'flex',
32 | flexDirection: 'column'
33 | },
34 | buttons: {
35 | ...theme.flexRow,
36 | justifyContent: 'flex-end',
37 | width: '100%'
38 | }
39 | })
40 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Permissions/components/PermissionsTableRow/index.js:
--------------------------------------------------------------------------------
1 | import PermissionsTableRow from './PermissionsTableRow'
2 |
3 | export default PermissionsTableRow
4 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Permissions/components/RolesTable/NoRolesFound.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Paper from '@material-ui/core/Paper'
3 |
4 | function NoRolesFound() {
5 | return (
6 |
7 | No Roles found
8 |
9 | )
10 | }
11 |
12 | export default NoRolesFound
13 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Permissions/components/RolesTable/RolesTable.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | height: '100%',
4 | marginTop: '3rem'
5 | },
6 | heading: {
7 | fontSize: '1.75rem',
8 | fontColor: theme.palette.text.primary,
9 | color: 'rgba(0, 0, 0, 0.54)',
10 | fontWeight: theme.typography.fontWeightRegular
11 | },
12 | filter: {
13 | display: 'flex',
14 | marginBottom: '.5rem'
15 | },
16 | filterText: {
17 | fontSize: '1rem',
18 | fontColor: theme.palette.text.primary,
19 | color: 'rgba(0, 0, 0, 0.54)',
20 | fontWeight: theme.typography.fontWeightRegular
21 | },
22 | buttons: {
23 | ...theme.flexRow,
24 | justifyContent: 'flex-end',
25 | width: '100%',
26 | marginBottom: '3rem'
27 | },
28 | rolesTable: {
29 | height: '100%',
30 | minHeight: '400px'
31 | }
32 | })
33 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Permissions/components/RolesTable/index.js:
--------------------------------------------------------------------------------
1 | import RolesTable from './RolesTable'
2 |
3 | export default RolesTable
4 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Permissions/components/RolesTableRow/RolesTableRow.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | root: {
3 | width: '100%'
4 | },
5 | heading: {
6 | fontSize: theme.typography.pxToRem(18),
7 | fontWeight: theme.typography.fontWeightRegular
8 | },
9 | content: {
10 | width: '100%',
11 | display: 'flex',
12 | flexDirection: 'column'
13 | },
14 | roleSelect: {
15 | display: 'flex',
16 | flexDirection: 'row',
17 | marginLeft: '2rem'
18 | },
19 | buttons: {
20 | display: 'flex',
21 | flexDirection: 'row',
22 | justifyContent: 'flex-end'
23 | },
24 | menu: {
25 | display: 'flex',
26 | flexDirection: 'row',
27 | justifyContent: 'flex-end',
28 | marginTop: '.5rem'
29 | },
30 | optionsLabels: {
31 | display: 'flex',
32 | flexDirection: 'column',
33 | marginTop: '1.5rem',
34 | marginRight: '1rem'
35 | },
36 | optionLabel: {
37 | marginBottom: '1rem',
38 | marginTop: '1rem'
39 | },
40 | roleOption: {
41 | marginLeft: '1rem'
42 | },
43 | roleOptions: {
44 | display: 'flex',
45 | flexDirection: 'column',
46 | justifyContent: 'center',
47 | alignItems: 'center',
48 | marginRight: '1rem',
49 | marginLeft: '1rem'
50 | },
51 | resourcePermissionsHeader: {
52 | marginBottom: '1rem',
53 | marginTop: '-2rem',
54 | fontSize: '1.1rem'
55 | }
56 | })
57 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Permissions/components/RolesTableRow/index.js:
--------------------------------------------------------------------------------
1 | import RolesTableRow from './RolesTableRow'
2 |
3 | export default RolesTableRow
4 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/Permissions/index.js:
--------------------------------------------------------------------------------
1 | import { loadable } from 'utils/router'
2 | import { PROJECT_PERMISSIONS_PATH as path } from 'constants/paths'
3 |
4 | export default {
5 | path,
6 | component: loadable(() =>
7 | import(
8 | /* webpackChunkName: 'ProjectPermissions' */ './components/Permissions'
9 | )
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/ProjectEvents/components/ProjectEventsPage/NoProjectEvents.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Paper from '@material-ui/core/Paper'
3 | import { makeStyles } from '@material-ui/core/styles'
4 |
5 | import styles from './ProjectEventsPage.styles'
6 |
7 | const useStyles = makeStyles(styles)
8 |
9 | function NoProjectEvents() {
10 | const classes = useStyles()
11 | return (
12 |
13 | No Project Events Found
14 |
15 | )
16 | }
17 |
18 | export default NoProjectEvents
19 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/ProjectEvents/components/ProjectEventsPage/ProjectEventsPage.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | body: {
3 | overflowY: 'hidden',
4 | height: '100%'
5 | },
6 | content: {
7 | overflowY: 'scroll',
8 | heigth: '100%',
9 | padding: '.5rem',
10 | paddingBottom: '6rem'
11 | },
12 | pageHeader: theme.pageHeader,
13 | tableBody: {
14 | paddingBottom: '3rem'
15 | },
16 | sectionHeader: {
17 | fontSize: '1.3rem'
18 | },
19 | tableRowDivider: {
20 | color: 'rgba(0,0,0,0.54)',
21 | backgroundColor: '#f5f5f5',
22 | borderTop: '1px solid rgba(0,0,0,0.12)',
23 | fontSize: '1.1rem',
24 | fontWeight: 'bold'
25 | },
26 | empty: {
27 | textAlign: 'center',
28 | padding: '3rem'
29 | }
30 | })
31 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/ProjectEvents/components/ProjectEventsPage/index.js:
--------------------------------------------------------------------------------
1 | import ProjectEventsPage from './ProjectEventsPage'
2 |
3 | export default ProjectEventsPage
4 |
--------------------------------------------------------------------------------
/src/routes/Projects/routes/Project/routes/ProjectEvents/index.js:
--------------------------------------------------------------------------------
1 | import { loadable } from 'utils/router'
2 | import { PROJECT_EVENTS_PATH as path } from 'constants/paths'
3 |
4 | export default {
5 | path,
6 | component: loadable(() =>
7 | import(
8 | /* webpackChunkName: 'ProjectEvents' */ './components/ProjectEventsPage'
9 | )
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/routes/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Switch, Route } from 'react-router-dom'
3 | import { SuspenseWithPerf } from 'reactfire'
4 | import AnalyticsPageViewLogger from 'components/AnalyticsPageViewLogger'
5 | import { PrivateRoute } from 'utils/router'
6 | import LoadingSpinner from 'components/LoadingSpinner'
7 | import CoreLayout from '../layouts/CoreLayout'
8 | import AccountRoute from './Account'
9 | import ActionTemplateRoute from './ActionTemplate'
10 | import ActionTemplatesRoute from './ActionTemplates'
11 | import Home from './Home'
12 | import LoginRoute from './Login'
13 | import NotFoundRoute from './NotFound'
14 | import ProjectsRoute from './Projects'
15 |
16 | export default function createRoutes(store) {
17 | return (
18 |
19 | } traceId="router-wait">
20 |
21 | {/* eslint-disable react/jsx-pascal-case */}
22 | } />
23 | {/* eslint-enable react/jsx-pascal-case */}
24 | {
25 | /* Build Route components from routeSettings */
26 | [
27 | ActionTemplateRoute,
28 | ActionTemplatesRoute,
29 | AccountRoute,
30 | ProjectsRoute,
31 | LoginRoute
32 | /* Add More Routes Here */
33 | ].map((settings) =>
34 | settings.authRequired ? (
35 |
36 | ) : (
37 |
38 | )
39 | )
40 | }
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/src/static/User.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prescottprue/fireadmin/7d49cb768a77078608c4f21d219cea2b447dfd1f/src/static/User.png
--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
1 | import orange from '@material-ui/core/colors/orange'
2 | import pink from '@material-ui/core/colors/pink'
3 | import teal from '@material-ui/core/colors/teal'
4 | import grey from '@material-ui/core/colors/grey'
5 | import blue from '@material-ui/core/colors/blue'
6 | // import { fade } from '@material-ui/core/styles/colorManipulator'
7 |
8 | export default {
9 | fontFamily: 'Roboto, sans-serif',
10 | palette: {
11 | primary: blue,
12 | primary1Color: orange[800],
13 | primary2Color: grey[400],
14 | primary3Color: orange[100],
15 | accent1Color: pink.A200,
16 | accent2Color: teal.A100
17 | },
18 | field: {
19 | width: '100%',
20 | marginTop: '2rem'
21 | // maxWidth: '350px'
22 | },
23 | multilineField: {
24 | width: '100%',
25 | marginTop: '2rem'
26 | // maxWidth: '500px'
27 | },
28 | typography: {
29 | // Enable typography v2: https://material-ui.com/style/typography/#migration-to-typography-v2
30 | useNextVariants: true,
31 | sub: {
32 | color: '#757575'
33 | },
34 | h3: {
35 | color: '#757575',
36 | fontWeight: 100,
37 | marginBottom: '3rem'
38 | },
39 | h5: {
40 | color: '#757575',
41 | fontWeight: 400,
42 | marginBottom: '2rem'
43 | }
44 | // h4: {
45 | // color: '#757575',
46 | // fontWeight: 100
47 | // }
48 | },
49 | flexColumnCenter: {
50 | display: 'flex',
51 | flexDirection: 'column',
52 | alignItems: 'center'
53 | },
54 | flexRow: {
55 | display: 'flex',
56 | flexDirection: 'row'
57 | },
58 | flexColumn: {
59 | display: 'flex',
60 | flexDirection: 'column'
61 | },
62 | flexRowCenter: {
63 | display: 'flex',
64 | flexDirection: 'row',
65 | justifyContent: 'center'
66 | },
67 | pageHeader: {
68 | color: 'rgba(0, 0, 0, 0.54)',
69 | fontSize: '2.25rem',
70 | alignSelf: 'flex-start',
71 | marginBottom: '2rem'
72 | },
73 | subHeader: {
74 | color: ' rgba(0, 0, 0, 0.54)',
75 | fontSize: '1.5rem',
76 | alignSelf: 'flex-start',
77 | marginTop: '2rem',
78 | marginBottom: '2rem'
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/utils/async.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Async await wrapper for easy error handling
3 | * @param {Promise} promise - Promise to wrap responses of
4 | * @return {Promise} Resolves and rejects with an array
5 | * @example
6 | * async function asyncFunctionWithThrow() {
7 | * const [err, snap] = await to(
8 | * admin.database().ref('some').once('value')
9 | * );
10 | * if (err) {
11 | * console.error('Error getting data:', err.message || err)
12 | * throw err
13 | * }
14 | * if (!snap.val()) throw new Error('Data not found');
15 | * console.log('Data found:', snap.val())
16 | * }
17 | */
18 | export function to(promise) {
19 | return promise.then((data) => [null, data]).catch((err) => [err])
20 | }
21 |
22 | /**
23 | * Run promises in a waterfall instead of all the same time (Promise.all)
24 | * @param {Array} callbacks - List of promises to run in order
25 | * @return {Promise} Resolves when all promises have completed in order
26 | */
27 | export function promiseWaterfall(callbacks) {
28 | return callbacks.reduce(
29 | (accumulator, callback) => accumulator.then(callback),
30 | Promise.resolve()
31 | )
32 | }
33 |
34 | export default { to, promiseWaterfall }
35 |
--------------------------------------------------------------------------------
/src/utils/components.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | export class ErrorBoundary extends React.Component {
5 | constructor(props) {
6 | super(props)
7 | this.state = { error: null, errorInfo: null }
8 | }
9 |
10 | componentDidCatch(error, errorInfo) {
11 | // Catch errors in any components below and re-render with error message
12 | this.setState({
13 | error: error,
14 | errorInfo: errorInfo
15 | })
16 | // You can also log error messages to an error reporting service here
17 | }
18 |
19 | render() {
20 | if (this.state.errorInfo) {
21 | if (this.props.errorComponent) {
22 | return React.cloneElement(this.props.errorComponent, { ...this.state })
23 | }
24 | // Error path
25 | return (
26 |
27 |
Something went wrong.
28 |
29 | {this.state.error && this.state.error.toString()}
30 |
31 | {this.state.errorInfo.componentStack}
32 |
33 |
34 | )
35 | }
36 | // Normally, just render children
37 | return this.props.children
38 | }
39 | }
40 |
41 | ErrorBoundary.propTypes = {
42 | children: PropTypes.element,
43 | errorComponent: PropTypes.element
44 | }
45 |
46 | export function withErrorBoundary(errorComponent) {
47 | return (WrappedComponent) => (props) => {
48 | return (
49 |
50 |
51 |
52 | )
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/utils/data.js:
--------------------------------------------------------------------------------
1 | import { get } from 'lodash'
2 |
3 | /**
4 | * Create a permission checking function based on projct and user
5 | * @param {Object} project - Project object
6 | * @param {Object} project.permissions - Project permissions object
7 | * @param {String} userUid - User's UID for permission check
8 | * @example Basic
9 | * const userHasPermission = createPermissionGetter(project, user.uid)
10 | * userHasPermission('update.roles') // true if user has role update permission
11 | */
12 | export function createPermissionGetter(project, userUid) {
13 | const userRole = get(project, `permissions.${userUid}.role`)
14 | /**
15 | * Check if user has permission
16 | * @param {String} permission - Permission string
17 | * @example Check For Permission
18 | * userHasPermission('update.roles') // true if user has role update permission
19 | */
20 | return function userHasPermission(permission) {
21 | return get(project, `roles.${userRole}.permissions.${permission}`)
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/utils/firebaseFunctions.js:
--------------------------------------------------------------------------------
1 | function waitForResponseWith(ref, pathForValue = 'completed', value) {
2 | return new Promise((resolve, reject) => {
3 | ref.on(
4 | 'value',
5 | (responseSnap) => {
6 | const response = responseSnap.val()
7 | if (response && response[pathForValue]) {
8 | if (value && response[pathForValue] !== value) {
9 | return
10 | }
11 | resolve(response)
12 | }
13 | },
14 | (err) => {
15 | console.error('Error waiting for response:', err.message || err) // eslint-disable-line no-console
16 | reject(err)
17 | }
18 | )
19 | })
20 | }
21 |
22 | function createWaitForValue(...args) {
23 | return (ref) => waitForResponseWith(ref, ...args)
24 | }
25 |
26 | export const waitForCompleted = createWaitForValue('completed', true)
27 |
--------------------------------------------------------------------------------
/src/utils/form.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Returns error message if value does not exist, otherwise returns
3 | * undefined
4 | * @param {String} value - Email to validate
5 | * @returns {String | undefined} Error message for missing required param
6 | * @example Required Field
7 | *
14 | */
15 | export function required(value) {
16 | return value ? undefined : 'Required'
17 | }
18 |
19 | /**
20 | * Returns error message if value is not a valid email, otherwise returns
21 | * undefined
22 | * @param {String} value - Email to validate
23 | * @returns {String | undefined} Error message for invalid email
24 | * @example Basic
25 | *
31 | */
32 | export function validateEmail(value) {
33 | return value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
34 | ? 'Invalid email address'
35 | : undefined
36 | }
37 |
--------------------------------------------------------------------------------
/src/utils/formatters.js:
--------------------------------------------------------------------------------
1 | import { isDate } from 'lodash'
2 | import { format } from 'date-fns'
3 |
4 | /**
5 | * Convert date string or object into date object
6 | * @param {firebase.firestore.Timestamp|Date|String} [dateValue=null] - Date value which to format
7 | * @return {Date} Formatted time
8 | */
9 | function getDateObject(dateValue = null) {
10 | if (dateValue && typeof dateValue.toDate === 'function') {
11 | return dateValue.toDate()
12 | }
13 | return isDate(dateValue) ? dateValue : new Date(dateValue)
14 | }
15 |
16 | /**
17 | * Format date to time with am/pm
18 | * @param {firebase.firestore.Timestamp|Date|String} dateValue - Date value which to format
19 | * @return {String} Formatted time
20 | */
21 | export function formatTime(dateValue) {
22 | return format(getDateObject(dateValue), 'h:mm:ss.SSS a')
23 | }
24 |
25 | /**
26 | * Format date string or object into date string with format 1/22/2018
27 | * @param {firebase.firestore.Timestamp|Date|String} dateValue - Date value which to format
28 | * @return {String} Formatted date
29 | */
30 | export function formatDate(dateValue) {
31 | return format(getDateObject(dateValue), 'MM/dd/yy')
32 | }
33 |
34 | /**
35 | * Format date string or object into date string with format
36 | * 1/22/2018 - 3:30:25.123 AM
37 | * @param {firebase.firestore.Timestamp|Date|String} dateValue - Date value which to format
38 | * @return {String} Formatted date
39 | */
40 | export function formatDateTime(dateValue) {
41 | return format(getDateObject(dateValue), 'MM/dd/yy - h:mm:ss.SSS a')
42 | }
43 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | import { initSegment } from './analytics'
2 | import { init as initErrorHandler } from './errorHandler'
3 |
4 | /**
5 | * Initialize global scripts including analytics and error handling
6 | */
7 | export function initScripts() {
8 | initErrorHandler()
9 | initSegment()
10 | }
11 |
12 | export function databaseURLToProjectName(databaseURL) {
13 | const strMatch = databaseURL?.match(/https:\/\/(.*)\.firebaseio\.com/)
14 | return strMatch && strMatch[1]
15 | }
16 |
--------------------------------------------------------------------------------
/storage.rules:
--------------------------------------------------------------------------------
1 | rules_version = '2';
2 | service firebase.storage {
3 | match /b/{bucket}/o {
4 | allow read: if false;
5 | match /serviceAccounts {
6 | match /{userId} {
7 | match /{allPaths=**} {
8 | allow write: if request.auth != null // Only authenticated users
9 | && request.auth.uid == userId // with UID matching parent folder name
10 | && request.resource.contentType.matches('application/json'); // Only json files
11 | }
12 | }
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------