@material-ui/core/colors#blue JavaScript Examples

useStyles = makeStyles((theme) => ({
  appBar: {
    position: 'relative'
  },
  title: {
    marginLeft: theme.spacing(2),
    flex: 1
  },
  header: {
    padding: theme.spacing(5, 0, 6),
    color: '#fff'
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    backgroundColor: '#404040',
    color: '#fff'
  },
  avatar: {
    width: theme.spacing(4),
    height: theme.spacing(4),
    backgroundColor: blue[100],
    color: blue[600]
  }
}))

useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
  },
  rating: {
    display: "flex",
    alignItems: "center",
    color: grey[500],
    margin: theme.spacing(1),
    marginLeft: theme.spacing(0),
  },
  thumbBtn: {
    cursor: "pointer",
    marginRight: theme.spacing(0.5),
  },
  active: {
    color: blue[700],
  },
  small: { fontSize: 18 },
}))

colors = [
  {
    normal: blue[500],
    darkMode: blue[200],
  },
  {
    normal: indigo[500],
    darkMode: indigo[200],
  },
  {
    normal: pink[500],
    darkMode: pink[200],
  },
  {
    normal: purple[500],
    darkMode: purple[200],
  },
  {
    normal: lightGreen[500],
    darkMode: lightGreen[200],
  },
  {
    normal: teal[500],
    darkMode: teal[200],
  },
  {
    normal: orange[500],
    darkMode: orange[200],
  },
]

useStyles = makeStyles(theme => ({
    modal: {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    },
    paper: {
        backgroundColor: theme.palette.background.paper,
        border: "2px solid #000",
        boxShadow: theme.shadows[5],
        padding: theme.spacing(2, 4, 3),
    },
    blue: {
        color: theme.palette.getContrastText(blue[500]),
        backgroundColor: blue[500],
        boxShadow: theme.shadows[5],
    },
    shadow: {
        color: theme.palette.getContrastText(yellow[500]),
        boxShadow: theme.shadows[5],
        borderRadius: "50%",
    },
}))

useStyles = makeStyles((theme) => ({
  text: {
    fontWeight: 400,
    paddingTop: theme.spacing(0.5),
    paddingBottom: theme.spacing(0.5),
  },
  view_more: {
    color: blue[700],
    display: "inline-flex",
    cursor: "pointer",
  },
  root: {
    display: "flex",

    paddingTop: theme.spacing(1),
    paddingBottom: theme.spacing(1),
  },
  secondaryInfo: {
    paddingTop: theme.spacing(1),
    paddingBottom: theme.spacing(1),
  },
  info_1: {
    display: "flex",
    flexDirection: "column",
    width: "100%",
    paddingLeft: theme.spacing(1),
    paddingRight: theme.spacing(1),
  },
  info_2: {
    display: "flex",
    lineHeight: "80%",
  },
  channel: {
    fontWeight: 500,
  },
}))

Branding = {
	appName: "Amplify Identity Broker",

	primary: blueGrey[900], 					// #263238,
	secondary: blueGrey[300], 					// #90a4ae,
	accent: orange[500],						// #ff9800

	neutral: blueGrey[50], 						// #eceff1
	positive: green[700], 						// #689f38
	negative: red[700], 						// #d32f2f
	info: blue[700],							// #1976d2
	warning: orange[700],						// #f57c00

	cardHeaderColorPrimary: blueGrey[100],		// #cfd8dc
	cardHeaderColorAccent: orange[500],			// #ff9800

	white: '#fff',								// #fff
	black: '#000',								// #000

	opacityHover: 0.85,
}

muiTheme = createMuiTheme({
  zIndex: {
    modal: 8000,
    tooltip: 8050
  },
  palette: {
    primary: { ...red, main: red[700] },
    secondary: blue
  }
})

categoryData = [
    {
        text: "Homework",
        id: 1,
        color: pink,
    },
    {
        text: "Work",
        id: 2,
        color: deepPurple,
    },
    {
        text: "Household",
        id: 3,
        color: blue,
    },
    {
        text: "Personal",
        id: 4,
        color: green,
    },
]

