SynchroniseTableView.tsx

import React from 'react'
import { useFetchData } from './useFetchData'
import {Fab, makeStyles } from '@material-ui/core'
import SaveIcon from '@material-ui/icons/Save'
import { createStyles, Theme } from '@material-ui/core/styles'
import {SynchroniseContainer} from "./SynchroniseContainer";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        fab: {
            position: 'fixed',
            bottom: theme.spacing(4),
            right: theme.spacing(4)
        },
        div: {
            justifyContent:"center",
            alignItems:"center",
            display:"flex",
            flexDirection:"row",
            width:"100%",
            minHeight:"100%",
            paddingTop:"100px",
        }
    })
)

export const SynchroniseTableView: React.FC = () => {
    const classes = useStyles()
    const [isLoading, content] = useFetchData()
    return (
        <div style={{minHeight:"100%", textAlign:"center"}}>
            {isLoading && <h4 style={{paddingTop:"300px"}}>loading...</h4>}
            {!isLoading && (
                <div className={classes.div}>
                    {/*Should be display in the same row, but css is not my strength */}
                   <SynchroniseContainer sports={content} text={["neue Sportarten","nicht übernehmen", "übernehmen"]} />
                    <SynchroniseContainer sports={content} text={["wiedererkannte Sportarten","nicht übernehmen", "übernehmen"]} />
                   <SynchroniseContainer sports={content} text={["archivierte Sportarten","nicht archivieren", "archivieren"]} />
                </div>
            )}
            {!isLoading && (
                <Fab className={classes.fab}>
                    <SaveIcon />
                </Fab>
            )}
        </div>
    )
}