text: import React, { useEffect, useState } from 'react'
  import PropTypes from 'prop-types'
  import { Button } from 'react-bootstrap'
  import Link from 'next/link'
  import AdminNavbar from '../../../components/common/AdminNavbar/index'
  import withPrivateRoute from '../../../components/utils/withPrivateRoute'
  import baseUrl from '../../../shared/baseUrl'
  import Loading from '../../../components/common/Loading'
  import Error from '../../../components/common/Error'
  import GroupListItem from '../../../components/manage/groups/groupListItem'
  
  function ManageGroups (props) {
    const { isLoggedIn, user } = props
    const { access_token: accessToken, isAdmin } = user
    const [groups, setGroups] = useState([])
    const [error, setError] = useState('')
    const [isLoading, setIsLoading] = useState(false)
  
    useEffect(() => {
      setIsLoading(true)
      const reqHeaders = new Headers()
      reqHeaders.append('access_token', accessToken)
      const requestOptions = {
        method: 'GET',
        headers: reqHeaders
      }
      fetch(`${baseUrl}/groups/moderator_groups`, requestOptions)
        .then((res) => res.json())
        .then((res) => {
          const { success, error, results } = res
          if (success) {
            setError('')
            setGroups(results)
          } else {
            setGroups([])
            setError(error.sqlMessage || error)
          }
          setIsLoading(false)
        })
        .catch((error) => {
          setError(error.message)
          setIsLoading(false)
          setGroups([])
        })
    }, [])
  
    return (
      <div style={{ backgroundColor: '#f5f5f5', minHeight: '90vh' }}>
        <AdminNavbar
          user={user}
          isLoggedIn={isLoggedIn}
          activeNav="groups"
        />
        <div className="container mt-3">
          {
            isAdmin && <div className="text-center">
              <Link href="/manage/groups/create">
                <Button variant="success">
                  <i className="fa fa-plus-circle" />
                &nbsp; Create a new group
                </Button>
              </Link>
            </div>
          }
          <br />
          {isLoading && <Loading />}
          {!isLoading && error && <Error message={error}></Error>}
          {groups.map(
            ({ id, creator, group_name: groupName, member_count: memberCount, confidential }) => {
              return (
                <GroupListItem
                  key={id.toString()}
                  id={id}
                  groupName={groupName}
                  memberCount={memberCount}
                  confidential={confidential}
                  creator={creator}
                  isModerator
                />
              )
            }
          )}
          {
            !isLoading && !error && !groups.length &&
            <div className="text-center">
              <p>You are not a moderator of any group</p>
            </div>
          }
          <br/>
        </div>
      </div>
    )
  }
  
  ManageGroups.propTypes = {
    isLoggedIn: PropTypes.bool,
    user: PropTypes.shape({
      username: PropTypes.string,
      access_token: PropTypes.string,
      isAdmin: PropTypes.number
    })
  }
  
  export default withPrivateRoute(ManageGroups)
  