useStyles = makeStyles(theme => ({
    blue: {
        color: theme.palette.getContrastText(blue[500]),
        backgroundColor: blue[500],
        boxShadow: theme.shadows[5],
        marginLeft: "10vw",
    },
}))

ThemeOcean = {
    palette: {
        type: 'light',
        // Essential
        primary: blue,
        secondary: teal,
        error: red,
        // Optional
        sample: {
            // light: will be calculated from palette.sample,
            main: blue[500],
            // dark: will be calculated from palette.sample,
            // contrastText: will be calculated to contrast with palette.sample
        },
    },
    colors: {
        // Base colors
        colorLight: '#ffffff',
        colorDark: grey[800],
        // Content
        contentBackground: '#ffffff',
        contentText: grey[800],
        // AppBar
        appBarContentText: '#ffffff',
        // Drawer menu
        drawerMenuCategoryText: grey[500],
        drawerMenuSelectedBackground: grey[300],
        drawerMenuSelectedPin: blue[500],
        // Progress
        progress: blue[500],
        // Color set for StickyBoard components (e.g., charts, number...)
        colorArray: [
            blue[500],
            cyan[500],
            indigo[500],
            lightBlue[500],
            blue[600],
            cyan[600],
            indigo[600],
            lightBlue[600],
            blue[700],
            cyan[700],
            indigo[700],
        ],
    },
    overrides: {
        MuiAppBar: {
            colorPrimary: {
                backgroundColor: blue[500],    // AppBar background color
                color: '#ffffff',
            },
        },
        MuiDrawer: {
            paper: {
                backgroundColor: grey[100],     // Drawer background color
            }
        },
        MuiIconButton: {
            root: {
                color: '#ffffff',
            }
        },
        MuiFab: {
            primary: {
                backgroundColor: blue[500],
                color: '#ffffff',
                '&:hover': {
                    backgroundColor: blue[700],
                }
            }
        },
        MuiSpeedDialAction:{
            fab: {
                backgroundColor: grey[50],
                color: grey[800],
            }
        },
    },
}

ThemeLight = {
    palette: {
        type: 'light',
        // Essential
        primary: amber,
        secondary: orange,
        error: red,
        // Optional
        sample: {
            // light: will be calculated from palette.sample,
            main: amber[500],
            // dark: will be calculated from palette.sample,
            // contrastText: will be calculated to contrast with palette.sample
        },
    },
    colors: {
        // Base colors
        colorLight: '#ffffff',
        colorDark: grey[800],
        // Content
        contentBackground: '#ffffff',
        contentText: grey[800],
        // AppBar
        appBarContentText: grey[800],
        // Drawer menu
        drawerMenuCategoryText: grey[500],
        drawerMenuSelectedBackground: grey[300],
        drawerMenuSelectedPin: amber[500],
        // Progress
        progress: amber[500],
        // Color set for StickyBoard components (e.g., charts, number...)
        colorArray: [
            red[500],
            cyan[500],
            amber[500],
            teal[500],
            lightBlue[500],
            green[500],
            blue[500],
            indigo[500],
            orange[500],
            yellow[500],
            deepPurple[500],
        ],
    },
    overrides: {
        MuiAppBar: {
            colorPrimary: {
                backgroundColor: grey[50],      // AppBar background color
                color: grey[800],
            },
        },
        MuiDrawer: {
            paper: {
                backgroundColor: grey[100],     // Drawer background color
            }
        },
        MuiIconButton: {
            root: {
                color: grey[800],
            }
        },
        MuiFab: {
            primary: {
                backgroundColor: amber[500],
                color: grey[800],
                '&:hover': {
                    backgroundColor: amber[700],
                }
            }
        },
        MuiSpeedDialAction:{
            fab: {
                backgroundColor: grey[50],
                color: grey[800],
            }
        },
    },
}

