I used the RAPID API and it got blocked due to request overload with error 429, I tried to change KEY and it gives me error 403 I also tried to have a member of the team run the project with his own KEY and it still didn't work, what do I need to do to make it work for me?
AxiosError: The request failed with status code 403 after I changed a key.
Thank you!
This is the code of the home page with the requests and the API
import axios from "axios";
export default function Home({ propertiesForSale, propertiesForRent }) {
console.log(propertiesForSale, propertiesForRent);
return (
<Box>
<Flex flexWrap="wrap" justifyContent="center" alignItems="center" m="10">
<Box p="5">
<Text color="gray.500" fontSize="sm" fontWeight="medium">Hello </Text>
<Text fontSize="3xl" fontWeight="bold">Test</Text>
<Text
fontSize="lg"
paddingTop="3"
paddingBottom="3"
color="gray.700"
> Test 2</Text>
<Button fontSize="xl" bg="blue.300" color="white">Test 3</Button>
</Box>
</Flex>
<Flex flexWrap="wrap">
{propertiesForRent.map((property) => (
<Property property={property} key={property.id} />
))}
</Flex>
<Flex flexWrap="wrap" justifyContent="center" alignItems="center" m="10">
<Box p="5">
<Text color="gray.500" fontSize="sm" fontWeight="medium">Hello </Text>
<Text fontSize="3xl" fontWeight="bold">Test</Text>
<Text
fontSize="lg"
paddingTop="3"
paddingBottom="3"
color="gray.700"
> Test 2</Text>
<Button fontSize="xl" bg="blue.300" color="white">Test 3</Button>
</Box>
</Flex>
<Flex flexWrap="wrap">
{propertiesForSale.map((property) => (
<Property property={property} key={property.id} />
))}
</Flex>
</Box>
);
}
export const getStaticProps = async () =>{
const propertyForSale = await fetchApi(
`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-sale&hitsPerPage=6`
);
const propertyForRent = await fetchApi(
`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-rent&hitsPerPage=6`
);
return {
props: {
propertiesForSale: propertyForSale?.hits,
propertiesForRent: propertyForRent?.hits,
},
};
}
`
Related
I have a custom Input Box and when I type inside a custom input component It'll re-render the typed input inside.
import {
Badge,
Box,
CloseButton,
Grid,
GridItem,
Input,
Text
} from "#chakra-ui/react";
import React, { useEffect, useState } from "react";
function InputTag(props) {
const [tags, setTags] = useState(props.values);
const removeTag = (index) => {
setTags(tags.filter((_, i) => i !== index));
};
const addTag = (event) => {
if (event.target.value !== "") {
setTags([...tags, event.target.value]);
props.setFieldValue("tags", [...tags, event.target.value]);
event.target.value = "";
}
};
useEffect(() => {
props.show === false && setTags([]);
}, [props.show]);
//update values based on click suggestions
useEffect(() => {
setTags([props.values, props.suggTag]);
}, [props.suggTag, props.values]);
return (
<Box
display={"flex"}
border="1px"
borderColor={"gray.200"}
borderRadius={"md"}
padding={2}
>
<Grid templateColumns="repeat(3, 1fr)" gap={2} overflow="visible">
{tags &&
tags.map((tag, index) => (
<GridItem key={index}>
<Badge
variant="solid"
colorScheme={"purple"}
display={"flex"}
borderRadius="full"
justifyContent="space-between"
alignItems="center"
gap={2}
>
<Text>{tag}</Text>
<CloseButton onClick={() => removeTag(index)} />
</Badge>
</GridItem>
))}
</Grid>
<Input
type="text"
name="tags"
id="tags"
variant={"unstyled"}
placeholder="Add Tag"
_placeholder={{ fontsize: "md" }}
onChange={props.handleChange}
onBlur={props.handleBlur}
onError={props.errors}
onKeyUp={(event) =>
event.key === "Enter" ? addTag(event) && event.preventDefault() : null
}
/>
</Box>
);
}
export default InputTag;
Here, when I hit enter It'll render them inside the custom Input Box
I Inserted a custom array of strings as "ex_Tag" inside Previewer.js so that when I click on the word in array, it'll also get rendered inside custom input as well.
function NewUploader({ isOpen, onClose }) {
const cancelRef = useRef();
const ex_tags = ["Design", "Strategy", "Human Centered Design"];
const [show, Setshow] = useState(true);
const [suggTag, setSuggTag] = useState();
const initialValues = {
files: null,
tags: []
};
const validationSchema = yup.object({
files: yup.mixed().required("File is Required"),
tags: yup.mixed().required("tags required")
});
const onSubmit = (values, actions) => {
const formData = new FormData();
formData.append("files", values.files[0]);
formData.append("tags", values.tags);
for (var pair of formData.entries()) {
console.log(pair[0] + ", " + pair[1]);
}
actions.setSubmitting(false);
actions.resetForm();
Setshow(!show);
onClose();
};
const handlethis = (e) => {
e.preventDefault();
};
//insert suggested word to useState so i can pass it to custom input
const handleClick = (tag) => {
setSuggTag(tag);
};
return (
<Modal isOpen={isOpen} onClose={onClose} isCentered>
{/* update code on model here */}
<ModalOverlay />
<ModalContent>
<ModalHeader>
<Text fontWeight={"bold"} color="gray.900">
Upload Buddy
</Text>
</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Flex direction="column" gap={3}>
<Box>
<Text fontWeight={"normal"} color="gray.700">
This learning contentwill not be summarised. to summarize your
content, use{" "}
<Link color={"purple.400"}>Create Knowledge Nugget</Link> option
instead.
</Text>
</Box>
<Box>
<Formik
initialValues={initialValues}
onSubmit={onSubmit}
validationSchema={validationSchema}
>
{(formik) => (
<Form
onSubmit={handlethis}
autoComplete="off"
encType="multipart/form-data"
>
<FormLabel htmlFor="file">
<Text
fontSize="sm"
fontWeight="normal"
color="gray.900"
fontFamily={"body"}
>
Upload files
</Text>
</FormLabel>
{/* drag droop sec */}
{formik.isSubmitting ? (
<>
<Grid
templateColumns="repeat(3, 1fr)"
gap={2}
overflow="hidden"
>
{formik.values.files &&
formik.values.files.map((file, index) => (
<GridItem key={index}>
<Badge
variant="solid"
borderRadius="xl"
colorScheme={"gray"}
w={file.name.length * 4}
h="8"
display="flex"
justifyContent="center"
alignItems="center"
my={2}
>
<Text fontFamily={"body"}>{file.name}</Text>
<CloseButton colorScheme={"blackAlpha"} />
</Badge>
</GridItem>
))}
</Grid>
<Progress colorScheme={"yellow"} isIndeterminate />
</>
) : (
<>
<Dragdrop setFieldValue={formik.setFieldValue} />
<Grid
templateColumns="repeat(3, 1fr)"
gap={2}
overflow="hidden"
>
{formik.values.files &&
formik.values.files.map((file, index) => (
<GridItem key={index}>
<Badge
variant="solid"
borderRadius="xl"
colorScheme={"gray"}
w={file.name.length * 4}
h="8"
display="flex"
justifyContent="space-between"
alignItems="center"
my={2}
>
<Text fontFamily={"body"}>{file.name}</Text>
<CloseButton colorScheme={"blackAlpha"} />
</Badge>
</GridItem>
))}
</Grid>
{formik.errors.files && formik.touched.files && (
<Text fontFamily={"body"} color="red">
{formik.errors.files}
</Text>
)}
</>
)}
<FormErrorMessage>
<ErrorMessage name="file" />
</FormErrorMessage>
<FormLabel htmlFor="tags">
<Text
fontSize="sm"
fontWeight="normal"
color="gray.900"
fontFamily={"body"}
>
Tags
</Text>
</FormLabel>
<InputTag
setFieldValue={formik.setFieldValue}
handleChange={formik.handleChange}
handleBlur={formik.handleBlur.call}
values={formik.values.tags}
show={show}
suggTag={suggTag}
/>
{formik.errors.tags && formik.touched.tags && (
<Text fontFamily={"body"} color="red">
{formik.errors.tags}
</Text>
)}
<FormErrorMessage>
<ErrorMessage name="tags" />
</FormErrorMessage>
<Box
aria-invalid="true"
display={"flex"}
flexDir="row"
gap={2}
my={2}
>
<Text fontFamily={"body"}>Suggested</Text>
<Grid
templateColumns="repeat(3, 1fr)"
gap={2}
overflow="hidden"
>
{ex_tags.map(
(tag, index) => (
<GridItem key={index}>
//I inserted on click call here
<Box onClick={handleClick(tag)}>
<Badge
variant={"subtle"}
borderRadius="lg"
colorScheme={"gray"}
_hover={{
cursor: "pointer",
bgColor: "gray.200"
}}
>
<Text fontFamily={"body"}>{tag}</Text>
</Badge>
</Box>
</GridItem>
),
this
)}
</Grid>
</Box>
<Box display={"flex"} justifyContent="center" my={3}>
<Button
type="button"
ref={cancelRef}
colorScheme="yellow"
isLoading={formik.isSubmitting}
onClick={formik.handleSubmit}
>
<Text
fontWeight="bold"
fontSize="18px"
color="gray.900"
fontFamily={"body"}
>
Submit
</Text>
</Button>
</Box>
</Form>
)}
</Formik>
</Box>
</Flex>
</ModalBody>
</ModalContent>
</Modal>
);
}
export default NewUploader;
but It seems when I render them to the screen it will come out as I triggered the onClick even though I didn't.
For now I commented out the useEffect func inside input component
I have uploaded it to code sandbox Bellow.
https://codesandbox.io/s/amazing-heyrovsky-9kr0ex?file=/src/Previewer.js
I have a popup dialog where I get a bunch of values from the user and then get a response after making an API request. I put an inline conditional rendering on the dialog box as it should only render once chart data is updated from the response. However, the dialog never appears even if console.log shows the data is updated. I tried to use useEffect() with many functions but it did not work. Any idea how to refresh the data again?
Edit: Added only relevant code
const [barGraphData, setBarGraphData] = useState([]);
const funcSetBarGraphData = (newBarGraphData) => {
setBarGraphData(newBarGraphData);
};
const sendChartData = async () => {
let bar_response = await axios.post(
"http://localhost:8080/h2h-backend/bardata",
bar_data,
{headers: {'Content-Type': 'application/json'}}
).then(res=>{
const resData = res.data;
const resSubstring = "[" + resData.substring(
resData.indexOf("[") + 1,
resData.indexOf("]")
) + "]";
const resJson = JSON.parse(resSubstring);
console.log(typeof resJson, resJson);
funcSetBarGraphData(barGraphData);
}).catch(err=>{
console.log(err);
});
chartClickOpen();
};
Returning popup dialog with charts when button is clicked:
<StyledBottomButton onClick={sendChartData}>Submit</StyledBottomButton>
{barGraphData.length > 0 && <Dialog
fullScreen
open={openChart}
onClose={chartClickClose}
TransitionComponent={Transition}
>
<AppBar sx={{ position: 'relative' }}>
<Toolbar>
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
Analytics View
</Typography>
<IconButton
edge="start"
color="inherit"
onClick={chartClickClose}
aria-label="close"
>
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
<Grid container spacing={2}>
<Grid item xs={8} sx={{ pt: 2 }}>
<BarChart width={730} height={250} data={barGraphData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="business_name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="num_of_customers" fill="#8884d8" />
<Bar dataKey="sum_total_amount" fill="#82ca9d" />
</BarChart>
{/* <Bar options={set_bar.bar_options} data={set_bar.bar_data} redraw={true}/> */}
</Grid>
<Grid item xs={4} sx={{ pt: 2 }}>
{/* <Pie data={data2} /> */}
</Grid>
</Grid>
</Dialog>}
<StyledBottomButton onClick={handleClose}>Cancel</StyledBottomButton>
I am trying to make a web3 frontend with just basic integration of connecting metamask. Here, I have made a Navbar, which include some page routes and a button to connect the website to metamask. But now, when I am running the dev, I am getting this error which state:
Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
The error lies in this source code:
import Logo from './logo'
import NextLink from 'next/link'
import {
Container,
Box,
Link,
Stack,
Heading,
Flex,
Menu,
MenuItem,
MenuList,
MenuButton,
IconButton,
useColorModeValue
} from '#chakra-ui/react'
import { HamburgerIcon } from '#chakra-ui/icons'
import ThemeToggleButton from './theme-toggle-button'
import { IoLogoGithub } from 'react-icons/io5'
import ConnectWallet from './Metamask/ConnectWallet'
import ConnectedWallet from './Metamask/ConnectedWallet'
import useWeb3Modal from '../hooks/useWeb3Modal'
const LinkItem = ({ href, path, target, children, ...props }) => {
const active = path === href
const inactiveColor = useColorModeValue('gray200', 'whiteAlpha.900')
return (
<NextLink href={href} passHref scroll={false}>
<Link
p={2}
bg={active ? 'grassTeal' : undefined}
color={active ? '#202023' : inactiveColor}
target={target}
{...props}
>
{children}
</Link>
</NextLink>
)
}
const Navbar = props => {
const { web3Provider, address, balance } = useWeb3Modal()
const { path } = props
return (
<Box
position="fixed"
as="nav"
w="100%"
bg={useColorModeValue('#ffffff40', '#20202380')}
css={{ backdropFilter: 'blur(10px)' }}
zIndex={1}
{...props}
>
<Container
display="flex"
p={2}
maxW="container.md"
wrap="wrap"
align="center"
justify="space-between"
>
<Flex align="center" mr={5}>
<Heading as="h1" size="lg" letterSpacing={'tighter'}>
<Logo />
</Heading>
</Flex>
<Stack
direction={{ base: 'column', md: 'row' }}
display={{ base: 'none', md: 'flex' }}
width={{ base: 'full', md: 'auto' }}
alignItems="center"
flexGrow={1}
mt={{ base: 4, md: 0 }}
>
<LinkItem href="/mint" path={path}>
Minting
</LinkItem>
<LinkItem href="/posts" path={path}>
Posts
</LinkItem>
<LinkItem
target="_blank"
href=""
path={path}
display="inline-flex"
alignItems="center"
style={{ gap: 4 }}
pl={2}
>
<IoLogoGithub />
Source
</LinkItem>
</Stack>
<Box flex={1} align="right">
<ThemeToggleButton />
<Box ml={2} display={{ base: 'inline-block', md: 'none' }}>
<Menu isLazy id="navbar-menu">
<MenuButton
as={IconButton}
icon={<HamburgerIcon />}
variant="outline"
aria-label="Options"
/>
<MenuList>
<NextLink href="/" passHref>
<MenuItem as={Link}>About</MenuItem>
</NextLink>
<NextLink href="/mint" passHref>
<MenuItem as={Link}>Works</MenuItem>
</NextLink>
<NextLink href="/posts" passHref>
<MenuItem as={Link}>Posts</MenuItem>
</NextLink>
<MenuItem
as={Link}
href=""
>
View Source
</MenuItem>
</MenuList>
</Menu>
</Box>
</Box>
<Flex>
{web3Provider ? <ConnectedWallet address={address} balance={balance} /> : <ConnectWallet />}
</Flex>
</Container>
</Box>
)
}
export default Navbar
export { getServerSideProps } from '../components/chakra'
I started getting error, when I added web3Provider
const Navbar = props => {
const { web3Provider, address, balance } = useWeb3Modal()
const { path } = props
.
.
.
.
.
<Flex>
{web3Provider ? <ConnectedWallet address={address} balance={balance} /> : <ConnectWallet />}
</Flex>
Before adding these, I didn't got any error and my navbar was working ideally.
Can anyone tell me where I am wrong here, or just edit my code such that the metmask is connected.
P.s:- The source code for ConnectWallet.js/ConnectedWallet.js is [here]. I have added the url to GitHub because, it would have made the question unnecessarily long.
This error is about an import/export, that you might have forgot to add.
Now, I went through your code and seems nothing wrong in the Navbar.js file, all the imports are good, and there seems no problem in your webpack as well.
In your Github, there's a folder called Metamask, where you have written the source code of ConnectWallet.js; you just have to change the source code to this:
import { Button } from '#chakra-ui/react'
import useWeb3Modal from '../../hooks/useWeb3Modal'
const ConnectWallet = () => {
const { connect } = useWeb3Modal()
return (
<Button onClick={connect} colorScheme="teal" size="md">
Connect Wallet
</Button>
)
}
export default ConnectWallet
This might solve your problem.
const Court= [
{
title: ' INTERLOCUTARY APPLICATION(s)',
content: [
{
RegNo: '784/2020',
Particular: 'EXEMPTION FROM FILING O.T',
Remark: '-',
FiledBy: 'PRATIBHA JAIN',
FilingDate: '03-01-2020',
SrNo: '1',
Status: 'P',
EnterOn: '03-01-2020 15:12:42',
},
],
}
{
title:'Case Details',
content :[
{
DiaryNo:
'44424/2019 Filed on 09-12-2019 03:42 PM [SECTION: IV-C]PENDING ',
CaseNo:
'SLP(C) No.000033 -/ 2020 Registered on 03-01-2020 (Verified ON 06-01-2020)',
Present_LastListedOn: '28-02-2020 [REGISTER(J)- II]',
Status_Stage:
'Pending -(Motion Hearing [After NOTICE (FOR ADMISSION)- CIVIL CASES]) List before court/bench-ord at 28-02-2020',
Category: '-',
Act: '-',
}]
}
]
I want to print this title and Content data using single component that is Accordion in react native i use and inside that accordion i use Grid to create table and in that table i want to show may content data in key Value pair.
following is Accordion code-
const App = () => {
const [activeSections, setActiveSections] = useState([]);
const [collapsed, setCollapsed] = useState(true);
const setSections = sections => {
setActiveSections(sections.includes(undefined) ? [] : sections);
};
const renderHeader = (section, _, isActive) => {
//Accordion Header view
return (
<View
duration={400}
style={[styles.header, isActive ? styles.active : styles.inactive]}
transition="backgroundColor">
<Text style={styles.headerText}>{section.title}</Text>
<Arrow name="down" size={25} color="#FFFFFF"></Arrow>
</View>
);
};
const renderContent = (section, _, isActive) => {
//Accordion Content view
return (
<View
duration={400}
style={[styles.content, isActive ? styles.active : styles.inactive]}
transition="backgroundColor">
{section.content.map((d, i) => {
//console.log('d >>> ', d);
return (
<View key={i}>
<Grid style={{borderWidth: 1}}>
<Col>
<Row>
<Text style={[styles.cell, styles.titletxt]}>
Reg.No/I.A No
</Text>
</Row>
<Row>
<Text style={[styles.cell, styles.titletxt]}>
Particular
</Text>
</Row>
<Row>
<Text style={[styles.cell, styles.titletxt]}>Remark</Text>
</Row>
<Row>
<Text style={[styles.cell, styles.titletxt]}>Filed By</Text>
</Row>
<Row>
<Text style={[styles.cell, styles.titletxt]}>
FilingDate
</Text>
</Row>
<Row>
<Text style={[styles.cell, styles.titletxt]}>Sr No</Text>
</Row>
<Row>
<Text style={[styles.cell, styles.titletxt]}>Status</Text>
</Row>
<Row>
<Text style={[styles.cell, styles.titletxt]}>Enter On</Text>
</Row>
</Col>
<Col>
<Row>
<Text style={styles.cell}>{d.RegNo}</Text>
</Row>
<Row>
<Text style={styles.cell}>{d.Particular}</Text>
</Row>
<Row>
<Text style={styles.cell}>{d.Remark}</Text>
</Row>
<Row>
<Text style={styles.cell}>{d.FiledBy}</Text>
</Row>
<Row>
<Text style={styles.cell}>{d.FilingDate}</Text>
</Row>
<Row>
<Text style={styles.cell}>{d.SrNo}</Text>
</Row>
<Row>
<Text style={styles.cell}>{d.Status}</Text>
</Row>
<Row>
<Text style={styles.cell}>{d.EnterOn}</Text>
</Row>
</Col>
</Grid>
</View>
);
})}
</View>
);
};
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.container}>
<ScrollView>
{/*Code for Accordion/Expandable List starts here*/}
<View style={{margin: 8}}>
<Accordion
activeSections={activeSections}
sections={Court}
touchableComponent={TouchableOpacity}
renderHeader={renderHeader}
renderContent={renderContent}
//Content Component(View) to render
duration={400}
//Duration for Collapse and expand
onChange={setSections}
//setting the state of active sections
style={{borderWidth: 1, borderColor: '#C3C3C5'}}
/>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
};
I am only able to print the Content data with Key Value pair for Interlocutary not able to print for Case details Content Data please tell me how to reuse the accordion component to print the case details content??
but title value print properly now issue with title only with content Data .
I'm calling data from this API https://api.themoviedb.org/3/discover/movie?api_key=9a4a662a126525b07d4b84b079d809d8&language=en-US&sort_by=popularity.asc&include_adult=false&include_video=false&page=1
and fetching the url, so I can get which data to display in mobile device, the problem is the in native-base library, List Component is deprecated so, the documentation say should use Flatlist Component from official react-native, and here the code :
// render data list
renderDataMovieList = ({ movieItem }) => {
return(
<ListItem Thumbnail>
<Left>
<Thumbnail square large source= {{ uri:"https://image.tmdb.org/t/p/w500" + movieItem.poster_path }}/>
<Body>
<Text>{ movieItem.title }</Text>
<Text note >Release Date : { movieItem.release_date }</Text>
<Text note >Vote Avarage : { movieItem.vote_average }</Text>
<Text note >Language : { movieItem.original_language}</Text>
</Body>
</Left>
<Button transparent>
<Icon name="arrow-forward" style={{ color: "#999" }}/>
</Button>
</ListItem>
);
}
render(){
return(
<Container>
<Header>
<Left>
<Button transparent>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>Movie List</Title>
</Body>
<Right />
</Header>
<Content>
<FlatList
data = { this.state.data }
renderItem = { this.renderDataMovieList}
keyExtractor={ movieItem => movieItem.id }
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.5}
initialNumToRender={5}
/>
</Content>
</Container>
);
}
But after I ran that code, I get this error
TypeError: undefined is not an object (evaluating 'movieItem.poster_path')
I was following this code pattern : http://docs.nativebase.io/docs/examples/FlatListExample.html
but I still get the error.
I am assuming movieItem is undefined(that is why the error).
Ideally, you should wait till movies call is completed and then call the component and also you are not passing movieItem data to renderDataMovieList method.
Assuming movieItem is the data you are waiting for.
{ movieItem &&
<FlatList
data = { this.state.data }
renderItem = { this.renderDataMovieList({ movieItem: movieItem }) }
keyExtractor={ movieItem => movieItem.id }
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.5}
initialNumToRender={5}
/>
}