• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• rocketredis-master
  • .github
    • workflows
      • tsc.yml
      • lint.yml
      • test.yml
      • build.yml
  • .eslintignore
  • src
    • App.tsx
    • utils
      • getValidationErrors.ts
      • windowBoundsController.ts
    • services
      • database
        • LoadKeysFromDatabase.ts
      • RedisConnection.ts
      • connection
        • UpdateConnectionService.ts
        • TestConnectionService.ts
        • CreateConnectionService.ts
        • DeleteConnectionService.ts
        • LoadConnectionDatabases.ts
      • key
        • LoadKeyContent.ts
    • hooks
      • useConfig.ts
      • useWindowSize.ts
    • screen
      • index.tsx
      • styles.ts
      • KeyList
        • index.tsx
        • styles.ts
        • SearchInput
          • index.tsx
          • styles.tsx
      • Header
        • index.tsx
        • styles.ts
      • KeyContent
        • index.tsx
        • styles.ts
      • ConnectionsList
        • index.tsx
        • Connection
          • index.tsx
          • styles.ts
        • styles.ts
        • ConnectionFormModal
          • index.tsx
          • styles.ts
        • DeleteConnectionModal
          • index.tsx
          • styles.ts
    • context
      • index.tsx
      • toast.tsx
    • components
      • Modal
        • index.tsx
        • styles.ts
      • ToastContainer
        • index.tsx
        • styles.ts
        • Toast
          • index.tsx
          • styles.ts
      • Form
        • Input
          • index.tsx
          • styles.ts
      • Button
        • index.tsx
        • styles.ts
      • EmptyContent
        • index.tsx
        • styles.ts
    • store
      • config.ts
      • connections.ts
    • global.d.ts
    • styles
      • GlobalStyle.ts
      • styled.d.ts
      • theme.ts
    • atoms
      • connections.ts
  • jest.config.js
  • i18n.ts
  • build
  • locales
    • en
      • translations.json
      • keyContent.json
      • connectionList.json
      • connectionForm.json
      • keyList.json
      • applicationMenu.json
      • deleteConnection.json
      • connection.json
  • .prettierrc
  • .eslintrc.json
  • LICENSE
  • commitlint.config.js
  • .npmrc
  • .editorconfig
  • babel.config.js
  • renovate.json
  • README.md
  • package.json
  • index.html
  • webpack
    • electron.webpack.js
    • react.webpack.js
  • tsconfig.json
  • .gitignore
  • electron
    • main.ts
  • docker-compose.yml

import React, { memo, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { FiPlusCircle } from 'react-icons/fi'
import { useToggle } from 'react-use'

import { ipcRenderer } from 'electron'
import { useRecoilState } from 'recoil'

import { connectionsState } from '../../atoms/connections'
import Connection from './Connection'
import ConnectionFormModal from './ConnectionFormModal'
import { Container, Connections } from './styles'

const ConnectionsList: React.FC = () => {
  const [connections] = useRecoilState(connectionsState)
  const [isCreateModalOpen, toggleCreateModalOpen] = useToggle(false)
  const { t } = useTranslation('connectionList')

  useEffect(() => {
    ipcRenderer.addListener('newConnection', toggleCreateModalOpen)

    return () => {
      ipcRenderer.removeListener('newConnection', toggleCreateModalOpen)
    }
  }, [toggleCreateModalOpen])

  return (
    <>
      <Container
        width={300}
        height={Infinity}
        minConstraints={[240, Infinity]}
        maxConstraints={[300, Infinity]}
        className="app-sidebar"
      >
        <Connections>
          <header>
            <strong>{t('title')}</strong>
            <button type="button" onClick={toggleCreateModalOpen}>
              <FiPlusCircle />
            </button>
          </header>

          <ul>
            {connections.map(connection => (
              <Connection key={connection.name} connection={connection} />
            ))}
          </ul>
        </Connections>
      </Container>

      <ConnectionFormModal
        visible={isCreateModalOpen}
        onRequestClose={toggleCreateModalOpen}
      />
    </>
  )
}

export default memo(ConnectionsList)