useStyles = makeStyles((theme) => ({
  signButton: {
    color: blue[800],
    borderColor: blue[800],
    borderRadius: "3px",
  },
}))

ThemePicker = props => {
    const classes = useStyles();

    const handleThemeClick = (themeColour, cost) => {
        // @params themeColour and cost

        switch (themeColour) {
            case "blue":
                props.changeTheme(Themes.DARK);
                break;
            case "green":
                props.changeTheme(Themes.LIGHT);
                break;

            case "gray":
                break;
            case "magenta":
                break;
            case "purple":
                break;
            case "crimson":
                break;
            case "black":
                break;
            case "red":
                break;
            case "darkSeaGreen":
                break;
            case "antiqueWhite":
                break;
            case "darkKhaki":
                break;
            case "darkSlateBlue":
                break;
            default:
                break;
        }
    };

    return (
        <div>
            <h2 style={{ marginLeft: "10vw", marginTop: "4vh", textAlign: "left" }}>Available Points: </h2>
            <Points avatarClass={classes.blue} value={props.userPoints} />
            <br></br>
            <div className="flex">
                <h2 style={{ marginLeft: "10vw", marginTop: "4vh", textAlign: "left" }}>Theme:</h2>

                <MarketPlace
                    handleThemeClick={handleThemeClick}
                    buyItem={props.onBuyItem}
                    unlockedItems={props.unlockedItems}
                ></MarketPlace>
            </div>
        </div>
    );
}

