@chakra-ui/react#DrawerBody JavaScript Examples

The following examples show how to use @chakra-ui/react#DrawerBody. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ConferenceCard.js    From codeursenseine.com with MIT License 4 votes vote down vote up
ConferenceCard = ({ conference, speakers }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  const capitalizeFirstLetter = (string) =>
    string.charAt(0).toUpperCase() + string.slice(1);

  if (conference?.childMdx?.frontmatter?.type === "break") {
    return (
      <Card variant="primary" mt={2}>
        <Stack align="center">
          <Text>{conference?.childMdx?.frontmatter?.title}</Text>
        </Stack>
      </Card>
    );
  }

  return (
    <Stack>
      <Grid
        templateColumns={["repeat(1, 1fr)", "repeat(1, 1fr) repeat(1, 4fr)"]}
        mt={3}
      >
        <Stack mr={3}>
          <Flex
            display={["none", "flex"]}
            flexDirection="column"
            justifyContent="space-between"
            h="100%"
            borderColor="blue.50"
            borderStyle="solid"
            borderTopWidth={1}
            borderBottomWidth={1}
          >
            <Text color="blue.600">
              {conference.childMdx.frontmatter.startHour}
            </Text>

            <Text color="blue.600">
              {conference.childMdx.frontmatter.endHour}
            </Text>
          </Flex>
          <Stack display={["block", "none"]} mb={2}>
            <Text color="blue.600">
              {`${conference.childMdx.frontmatter.startHour} - ${conference.childMdx.frontmatter.endHour}`}
            </Text>
          </Stack>
          {conference.childMdx.frontmatter.isKeynote && (
            <Badge colorScheme="brand" width="fit-content">
              Keynote
            </Badge>
          )}
        </Stack>
        <Card
          borderLeftWidth={2}
          borderLeftColor="brand.600"
          onClick={onOpen}
          w="full"
          isLink
        >
          <Heading fontSize="md">
            {conference.childMdx.frontmatter.title}
          </Heading>

          {speakers?.map((speaker) => (
            <SpeakerPreview
              key={speaker.childMdx.frontmatter.slug}
              speaker={speaker}
            />
          ))}

          <Center>
            <Button
              colorScheme="brand"
              variant="link"
              width="fit-content"
              mt={2}
            >
              Voir les détails et s'inscrire
            </Button>
          </Center>
        </Card>
      </Grid>

      <Drawer size="md" isOpen={isOpen} placement="right" onClose={onClose}>
        <DrawerOverlay>
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader>
              <Stack alignItems="center" display="flex" flexDirection="row">
                <Text fontSize="sm" mt={2}>
                  {capitalizeFirstLetter(
                    dayjs(conference.childMdx.frontmatter.eventDate).format(
                      "dddd D MMM"
                    )
                  )}{" "}
                  {`${conference.childMdx.frontmatter.startHour} - ${conference.childMdx.frontmatter.endHour}`}
                </Text>
                {conference.childMdx.frontmatter.isKeynote && (
                  <Badge
                    ml={3}
                    h="fit-content"
                    colorScheme="brand"
                    width="fit-content"
                  >
                    Keynote
                  </Badge>
                )}
              </Stack>
              <Text>{conference.childMdx.frontmatter.title}</Text>

              <Stack mt={3}>
                {speakers?.map((speaker) => (
                  <SpeakerPreview
                    key={speaker.childMdx.frontmatter.slug}
                    speaker={speaker}
                  />
                ))}
              </Stack>
            </DrawerHeader>

            <DrawerBody overflow="auto">
              <MDXRenderer>{conference.childMdx.body}</MDXRenderer>
            </DrawerBody>

            {conference.childMdx.frontmatter.meetupLink && (
              <DrawerFooter display="flex" flexDirection="column">
                <Button isFullWidth variant="outline" mb={3} onClick={onClose}>
                  Fermer
                </Button>
                <Button
                  colorScheme="brand"
                  as={Link}
                  target="_blank"
                  to={conference.childMdx.frontmatter.meetupLink}
                  isFullWidth
                >
                  S'inscrire
                </Button>
              </DrawerFooter>
            )}
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    </Stack>
  );
}
Example #2
Source File: rent.js    From idena-web with MIT License 4 votes vote down vote up
function ProviderInfoDrawer({p, identity, onClose, onSubmit, ...props}) {
  const {t} = useTranslation()
  return (
    <Drawer placement="right" size="full" {...props}>
      <DrawerOverlay />
      <DrawerContent>
        <DrawerHeader>
          <AngleArrowBackIcon
            stroke="#578FFF"
            position="absolute"
            left={4}
            top={4}
            onClick={onClose}
          />
          <Flex
            direction="column"
            textAlign="center"
            fontWeight="normal"
            align="center"
            mt="2px"
          >
            <Text fontSize="base" fontWeight="bold" color="gray.500">
              {p.data.url}
            </Text>
            <ProviderStatusLabel
              status={p.status}
              blocksLeft={p.blocksLeft}
              fontSize="mdx"
            />
          </Flex>
        </DrawerHeader>
        <DrawerBody pt={0} px={8}>
          <ProviderInfoRow title="Node URL">
            <Text color="brandBlue.500">{p.data.url}</Text>
          </ProviderInfoRow>
          <ProviderInfoRow display="none" title="Website">
            <Text color="brandBlue.500">FILL_WEBSITE</Text>
          </ProviderInfoRow>
          <ProviderInfoRow title="Owner">
            <Link
              target="_blank"
              rel="noreferrer"
              color="brandBlue.500"
              href={`https://t.me/${p.data.ownerName}`}
            >
              {p.data.ownerName}
            </Link>
          </ProviderInfoRow>
          <ProviderInfoRow title="Location">
            <Text color="muted">{p.data.location}</Text>
          </ProviderInfoRow>
          <Flex justify="space-between">
            <ProviderInfoRow title="Slots available" w="46%">
              <Flex>
                <Text color="gray.500" mr={1}>
                  {p.slots}
                </Text>
                <Text display="none" color="muted">
                  / FILL
                </Text>
              </Flex>
            </ProviderInfoRow>
            <ProviderInfoRow title="Price per validation" w="50%">
              <Text color="muted">
                {GetProviderPrice(p.data, identity?.state, identity?.age)} iDNA
              </Text>
            </ProviderInfoRow>
          </Flex>
          <ProviderInfoRow display="none" title="Users for the last validation">
            <Text color="muted">FILL_USERS</Text>
          </ProviderInfoRow>
          <Flex display="none" justify="space-between">
            <ProviderInfoRow title="Success ratio" w="47%">
              <Text color="muted">FILL_RATIO</Text>
            </ProviderInfoRow>
            <ProviderInfoRow title="Rating" w="47%">
              <Text color="muted">FILL_RATING</Text>
            </ProviderInfoRow>
          </Flex>
          <Button
            variant="primary"
            size="lg"
            mt={6}
            w="100%"
            onClick={onSubmit}
          >
            {t('Continue with this node')}
          </Button>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  )
}
Example #3
Source File: showreel.js    From react-table-library with MIT License 4 votes vote down vote up
Component = () => {
  const [data, setData] = React.useState({ nodes });

  //* Theme *//

  const chakraTheme = getTheme({
    ...DEFAULT_OPTIONS,
    striped: true,
  });
  const customTheme = {
    Table: `
      --data-table-library_grid-template-columns:  64px repeat(5, minmax(0, 1fr));

      margin: 16px 0px;
    `,
  };
  const theme = useTheme([chakraTheme, customTheme]);

  //* Resize *//

  const resize = { resizerHighlight: '#dee2e6' };

  //* Pagination *//

  const pagination = usePagination(data, {
    state: {
      page: 0,
      size: 4,
    },
    onChange: onPaginationChange,
  });

  function onPaginationChange(action, state) {
    console.log(action, state);
  }

  //* Search *//

  const [search, setSearch] = React.useState('');

  useCustom('search', data, {
    state: { search },
    onChange: onSearchChange,
  });

  function onSearchChange(action, state) {
    console.log(action, state);
    pagination.fns.onSetPage(0);
  }

  //* Filter *//

  const [isHide, setHide] = React.useState(false);

  useCustom('filter', data, {
    state: { isHide },
    onChange: onFilterChange,
  });

  function onFilterChange(action, state) {
    console.log(action, state);
    pagination.fns.onSetPage(0);
  }

  //* Select *//

  const select = useRowSelect(data, {
    onChange: onSelectChange,
  });

  function onSelectChange(action, state) {
    console.log(action, state);
  }

  //* Tree *//

  const tree = useTree(
    data,
    {
      onChange: onTreeChange,
    },
    {
      clickType: TreeExpandClickTypes.ButtonClick,
      treeYLevel: 1,
      treeIcon: {
        margin: '4px',
        iconDefault: null,
        iconRight: <FaChevronRight />,
        iconDown: <FaChevronDown />,
      },
    },
  );

  function onTreeChange(action, state) {
    console.log(action, state);
  }

  //* Sort *//

  const sort = useSort(
    data,
    {
      onChange: onSortChange,
    },
    {
      sortIcon: {
        iconDefault: null,
        iconUp: <FaChevronUp />,
        iconDown: <FaChevronDown />,
      },
      sortFns: {
        TASK: (array) => array.sort((a, b) => a.name.localeCompare(b.name)),
        DEADLINE: (array) => array.sort((a, b) => a.deadline - b.deadline),
        TYPE: (array) => array.sort((a, b) => a.type.localeCompare(b.type)),
        COMPLETE: (array) => array.sort((a, b) => a.isComplete - b.isComplete),
        TASKS: (array) => array.sort((a, b) => (a.nodes || []).length - (b.nodes || []).length),
      },
    },
  );

  function onSortChange(action, state) {
    console.log(action, state);
  }

  //* Drawer *//

  const [drawerId, setDrawerId] = React.useState(null);
  const [edited, setEdited] = React.useState('');

  const handleEdit = (event) => {
    setEdited(event.target.value);
  };

  const handleCancel = () => {
    setEdited('');
    setDrawerId(null);
  };

  const handleSave = () => {
    const node = findNodeById(data.nodes, drawerId);
    const editedNode = { ...node, name: edited };
    const nodes = insertNode(data.nodes, editedNode);

    setData({
      nodes,
    });

    setEdited('');
    setDrawerId(null);
  };

  //* Modal *//

  const [modalOpened, setModalOpened] = React.useState(false);

  //* Custom Modifiers *//

  let modifiedNodes = data.nodes;

  // search
  modifiedNodes = modifiedNodes.filter((node) =>
    node.name.toLowerCase().includes(search.toLowerCase()),
  );

  // filter
  modifiedNodes = isHide ? modifiedNodes.filter((node) => !node.isComplete) : modifiedNodes;

  //* Columns *//

  const COLUMNS = [
    {
      label: 'Task',
      renderCell: (item) => item.name,
      resize,
      sort: { sortKey: 'TASK' },
      select: {
        renderHeaderCellSelect: () => (
          <Checkbox
            colorScheme="teal"
            isChecked={select.state.all}
            isIndeterminate={!select.state.all && !select.state.none}
            onChange={select.fns.onToggleAll}
          />
        ),
        renderCellSelect: (item) => (
          <Checkbox
            colorScheme="teal"
            style={{ backgroundColor: '#ffffff' }}
            isChecked={select.state.ids.includes(item.id)}
            onChange={() => select.fns.onToggleById(item.id)}
          />
        ),
      },
      tree: true,
    },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
      resize,
      sort: { sortKey: 'DEADLINE' },
    },
    { label: 'Type', renderCell: (item) => item.type, resize, sort: { sortKey: 'TYPE' } },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
      resize,
      sort: { sortKey: 'COMPLETE' },
    },
    {
      label: 'Tasks',
      renderCell: (item) => (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>{item.nodes?.length}</span>
          <IconButton
            aria-label="edit"
            icon={<FaPen />}
            size="xs"
            variant="ghost"
            colorScheme="teal"
            onClick={() => setDrawerId(item.id)}
          />
        </div>
      ),
      resize,
      sort: { sortKey: 'TASKS' },
    },
  ];

  return (
    <>
      <Modal isOpen={modalOpened} onClose={() => setModalOpened(false)}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Not all features included here, but we got ...</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Resize
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Sort
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Search
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Filter
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Select
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Tree
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Drawer on Edit
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Pagination
              </Checkbox>
            </div>
          </ModalBody>
        </ModalContent>
      </Modal>

      {/* Form */}

      <HStack m={3}>
        <Button colorScheme="teal" onClick={() => setModalOpened(true)}>
          Features?
        </Button>

        <InputGroup>
          <InputLeftElement
            pointerEvents="none"
            children={<FaSearch style={{ color: '#4a5568' }} />}
          />
          <Input
            placeholder="Search Task"
            value={search}
            onChange={(event) => setSearch(event.target.value)}
          />
        </InputGroup>

        <Checkbox
          style={{ whiteSpace: 'nowrap' }}
          colorScheme="teal"
          isChecked={isHide}
          onChange={(event) => setHide(event.target.checked)}
        >
          Hide Complete
        </Checkbox>
      </HStack>

      {/* Table */}

      <Box p={3} borderWidth="1px" borderRadius="lg">
        <CompactTable
          columns={COLUMNS}
          data={{ ...data, nodes: modifiedNodes }}
          theme={theme}
          layout={{ custom: true }}
          select={select}
          tree={tree}
          sort={sort}
          pagination={pagination}
        />
      </Box>

      <br />
      <HStack justify="flex-end">
        <IconButton
          aria-label="previous page"
          icon={<FaChevronLeft />}
          colorScheme="teal"
          variant="ghost"
          disabled={pagination.state.page === 0}
          onClick={() => pagination.fns.onSetPage(pagination.state.page - 1)}
        />

        {pagination.state.getPages(modifiedNodes).map((_, index) => (
          <Button
            key={index}
            colorScheme="teal"
            variant={pagination.state.page === index ? 'solid' : 'ghost'}
            onClick={() => pagination.fns.onSetPage(index)}
          >
            {index + 1}
          </Button>
        ))}
        <IconButton
          aria-label="next page"
          icon={<FaChevronRight />}
          colorScheme="teal"
          variant="ghost"
          disabled={pagination.state.page + 1 === pagination.state.getTotalPages(data.nodes)}
          onClick={() => pagination.fns.onSetPage(pagination.state.page + 1)}
        />
      </HStack>

      <Drawer isOpen={drawerId} onClose={handleCancel} placement="right">
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Create your account</DrawerHeader>

          <DrawerBody>
            <Text>Name: </Text>
            <Input
              autoFocus
              value={
                edited || fromTreeToList(data.nodes).find((node) => node.id === drawerId)?.name
              }
              onChange={handleEdit}
              data-autofocus
            />
          </DrawerBody>

          <DrawerFooter>
            <Button variant="outline" mr={3} onClick={handleCancel}>
              Cancel
            </Button>
            <Button onClick={handleSave} colorScheme="teal">
              Save
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}
Example #4
Source File: FormCard.js    From MeowForm with MIT License 4 votes vote down vote up
function FormCard({formName , responses ,formData ,redirectUrl ,email }) {
    const  formBackground = useColorModeValue("gray.100","gray.700");
    const [check] = useMediaQuery("(min-width: 1025px)")
    const { isOpen, onOpen, onClose } = useDisclosure()
    const [size, setSize] = React.useState("md")
    const [url, setUrl] = React.useState();
    const [edit , setEdit] = React.useState(false);
    let apiKey = process.env.REACT_APP_APIKEY ;
    let  apiUrl = process.env.REACT_APP_HOSTURL ;

    function isValidURL(string) {
        var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
        return (res !== null)
      };
      const sendResponse = async(serverUrl)=> {
        let meow = await  axios({
            method: 'post',
            url: serverUrl,
            data: {
              url: url,
              formName: formName
            }
          });

      }
    const checkUrl = () => {
        if(url === "" || url === undefined){
            toast.error(' Url not saved');
            setEdit(!edit)


        }else if(isValidURL(url)){
            let serverUrl = apiUrl + 'url/' + email + '&' + apiKey;
            sendResponse(serverUrl);
          
            toast.success('Url is saved, it will some time to reflect');

            setEdit(!edit)
        }else{
            toast.error('The url is not valid :( ');

  
        }
   
    }


    return (
       <Box  id={formName}mt="1%"    borderRadius={25}  padding="2%" display="flex" flexDirection={check ?   "row" : "column"} backgroundColor ="#fff" background={formBackground} >
          
                  <Box width="100%" ml="5%" >
                  <Flex  justifyContent="space-between"  >
                      <Text> {formName}</Text>
                      <Text> {responses} Responses</Text>
                      <Button colorScheme="orange" onClick={onOpen}> View</Button>
                   </Flex>
 
                          {/* {console.log(formData)} */}
                   </Box>
                   <Drawer onClose={onClose} isOpen={isOpen} size={check ? "xl" :"xs"}>
                     <DrawerOverlay />
                     <DrawerContent>
                       <DrawerHeader align="center"> 

                           <Text
                           margin="1%"
                           fontWeight="extraBold"
                           fontSize="3xl"
                           bgGradient="linear(to-l, #ec9f05 ,#ff4e00)"
                           bgClip="text"
                           >

                          {formName}
                           </Text>
                       <Text
                        
                       >
                         {responses} Responses

      
                        </Text>
                           </DrawerHeader>
                       <DrawerBody>
                       
                        <Box>
                
                     {formData.length > 0 &&
                     <>
                            <FormHeading obj={formData[0]}></FormHeading>
                      
                          {
                              formData.map(x=>
                              <FormData obj={x}></FormData>
                                  )
                          } 
                            
                    </>
                     }   
                     {/* <Flex>
                         <Text margin="5%">Redirect Url </Text>
                         <Text margin="5%"> { redirectUrl } </Text>
                     </Flex>  */}
                     {/* { edit && */}
                    {/* <Flex>
                      <Input placeholder={redirectUrl} isDisabled={!edit}   value={url} onChange={ (e)=>(setUrl(e.target.value))}
                      />  
                     {edit === false ?
                       <Button onClick={()=>{setEdit(!edit)}}>
                           edit
                       </Button>
                       :
                       <Button  onClick={()=>(checkUrl())}> Save</Button>
                     }
                    </Flex> */}
                     {/* }  */}
                           {/* <Text> * you one need Redirect url if you are just using html css , check docs here </Text>  */}
                        </Box>
                        <Box>
                      
                          
                        </Box>
                       </DrawerBody>
                     </DrawerContent>
                   </Drawer>



       </Box>
    );
}
Example #5
Source File: NavBar.js    From MeowForm with MIT License 4 votes vote down vote up
function Navbar(props) {
    const {colorMode , toggleColorMode }= useColorMode();
    const isDark = colorMode === 'dark';
    const { isOpen, onOpen, onClose } = useDisclosure()
    const [size, setSize] = React.useState("md")
    const [check] = useMediaQuery("(min-width: 1025px)")
    const [meow ,setMeow] = React.useState(false);
    const [signIn,setSignIn] = React.useState(false);
    const  formBackground = useColorModeValue("white.100","gray.900");
    const { loginWithRedirect , logout  , isAuthenticated , user} = useAuth0();


    let flag = false;
    var setFlag  = () =>{
      setMeow(!meow);
      onClose();
    }
  
    return (
        <>

        <Box position="fixed" width="100%" backgroundColor="#fff" background={formBackground} zIndex="1000" >

       <VStack p={5} >
           <Flex w="100%">
            <Link to="/">
            <Text ml="8"  bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" bgClip="text"
              fontSize={check ?"3xl":"xl"}
              fontWeight="extrabold"
              z-index={5}
              >
                  MeowForm
            </Text>
            </Link>
           <Spacer>

           </Spacer>

         
           <Tooltip label="Menu">
            <IconButton onClick={onOpen} ml={2} mr={1} icon={<FaList  />} isRound="true"></IconButton>
           </Tooltip>
           {check &&
           <Tooltip label="Star! on github" >
            <a href='https://github.com/tewarig/' target='_blank'><IconButton ml={2} mr={1} icon={<FaGithub />}  isRound="true"></IconButton></a>           
           </Tooltip>
           }
           { check &&
           <Tooltip label={isDark ? "Light mode":"Dark Mode"} >
           <IconButton ml={2} mr={1} icon={ isDark ? <FaSun /> : <FaMoon /> } isRound="true" onClick={toggleColorMode}>
           </IconButton>
           </Tooltip>
             }
             <Tooltip  label="Manage Profile">
               <Box ml={5} mr={1}>
             
               </Box>
             </Tooltip>
             { user &&
              <Menu>
              {({ isOpen }) => (
                <>
                  <MenuButton isActive={isOpen} >
                  <Avatar name={user.name} src={user.picture} />
                  </MenuButton>
                  <MenuList>
                    <MenuItem>Hi , {user.name}</MenuItem>
                    <Link to="/dashboard">
                    <MenuItem> Dashboard </MenuItem>
                    </Link>

                    <MenuItem onClick={() => logout()}>Logout</MenuItem>
                  </MenuList>
                </>
              )}
            </Menu>
             }
             { !isAuthenticated && 
                 <Tooltip label="Sign in / SignUp "> 
                  <Menu>
              {({ isOpen }) => (
                <>
                  <MenuButton isActive={isOpen} >
                  <Avatar   />

                  </MenuButton>
                  <MenuList>
                    <MenuItem  onClick={()=>(loginWithRedirect()) }>Sign In/Sign Up </MenuItem>
                  </MenuList>
                </>
              )}
            </Menu>
                   {/* <IconButton icon={<FaUser />} isRound="true"  onClick={()=>(loginWithRedirect())}>
                   </IconButton> */}
                 </Tooltip>
              } 
             

  
             </Flex>
         </VStack>
         <Divider  bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" height={1} />
         <Drawer onClose={meow ? setFlag : onClose } isOpen={isOpen} size={"xs"}>
                       <DrawerOverlay />
                       <DrawerContent>
                         <DrawerHeader align="center"> 
                          
                         <Text   bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" bgClip="text"
                          fontSize={useDisclosure ? "5xl" : "3xl"}
                          fontWeight="extrabold"
                          >
                           MeowForm
                        </Text>
                             </DrawerHeader>
                         <DrawerBody>
                        
                                      <Box>
                                      {!check &&
                                      <Button ml="1%" mt="5%" width="100%" onClick={toggleColorMode} >
                                      {isDark ? <FaSun color="yellow"/> : <FaMoon color="#59e5f7"/> }  
                                      
                                      <Text fontSize="xl" ml="4%">
                                      {isDark ?  "Light Mode" : "Dark Mode"}
                                      </Text>
                                      </Button>
                                     }
                                                                 
                                        
            
            
           
            
                                   <MenuItems onClose={onClose}></MenuItems>
                          <Text>
                          </Text>
                           </Box>
                      
                         
                            
                            

                       
                       </DrawerBody>
                     </DrawerContent>
                   </Drawer>


              </Box>
              <Box height="15vh">
                          </Box>
       </>
    );
}
Example #6
Source File: Dashboard.js    From MeowForm with MIT License 4 votes vote down vote up
Dashboard = () => {
	const { isLoading, user } = useAuth0();
	const [check] = useMediaQuery("(min-width: 1025px)");
	const { isOpen, onOpen, onClose } = useDisclosure();
	const [formName, setFormName] = React.useState();
	let userEmail = user.email;
	let apiKey = process.env.REACT_APP_APIKEY;
	let apiUrl = process.env.REACT_APP_HOSTURL;
	const [data, setData] = React.useState();
	const getData = async () => {
		let temp = await axios.get(apiUrl + "user/" + userEmail + "&" + apiKey);
		setData(temp.data[0]);
		console.log(data);
	};
	useEffect(() => {
		getData();
		if (data === undefined) {
			setTimeout(() => getData(), 2500);
		}
	}, []);
	let responses = 0;
	if (data) {
		for (let i = 0; i < data.forms.length; i++) {
			responses += data.forms[i].formData.length;
		}
	}

	const postApiData = async () => {
		let temp = await axios.post(apiUrl + "addForm/" + apiKey, {
			email: user.email,
			formName: formName,
			url: "",
		});
		getData();
	};
	const addNewForm = () => {
		if (formName === "") {
			toast.error("Form is empty?");
		} else {
			//  console.log(data.forms[0].formName);
			let isCopy = false;
			for (let i = 0; i < data.forms.length; i++) {
				if (data.forms[i].formName === formName) {
					isCopy = true;
				}
			}
			if (isCopy) {
				toast.error("form with such name already exits ");
			} else {
				postApiData();
				setTimeout(() => getData(), 2000);
				onClose();
				setTimeout(
					() => toast.success("Form Have beeen added ?"),
					2000
				);
			}
		}
	};

	return (
		<Box backgroundColor='whiteAlpha.100'>
			<Box
				padding='6'
				boxShadow='2xl'
				align='center'
				margin='2%'
				borderRadius={check ? "full" : "0 "}>
				<Flex align='center' flexDirection={check ? "row" : "column"}>
					<Flex>
						<Image src={user.picture} borderRadius='full' />
						<Text
							mt='10%'
							ml='20px'
							bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
							bgClip='text'
							fontSize={check ? "3xl" : "xl"}>
							{user.name}
						</Text>
					</Flex>

					<Flex align='center' ml={check ? "40%" : "10%"}>
						<Box>
							<Text
								bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
								bgClip='text'
								fontSize='3xl'>
								{data ? (
									responses
								) : (
									<SkeletonText></SkeletonText>
								)}
							</Text>
							<Text>Responses</Text>
						</Box>
						<Box ml='50%'>
							<Text
								bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
								bgClip='text'
								fontSize='3xl'>
								{data ? (
									data.forms.length
								) : (
									<SkeletonText></SkeletonText>
								)}
							</Text>

							<Text>Forms</Text>
						</Box>
					</Flex>
				</Flex>
			</Box>

			<Box
				padding='6'
				boxShadow='xl'
				margin='2%'
				borderRadius={check ? "25px" : "0 "}>
				<Flex justifyContent='space-between'>
					<Text
						margin='5%'
						bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
						bgClip='text'
						fontSize='3xl'>
						Forms
					</Text>
					<Button margin='5%' colorScheme='orange' onClick={onOpen}>
						New form
					</Button>
				</Flex>
				<Divider margin='2%' colorScheme='blackAlpha'></Divider>
				{data ? (
					data.forms.map((x) => (
						<FormCard
							formName={x.formName}
							responses={x.formData.length}
							formData={x.formData}
							redirectUrl={x.redirectUrl}
							email={userEmail}></FormCard>
					))
				) : (
					<>
						<SkeletonText mt='3' noOfLines={1}></SkeletonText>
						<SkeletonText mt='3' noOfLines={1}></SkeletonText>
					</>
				)}

				{data && data.forms.length === 0 ? (
					<>
						<Image
							src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629867315/kitekat-3_dlccdn.png'
							width='25%'
							height='25%'
							ml='38%'
						/>
						<Text align='center'>
							You haven't created a form Yet{" "}
						</Text>
					</>
				) : (
					<> </>
				)}
			</Box>
			<Drawer
				onClose={onClose}
				isOpen={isOpen}
				size={check ? "xs" : "xs"}>
				<DrawerOverlay />
				<DrawerContent>
					<DrawerHeader align='center'>
						<Text
							margin='1%'
							fontWeight='extraBold'
							fontSize='3xl'
							bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
							bgClip='text'>
							Add Form
						</Text>
						<Image src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629884425/kitekat-17_ipr2uy.png' />
						<Text></Text>
					</DrawerHeader>
					<DrawerBody>
						<Box>
							<Flex>
								<Input
									onChange={(e) =>
										setFormName(e.target.value)
									}
									placeholder='Form Name'
								/>
								<Button
									ml='0.5%'
									colorScheme='orange'
									onClick={addNewForm}>
									{" "}
									&gt;{" "}
								</Button>
							</Flex>
						</Box>
						<Box></Box>
					</DrawerBody>
				</DrawerContent>
			</Drawer>

			<Toaster />
		</Box>
	);
}