App = () => {
  const theme = createMuiTheme({
    palette: {
      type: 'dark',
      primary: blue,
      secondary: blue,
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <ContentContextProvider>
        <ContentFirebaseProvider>
          <ContentHooksProvider>
            <Router>
              <Header>
                <Container>
                  <Switch>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/context-api" component={ContextAPI} />
                    <Route
                      exact
                      path="/validation-firebase-web"
                      component={ValidationReactFirebase}
                    />
                    <Route
                      exact
                      path="/react-state-hooks"
                      component={ReactStateHooks}
                    />
                    <Route
                      exact
                      path="/design-resources"
                      component={DesignResources}
                    />
                    <Route exact path="/about" component={About} />
                  </Switch>
                </Container>
              </Header>
            </Router>
          </ContentHooksProvider>
        </ContentFirebaseProvider>
      </ContentContextProvider>
    </ThemeProvider>
  );
}

useStyles = makeStyles((theme) => ({
  root: {
    flex: "0 1 100%",
    padding: "10px",
    textAlign: "left",
    display: "flex",
    [theme.breakpoints.up("sm")]: {
      flex: "0 1 50%",
    },
    [theme.breakpoints.up("md")]: {
      flex: "0 1 33.33%",
    },
  },
  card: {
    width: "100%",
    display: "flex",
    flexFlow: "column",
    position: "relative",
    paddingBottom: "47px",
  },
  title: {
    fontSize: 14,
    whiteSpace: "pre-wrap",
  },
  contentRoot: {
    paddingTop: 0,
  },
  content: {
    whiteSpace: "pre-wrap",
  },
  hashLinks: {
    color: "#007bff",
  },
  actions: {
    display: "flex",
    justifyContent: "space-between",
    borderTop: `1px solid ${theme.palette.grey["300"]}`,
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
  },
  avatar: {
    backgroundColor: blue[500],
  },
}))

makePalette = type => {
  const { contrastText, ...rest } = themePalette[type];
  return {
    ...rest,
    contrastText,
    contrastThreshold: 2,
    border: '#DFE3E8',
    divider: '#DFE3E8',
    common: {
      black,
      white,
      contrastText,
      commonBackground: 'rgb(45, 45, 45)',
      neutral: '#E4E7EB',
      muted: '#9EA0A4'
    },
    primary: {
      light: lightBlue[300],
      main: lightBlue[500],
      dark: lightBlue[700],
      contrastText
    },
    success: {
      light: green[300],
      main: green[500],
      dark: green[700],
      contrastText
    },
    info: {
      light: blue[300],
      main: blue[500],
      dark: blue[700],
      contrastText
    },
    warning: {
      light: yellow[300],
      main: yellow[500],
      dark: yellow[700],
      contrastText
    },
    danger: {
      light: red[300],
      main: red[500],
      dark: red[700],
      contrastText
    }
  };
}

Calendar = () => {
    var streakRef = React.createRef();

    const classes = useStyles();
    const [listView, setListView] = useState();
    const [isOpenScore, setIsOpenScore] = useState(false);
    const [tasks, setTasks] = useState([]);
    const [open, setOpen] = useState(false);
    const [statsOpen, setStatsOpen] = useState(false);
    const [theme, setTheme] = useContext(ThemeContext);
    const [priorityStats, setPriorityStats] = useState([]);
    const [userPoints, setUserPoints] = useState(0);
    const { activeHoursStart, activeHoursEnd } = useContext(ActiveHoursContext);
    const [startTime, setStartTime] = activeHoursStart;
    const [endTime, setEndTime] = activeHoursEnd;

    const handleIsScoreOpen = () => {
        if (isOpenScore) {
            setIsOpenScore(false);
        } else {
            setIsOpenScore(true);
        }
    };

    const handleOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    const handleStatsOpen = () => {
        if (statsOpen) {
            setStatsOpen(false);
        } else {
            var medTasks = tasks.filter(function(task) {
                return task.priority === 20 && task.isComplete;
            });
            var lowTasks = tasks.filter(function(task) {
                return task.priority === 30 && task.isComplete;
            });
            var highTasks = tasks.filter(function(task) {
                return task.priority === 10 && task.isComplete;
            });
            setPriorityStats([highTasks.length, medTasks.length, lowTasks.length]);
            setStatsOpen(true);
        }
    };

    useEffect(() => {
        const fetchTasks = async () => {
            const tasks = await DotoService.getTasks();
            setTasks(tasks);
        };
        const fetchUserInfo = async () => {
            const userInfo = await DotoService.getUserInfo();
            setTheme(userInfo.themePreference);
            setUserPoints(userInfo.points);
            setStartTime(userInfo.startTime);
            setEndTime(userInfo.endTime);
        };
        fetchUserInfo();
        fetchTasks();
    }, [setTheme, setStartTime, setEndTime]);

    // Adds new task based on input fields from Modal
    const addNewTask = async newTask => {
        const { newTaskOrder, updatedTask } = addTaskToSchedule(newTask, tasks, new Date(startTime), new Date(endTime));
        newTask.taskId = uuidv4();
        newTask.id = newTask.taskId;
        setTasks(newTaskOrder);
        handleClose();
        await DotoService.setNewTask(updatedTask);
    };

    const deleteTask = async taskId => {
        const taskList = [...tasks];
        const index = taskList.findIndex(task => task.taskId === taskId);
        taskList.splice(index, 1);
        setTasks(taskList);

        await DotoService.deleteTask(taskId);
    };

    const changePoints = change => {
        DotoService.updateUserInfo({ points: userPoints + change });
        setUserPoints(userPoints + change);
    };

    const handleTaskStatusUpdated = taskId => {
        const newTasks = [...tasks];
        const taskToUpdate = newTasks.find(task => task.taskId === taskId);

        // update points
        // if duration is passed in, use that, otherwise calculate it from start and end dates
        const minutes = taskToUpdate.duration
            ? taskToUpdate.duration
            : Math.abs(taskToUpdate.startDate - taskToUpdate.endDate) / 1000 / 60;
        // if task is completed, increase points, otherwise, decrease points
        taskToUpdate.isComplete ? changePoints(-minutes) : changePoints(minutes);

        // update task
        taskToUpdate.isComplete = !taskToUpdate.isComplete;
        DotoService.updateTask(taskToUpdate);
        setTasks(newTasks);

        // update streak
        streakRef.current.updateStreak();
    };

    const handleTaskUpdated = async task => {
        const taskList = [...tasks];
        const index = taskList.findIndex(currentTask => currentTask.taskId === task.taskId);
        taskList.splice(index, 1);
        const { newTaskOrder, updatedTask } = addTaskToSchedule(task, taskList, new Date(startTime), new Date(endTime));
        setTasks(newTaskOrder);
        await DotoService.deleteTask(task.taskId);
        await DotoService.setNewTask(updatedTask);
        document.getElementById("grid").click(); // Debt: force close tool tip due to state not being updated
    };

    const onCommitChanges = ({ added, changed, deleted }) => {
        // Currently adding and deleting are both no-ops
        // TODO - consider refactoring adding and deleting to use built-in components and pass logic through here
        if (changed) {
            const updatedTasks = tasks.map(task => {
                if (changed[task.id]) {
                    const { startDate: newStartDate } = changed[task.id];
                    const { reminderDate, startDate: oldStartDate } = task;
                    if (newStartDate && reminderDate) {
                        // Offset the reminder date by the difference of the start dates
                        task.reminderDate = new Date(reminderDate.getTime() + (newStartDate - oldStartDate));
                    }
                    const updatedTask = { ...task, ...changed[task.id] };
                    updatedTask.duration = Math.ceil((updatedTask.endDate - updatedTask.startDate) / 60000);
                    DotoService.updateTask(updatedTask);
                    return updatedTask;
                }
                return task;
            });
            updatedTasks.sort((a, b) => a.startDate - b.startDate);
            setTasks(updatedTasks);
        }
    };

    return (
        <div className="page-layout">
            <div
                className={classnames(
                    "left-side-bar",
                    theme === Themes.DARK ? "left-side-bg-blue" : "left-side-bg-green",
                )}
            />
            <div className="calendar-buttons">
                <div className="mb-3">
                    <Tooltip title="Add Task">
                        <Fab onClick={handleOpen} size="small">
                            <AddIcon />
                        </Fab>
                    </Tooltip>
                </div>
                <div className="mb-3">
                    <Tooltip title="List View">
                        <Fab onClick={() => setListView(!listView)} size="small">
                            {listView ? <CalendarTodayIcon /> : <FormatListBulletedIcon />}
                        </Fab>
                    </Tooltip>
                </div>
                <div className="mb-3">
                    <Tooltip title="View Your Stats">
                        <Fab onClick={handleStatsOpen} size="small">
                            <PieChartIcon />
                        </Fab>
                    </Tooltip>
                </div>
                <div className="mb-3">
                    <Tooltip title="Productivity Score View">
                        <Fab onClick={handleIsScoreOpen} size="small">
                            <ScoreIcon />
                        </Fab>
                    </Tooltip>
                </div>
                <div>
                    <h2>Points</h2>
                    <Points avatarClass={classes.blue} value={userPoints} />
                </div>
                <div>
                    <Streak tasks={[...tasks]} ref={streakRef} />
                </div>
            </div>
            <span className="content-container">
                <Header title="Calendar" />
                <div className="flex">
                    <div className="calendar-component">
                        <CalendarComponent
                            tasks={tasks}
                            onTaskDeleted={deleteTask}
                            onTaskStatusUpdated={handleTaskStatusUpdated}
                            onTaskUpdated={handleTaskUpdated}
                            onCommitChanges={onCommitChanges}
                        />
                    </div>
                    {listView && <CalendarListView tasks={tasks} onTaskStatusUpdated={handleTaskStatusUpdated} />}
                </div>
                <Modal
                    aria-labelledby="transition-modal-title"
                    aria-describedby="transition-modal-description"
                    className={classes.modal}
                    open={open}
                    onClose={handleClose}
                    closeAfterTransition
                    BackdropComponent={Backdrop}
                    BackdropProps={{
                        timeout: 500,
                    }}
                >
                    {/* Transition effects for list view of to-do tasks for today */}
                    <Fade in={open}>
                        <div className={classes.paper}>
                            <ModalContent addNewTask={addNewTask} modalBackground={theme} />
                        </div>
                    </Fade>
                </Modal>
                <Modal
                    aria-labelledby="stats-modal"
                    aria-describedby="transition-modal-description"
                    className={classes.modal}
                    open={statsOpen}
                    onClose={handleStatsOpen}
                    closeAfterTransition
                    BackdropComponent={Backdrop}
                    BackdropProps={{
                        timeout: 500,
                    }}
                >
                    <Fade in={statsOpen}>
                        <div className={classes.paper}>
                            <UserStats
                                modalBackground={theme}
                                // TODO: get real values for these.
                                hoursWorked="10.5"
                                dayRecord="4"
                                priorityStats={priorityStats}
                            />
                        </div>
                    </Fade>
                </Modal>
                <Modal
                    aria-labelledby="transition-modal-title"
                    aria-describedby="transition-modal-description"
                    className={classes.modal}
                    open={isOpenScore}
                    onClose={handleIsScoreOpen}
                    closeAfterTransition
                    BackdropComponent={Backdrop}
                    BackdropProps={{
                        timeout: 500,
                    }}
                >
                    {/* Transition effects for list view of to-do tasks for today */}
                    <Fade in={isOpenScore}>
                        <div className={classes.paper}>
                            <ProductivityScore />
                        </div>
                    </Fade>
                </Modal>
            </span>
        </div>
    );
}

ThemeDark = {
    palette: {
        type: 'dark',
        // Essential
        primary: grey,
        secondary: blueGrey,
        error: red,
        // Optional
        sample: {
            // light: will be calculated from palette.sample,
            main: amber[500],
            // dark: will be calculated from palette.sample,
            // contrastText: will be calculated to contrast with palette.sample
        },
    },
    colors: {
        // Base colors
        colorLight: '#ffffff',
        colorDark: grey[800],
        // Content
        contentBackground: grey[600],
        contentText: '#ffffff',
        // AppBar
        appBarContentText: '#ffffff',
        // Drawer menu
        drawerMenuCategoryText: grey[400],
        drawerMenuSelectedBackground: grey[600],
        drawerMenuSelectedPin: amber[500],
        // Speed dial
        speedDialColor: amber[500],
        // Progress
        progress: amber[500],
        // Color set for StickyBoard components (e.g., charts, number...)
        colorArray: [
            red[500],
            cyan[500],
            amber[500],
            teal[500],
            yellow[500],
            green[500],
            blue[500],
            indigo[500],
            orange[500],
            deepPurple[500],
            lightBlue[500],
        ],
    },
    overrides: {
        MuiAppBar: {
            colorPrimary: {
                backgroundColor: grey[800],      // AppBar background color
                color: '#ffffff',
            },
        },
        MuiDrawer: {
            paper: {
                backgroundColor: grey[700],     // Drawer background color
            }
        },
        MuiIconButton: {
            root: {
                color: '#ffffff',
            }
        },
        MuiFab: {
            primary: {
                backgroundColor: amber[500],
                color: grey[800],
                '&:hover': {
                    backgroundColor: amber[700],
                }
            }
        },
        MuiSpeedDialAction:{
            fab: {
                backgroundColor: grey[800],
                color: '#ffffff',
            }
        }
    },
}

export default function PostCard({
  size,
  author,
  text,
  isApproved,
  flagCount,
  postID,
  likes,
  dummyLikes,
  time,
  tags,
  flags,
  img,
  allTags,
  updateCache,
  id,
  location,
  clickable,
}) {
  const classes = useStyles();
  const { isLoading, user, isAuthenticated } = useAuth0();

  const [expanded, setExpanded] = useState(false);
  const [liked, setLiked] = useState(false);
  const [flagged, setFlagged] = useState(false);
  const [numlikes, setnumlikes] = useState(0);
  const [postText, setPostText] = useState(text);
  const [postTags, setPostTags] = useState(null);
  const [open, setOpen] = useState(false);
  const [editText, setText] = useState(text);
  const [editTags, setTags] = useState(null);

  const [deletePost] = useMutation(DELETE_POST, { update: updateCache });
  const [approvePost] = useMutation(APPROVE_POST, { update: updateCache });
  const [likePost] = useMutation(LIKE_POST);
  const [unlikePost] = useMutation(UNLIKE_POST);
  const [flagPost] = useMutation(FLAG_POST);
  const [unflagPost] = useMutation(UNFLAG_POST);
  const [editPost] = useMutation(EDIT_POST);
  const [dummyLike] = useMutation(ADD_DUMMY_LIKE);

  const handleLike = () => {
    if (!isAuthenticated) {
      console.log('Like by dummy user..', liked, isLoading, isAuthenticated, user);
      if (!liked) {
        dummyLike({
          variables: {
            postId: postID,
          },
        });
        setLiked(true);
        setnumlikes(numlikes + 1);
      } else {
        setLiked(false);
        setnumlikes(numlikes - 1);
      }
      return;
    }
    if (liked) {
      console.log('Unliking post...', postID);
      unlikePost({
        variables: {
          input: postID,
          likes: [{ username: user.email }],
        },
      });
      setLiked(false);
      setnumlikes(numlikes - 1);
    } else {
      console.log('Liking post...', postID);
      likePost({
        variables: {
          input: postID,
          likes: [{ username: user.email }],
        },
      });
      setLiked(true);
      setnumlikes(numlikes + 1);
    }
  };

  const handleFlag = () => {
    if (!isAuthenticated) {
      alert('Login to Flag the post');
      return;
    }
    if (flagged) {
      console.log('Unflagging post...', postID);
      unflagPost({
        variables: {
          input: postID,
          flags: [{ username: user.email }],
          flagCnt: flagCount - 1,
        },
      });
      setFlagged(false);
    } else {
      console.log('flagging post...', postID);
      flagPost({
        variables: {
          input: postID,
          flags: [{ username: user.email }],
          flagCnt: flagCount + 1,
        },
      });
      setFlagged(true);
    }
  };

  const handleApprove = () => {
    console.log('Approving post...', postText, author);
    var flagList = [];
    flags.forEach((element) => {
      flagList.push({ username: element['username'] });
    });
    approvePost({
      variables: {
        input: postID,
        flagArray: flagList,
      },
    });
  };

  const handleReject = () => {
    console.log('Rejecting post...', postText, author);
    const delPost = {
      id: [postID],
    };
    deletePost({
      variables: {
        input: delPost,
      },
    });
  };

  const handleEdit = async (newText, newTags) => {
    console.log('editing post...', postID, newTags, postTags);
    var removeTags = postTags.filter((x) => !newTags.includes(x));
    var addTags = newTags.filter((x) => !postTags.includes(x));

    var ptags = a2gTags(removeTags);
    var ntags = a2gTags(addTags);
    await editPost({
      variables: {
        input: postID,
        ptags: ptags,
        ntags: ntags,
        text: newText,
      },
    });
    setPostText(newText);
    setPostTags(newTags);
  };

  // set likes
  useEffect(() => {
    var totalLikes = 0
    if (likes){

      if (isLoading || !user){
        //
      } else {
        likes.forEach((item) => {
          if (item['username'] === user.email) {
            setLiked(true);
          }
        });
      }
      totalLikes += likes.length
    }
    if(dummyLikes)
      totalLikes += dummyLikes.length
    setnumlikes(totalLikes)
  }, [user,likes, isLoading, isAuthenticated, dummyLikes]);

  // set flags
  useEffect(() => {
    if (!flags || isLoading || !user) return;
    flags.forEach((item) => {
      if (item['username'] === user.email) {
        setFlagged(true);
      }
    });
  }, [isAuthenticated, user, isLoading, flags]);

  // set Tags
  useEffect(() => {
    const formatted_tags = g2aTags(tags);
    setPostTags(formatted_tags);
    setTags(formatted_tags);
  }, [tags]);

  if (isLoading) {
    return <Loading />;
  }

  return (
    <>
      <MetaTags>
        <meta name="og:description" content="DevJoke Application" />
        <meta property="og:title" content="DevJoke" />
        <meta property="og:image" content={img} />
        <meta
          property="og:url"
          content={'https://' + window.location.host + '/post/' + postID}
        />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:image" content={img} />
        <meta name="twitter:title" content="DevJoke" />
        <meta name="twitter:description" content="DevJoke Application" />
      </MetaTags>
      <div className={'card'} style={{ borderRadius: '10px' }}>
        {clickable ? (
          <Link
            to={{
              pathname: `/post/${id}`,
              state: { background: location },
            }}
          >
            <img
              src={img}
              className="pic"
              alt={'preview'}
              width={'100%'}
              height={'auto'}
              style={{
                borderRadius: '10px',
              }}
            />
          </Link>
        ) : (
          <img
            src={img}
            className="pic"
            alt={'preview'}
            width={'100%'}
            height={'auto'}
            style={{
              borderRadius: '10px',
            }}
          />
        )}
        <CardActions disableSpacing style={{ padding: '0' }}>
          {isApproved ? (
            <>
              <IconButton
                aria-label="add to favorites"
                style={{
                  color: liked === true ? red[500] : grey[500],
                  paddingRight: '4px',
                }}
                onClick={handleLike}
                selected={liked}
              >
                <FavoriteIcon fontSize="small" />
              </IconButton>
              <Typography
                variant="button"
                style={{
                  color: liked ? red[500] : grey[500],
                  font: '15px arial',
                }}
                className={classes.likeCount}
                color="primary"
                component="p"
              >
                {numlikes}
              </Typography>
              <FacebookShareButton
                className={classes.share}
                style={{ color: blue[500] }}
                url={img}
                quote={'Do checkout this nice joke!! #DevJoke'}
                hashtag={'DevJoke'}
              >
                <FacebookIcon fontSize="small" />
              </FacebookShareButton>
            </>
          ) : (
            <>
              <IconButton aria-label="approve" onClick={handleApprove}>
                <CheckCircleIcon htmlColor="green" />
              </IconButton>
              <IconButton aria-label="reject" onClick={handleReject}>
                <CancelIcon htmlColor="red" />
              </IconButton>
              <IconButton
                aria-label="edit"
                onClick={() => {
                  setOpen(true);
                }}
              >
                <EditIcon htmlColor="blue" />
              </IconButton>
              <TransitionModal
                open={open}
                setOpen={setOpen}
                text={editText}
                setText={setText}
                tags={editTags}
                setTags={setTags}
                postText={postText}
                setPostText={setPostText}
                postTags={postTags}
                setPostTags={setPostTags}
                allTags={allTags}
                handleEdit={handleEdit}
              />
            </>
          )}
          <IconButton
            className={clsx(classes.expand, {
              [classes.expandOpen]: expanded,
            })}
            onClick={() => setExpanded(!expanded)}
            aria-expanded={expanded}
            aria-label="show more"
          >
            <ExpandMoreIcon />
          </IconButton>
        </CardActions>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <div>
            {DateTimeFormat(time, 'mmm dS, h:MM')}
            <IconButton
              aria-label="flag"
              className={classes.flag}
              value="check"
              style={{ color: flagged ? red[500] : grey[500] }}
              onClick={handleFlag}
              selected={flagged}
            >
              <FlagSharpIcon fontSize="small" />
            </IconButton>
          </div>

          {isApproved ? (
            <></>
          ) : (
            <Typography variant="body2" color="textSecondary" backcomponent="p">
              {postText}
            </Typography>
          )}

          <TagList tags={postTags} />
        </Collapse>
      </div>
    </>
  );
}