We Keep Coding

Required Details not showing

I am trying to display a large version of my post in the postDetail.jsx file but it shows blank when i Open it on my web browser. the application is being fetched properly as shown on my network tab in developer option and no form of error is printed on the console.
import React, { useEffect } from 'react';
import { Paper, Typography, CircularProgress, Divider } from '#material-ui/core/';
import { useDispatch, useSelector } from 'react-redux';
import moment from 'moment'; //js library for time
import { useParams, useHistory } from 'react-router-dom';
import { getPost } from '../../actions/posts';
import useStyles from './styles'
const PostDetails = () => {
const { post, posts, isLoading } = useSelector((state) => state.posts);
const dispatch = useDispatch();
const history = useHistory();
const classes = useStyles();
const { id } = useParams();
useEffect(() => {
dispatch(getPost(id));
}, [id]);
if(!post) return null;
//if this return this else return jsx
if(isLoading) {
return (
<Paper elevation={6} className={classes.loadingPaper}>
<CircularProgress size="7em" />
</Paper>
);
}
return (
<Paper style={{ padding: '20px', borderRadius: '15px' }} elevation={6}>
<div className= {classes.card}>
<div className={classes.section}>
<Typography variant="h3" component="h2">{post.title}</Typography>
<Typography gutterBottom variant="h6" color="textSecondary" component="h2">{ post.tags }</Typography>
<Typography gutterBottom variant="body 1" component="p"> {post.message} </Typography>
<Typography variant="h6"> Created by:{post.name} </Typography>
<Typography variant="body 1">{moment(post.createdAt).fromNow()}</Typography>
<Divider style={{ margin: "20px 0" }} />
<Typography variant="body1"><strong>Realtime Chat - coming soon !</strong></Typography>
<Divider style={{ margin: '20px 0px'}}/>
<Typography variant="body 1"><strong>Comments - coming soon !</strong></Typography>
<Divider style={{ margin: '20px 0px' }}/>
</div>
<div className={ classes.imageSection }>
<img className={ classes.media } src={post.selectedFile} alt={post.title} />
</div>
</div>
</Paper>
)
}
export default PostDetails;
This is the styles used for the code.. I used Material-Ui
import { makeStyles } from '#material-ui/core/styles';
export default makeStyles((theme) => ({
media: {
borderRadius: '20px',
objectFit: 'cover',
width: '100%',
maxHeight: '600px',
},
card: {
display: 'flex',
width: '100%',
[theme.breakpoints.down('sm')]: {
flexWrap: 'wrap',
flexDirection: 'column',
},
},
section: {
borderRadius: '20px',
margin: '10px',
flex: 1,
},
imageSection: {
marginLeft: '20px',
[theme.breakpoints.down('sm')]: {
marginLeft: 0,
},
},
recommendedPosts: {
display: 'flex',
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
},
},
loadingPaper: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '20px',
borderRadius: '15px',
height: '39vh',
},
commentsOuterContainer: {
display: 'flex',
justifyContent: 'space-between',
},
commentsInnerContainer: {
height: '200px',
overflowY: 'auto',
marginRight: '30px',
},
}));
Original image Containing the post before a specific id is clicked
[Image of the postDetails when clicked on the original post which contains the specific id i.e /posts/:1d]

how to add drop down list in material-UI Search component in navbar, for search results

I was using material ui search bar into navbar from app-bar-with-search-field official documnets from MUI in my react app. but this article it does not mention how to add dropdown list on selecting search input field.
I was tried many ways including Menu, List components from MUI for implement drop menu but didn't work for me. please help me to figure it out how i can add dropdown list of width of serach bar for showing a search results.
codesendbox link
code in my App.js
import "./styles.css";
import * as React from "react";
import { styled, alpha } from "#mui/material/styles";
import Box from "#material-ui/core/Box";
import InputBase from "#mui/material/InputBase";
import SearchIcon from "#mui/icons-material/Search";
const Search = styled("div")(({ theme }) => ({
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.black, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.black, 0.25)
},
marginTop: "5px",
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto"
}
}));
const SearchIconWrapper = styled("div")(({ theme }) => ({
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center"
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: "red",
"& .MuiInputBase-input": {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch"
}
},
[theme.breakpoints.down("sm")]: {
width: "0ch",
"&:focus": {
width: "12ch"
}
}
}
}));
export default function App() {
return (
<div className="App">
<div>
<nav
id="navbar"
className=" pt-0 pb-0 ps-3 container-row navbar-dark navbar navbar-expand-lg nav-div fixed-top"
>
<div className="container">
<div className="navbar-brand">
<h1 className="logo-text mt-1 text-dark">project logo</h1>
</div>
<div className="nav-list">
<ul className="nav navbar-nav ms-auto mb-2 mb-lg-0">
<React.Fragment>
<Box
sx={{
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
placeholder="Search Organization ..."
inputProps={{ "aria-label": "search" }}
/>
</Search>
</Box>
</React.Fragment>
</ul>
</div>
</div>
</nav>
</div>
</div>
);
}
thank you.

Like suggestion from #rupesh patil, you should change to Autocomplete, or you also can make List show under Search input when your input search is focused and catch keyup event to search for result manually.
import "./styles.css";
import * as React from "react";
import { styled, alpha } from "#mui/material/styles";
import Box from "#material-ui/core/Box";
import InputBase from "#mui/material/InputBase";
import SearchIcon from "#mui/icons-material/Search";
import TextField from '#mui/material/TextField';
import Autocomplete from '#mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
const Search = styled("div")(({ theme }) => ({
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.black, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.black, 0.25)
},
marginTop: "5px",
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto"
}
}));
const SearchIconWrapper = styled("div")(({ theme }) => ({
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center"
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: "red",
"& .MuiInputBase-input": {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch"
}
},
[theme.breakpoints.down("sm")]: {
width: "0ch",
"&:focus": {
width: "12ch"
}
}
}
}));
export default function ControllableStates() {
const [value, setValue] = React.useState(options[0]);
const [inputValue, setInputValue] = React.useState('');
return (
<div className="App">
<div>
<nav
id="navbar"
className=" pt-0 pb-0 ps-3 container-row navbar-dark navbar navbar-expand-lg nav-div fixed-top"
>
<div className="container">
<div className="navbar-brand">
<h1 className="logo-text mt-1 text-dark">project logo</h1>
</div>
<div className="nav-list">
<ul className="nav navbar-nav ms-auto mb-2 mb-lg-0">
<React.Fragment>
<Box
sx={{
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
{/* <StyledInputBase
placeholder="Search Organization ..."
inputProps={{ "aria-label": "search" }}
/> */}
<Autocomplete
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
id="controllable-states-demo"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Search Organization ..." />}
/>
</Search>
</Box>
</React.Fragment>
</ul>
</div>
</div>
</nav>
</div>
</div>
);
}

Warning: React does not recognize the `PaperComponent` prop on a DOM element

I have simple modal using material ui 'Modal', i want to make it draggable, so user could move modal whereever they want simply by dragging, so i used 'Draggable' from react draggable, but i'm getting this error: Warning: React does not recognize the PaperComponent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase papercomponent instead. If you accidentally passed it from a parent component, remove it from the DOM element.
what am i doing wrong ?
codesandbox:
https://codesandbox.io/s/draggabledialog-material-demo-forked-srw9yn?file=/demo.js
code:
import * as React from "react";
import Button from "#mui/material/Button";
import { Modal, Box } from "#material-ui/core";
import { Close } from "#material-ui/icons";
import Paper from "#mui/material/Paper";
import Draggable from "react-draggable";
export default function DraggableDialog() {
const [open, setOpen] = React.useState(false);
function PaperComponent(props) {
return (
<Draggable
handle="#draggable-dialog-title"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Paper {...props} />
</Draggable>
);
}
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" onClick={handleClickOpen}>
Open draggable dialog
</Button>
<Modal
open={open}
onClose={handleClose}
PaperComponent={PaperComponent}
// aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
aria-labelledby="draggable-dialog-title"
>
<div>
<form
style={{
width: "360px",
color: "white",
display: "flex",
flexDirection: "column",
backgroundColor: "#1E2328"
}}
>
<div
style={{
backgroundColor: "black",
margin: "0",
display: "flex",
alignItems: "center",
height: "56px",
width: "360px",
color: "white",
justifyContent: "space-between"
}}
m={2}
>
<Box
style={{
color: "#E9ECEC",
fontSize: "21px"
}}
>
Countries{" "}
</Box>
<button
style={{ color: "white" }}
onClick={handleClose}
aria-label="close-settings-popup"
>
<Close />
</button>
</div>
<div style={{ height: "100%" }}>
<div>
Country Name
<p>Germany</p>
<p>France</p>
</div>
</div>
</form>
</div>
</Modal>
</div>
);
}

Modal component does not recognize PaperComponent that you passing to it as prop,
if you only want modal to be draggable modify your code like so:
import * as React from "react";
import Button from "#mui/material/Button";
import { Modal, Box } from "#material-ui/core";
import { Close } from "#material-ui/icons";
import Paper from "#mui/material/Paper";
import Draggable from "react-draggable";
export default function DraggableDialog() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" onClick={handleClickOpen}>
Open draggable dialog
</Button>
<Modal
open={open}
onClose={handleClose}
// aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
aria-labelledby="draggable-dialog-title"
>
<Draggable>
<div>
<form
style={{
width: "360px",
color: "white",
display: "flex",
flexDirection: "column",
backgroundColor: "#1E2328"
}}
>
<div
style={{
backgroundColor: "black",
margin: "0",
display: "flex",
alignItems: "center",
height: "56px",
width: "360px",
color: "white",
justifyContent: "space-between"
}}
m={2}
>
<Box
style={{
color: "#E9ECEC",
fontSize: "21px"
}}
>
Countries{" "}
</Box>
<button
style={{ color: "white" }}
onClick={handleClose}
aria-label="close-settings-popup"
>
<Close />
</button>
</div>
<div style={{ height: "100%" }}>
<div>
Country Name
<p>Germany</p>
<p>France</p>
</div>
</div>
</form>
</div>
</Draggable>
</Modal>
</div>
);
}
https://codesandbox.io/s/draggabledialog-material-demo-forked-sx2npc?file=/demo.js

How to set keyboard off at beginning on React Native

My app at first opening direct a login page and keyboard open automaticly! But what i want is keyboard off position at beginning but when clicking any input must be keyboard on.Here is my login.js page
import React, { Component } from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import Axios from 'axios';
import AsyncStorage from '#react-native-community/async-storage';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Image,
ActivityIndicator,
} from 'react-native';
import { Container, Header, Content, Form, Item, Input, Button } from 'native-base';
import { set } from 'react-native-reanimated';
export default class Login extends Component {
render() {
return (
<ScrollView contentInsetAdjustmentBehavior="automatic" >
<View style={styles.containerx}>
<Container style={styles.bigContainer} >
<Content contentContainerStyle={{ flex: 1, justifyContent: 'center', padding: 30 }}>
<Image
source={ require('../assets/icon1024.png') }
style={{ width: 150, height: 150, alignSelf: 'center', marginBottom: 10 }}
/>
<Text style={styles.loginText}>KUŞ SOR</Text>
<Text style={[styles.loginText, { fontSize: 14 }]} >Birdpx Kuş Tanımlama Platformu</Text>
{
this.state.loading == true ? <View style={styles.emptyCont}><ActivityIndicator size='large' color='white' /></View> :
<Formik
initialValues={{username: '', password: ''}}
onSubmit={this._handleSubmit}
validationSchema={
Yup.object().shape({
password: Yup.string().min(6, 'Minimim 6 Karakter').required('Bu Alan Zorunludur'),
username: Yup.string().required('Bu Alan Zorunludur'),
})
}
>
{({ handleChange, handleBlur, handleSubmit, values, errors }) => (
<Form>
<Item>
<Input
onChangeText={handleChange('username')}
onBlur={handleBlur('username')}
placeholder="Kullanıcı Adı"
style={{ color: 'white' }}
autoCapitalize={'none'}
value={values.username}
autoFocus={true}
/>
<Text style={styles.errorStyle}>{errors.username}</Text>
</Item>
<Item>
<Input
onChangeText={handleChange('password')}
onBlur={handleBlur('password')}
style={{ color: 'white' }}
secureTextEntry={true}
placeholder="Şifre"
value={values.password} />
<Text style={styles.errorStyle}>{errors.password}</Text>
</Item>
<Button style={{ alignSelf: 'center', marginTop: 20, padding: 10 }} warning
block
onPress={handleSubmit}
>
<Text style={{ textAlign: 'center', justifyContent: 'center' }} > GİRİŞ YAP </Text>
</Button>
<View>
<Text
style={{ textAlign: 'center', justifyContent: 'center', color: '#999', marginTop: 150 }}
onPress={() => this.props.navigation.navigate('FSignup')}
>Henüz üye değilseniz. Buradan Kayıt Olun</Text>
</View>
</Form>
)}
</Formik>
}
</Content>
</Container>
</View>
</ScrollView>
);
};
};
const styles = StyleSheet.create({
bigContainer: {
backgroundColor: 'black',
flex: 1,
},
containerx: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
width:'100%'
},
loginText: {
color: '#c79816',
fontSize: 20,
alignSelf: 'center',
margin: 7,
fontWeight: "700"
},
emptyCont: {
flex: 1,
height: 100,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
errorStyle: {
fontSize: 15,
color: 'red'
},
});
Tried keyboardAvoidingView element in react native but i can not get a good result
Could you help me please?

you have to manually close it in this case either put the input autoFocus to false or use the manual react-native Keyboard handler like below:
import {Keyboard} from 'react-native'
Now when the component mounts we will close the keyboard.
componentDidMount(){
Keyboard.dismiss();
}

Change initial route after Validation - react-native

I'm struggling to find a solution to my problem, but no success yet.
My idea is: when the user receives the 6 digits code from the API and hits confirm the page will reload and send him to the main app. I have looked around if there is any function that can help me resolve my problem, but the only idea that seems to be working for now is to link the button from the ValidationPage to the rooting stack and give the function onPress to send the user to the MainPage.js.
But my opinion is that this is not the right way to do this. So does anyone have an idea how to tackle this problem? I'll be glad if someone can help me. Thank you! The outlook of the page looks like this :
LoginPage.js
import React, { Component } from 'react';
import { Linking, Image, View, AsyncStorage, Dimensions } from "react-native";
import { Container, Icon, Text, Content, Button, Input, Item } from "native-base";
export default class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {}
}
state = {
fontLoaded: false,
}
async componentWillMount() {
await Expo.Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
Ionicons: require("#expo/vector-icons/fonts/Ionicons.ttf"),
});
this.setState({ fontLoaded: true });
}
render() {
return (
this.state.fontLoaded ? (
<Container>
<Content>
<View style={{ alignContent: 'center', alignItems: 'center' }}>
<Image
style={{
width: '60%',
height: 200,
}}
source={require('../../assets/images/Shootlog.png')} />
</View>
<Text style={{ textAlign: 'center', lineHeight: 30, fontWeight: 'bold', fontSize: 20, color: 'grey' }}> Welcome to myShootLog</Text>
<Text style={{ textAlign: 'center', color: '#be0202' }}>Smart Shooting Solution for shooting ranges.</Text>
<Text style={{ padding: 20, textAlign: 'center', color: 'grey' }}> To continue , please fill in your email adress :</Text>
<View style={{ alignContent: 'center', alignItems: 'center', margin: 20 }}>
<Item style={{ marginBottom: 10 }}>
<Input
placeholder='example#mail.com'
onChangeText={(text) => this.validate(text)}
value={this.state.email}
keyboardType='email-address'
/>
<Icon name={this.state.emailCheck} />
</Item>
<Button full onPress={() => this.props.navigation.navigate('Validation')} style={{ backgroundColor: '#e72a2e'}}>
<Text style={{ textTransform: 'uppercase', }}>{'send'.toUpperCase()}</Text>
<Icon name='arrow-forward' />
</Button>
</View>
</Content>
<View style={{ width: '100%', alignContent: 'center', position: 'absolute', top: footerTopPosition }}>
<Text style={{ color: 'grey', fontSize: 11, textAlign: 'center' }} >All Rights Reserved.® 2018 by CanDoIt </Text>
<Text style={{ color: 'grey', fontSize: 10, textAlign: 'center' }} onPress={() => Linking.openURL('http://candoit.be')}>www.candoit.be</Text>
</View>
</Container>
) : null
);
}
validate = (text) => {
let reg = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (reg.test(text) === false) {
console.log('email is incorrect')
this.setState({ emailCheck: 'close-circle' });
return false;
}
else {
this.setState({ emailCheck: 'checkmark-circle' })
console.log('email is correct')
}
}
}
ValidationPage.js
import React, { Component } from 'react';
import { Linking, Image, View, AsyncStorage, Dimensions } from "react-native";
import { Container, Icon, Text, Content, Button, Input, Item } from "native-base";
export default class ValidationScreen extends Component {
constructor(props) {
super(props);
this.state = {}
}
state = {
fontLoaded: false,
}
async componentWillMount() {
await Expo.Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
Ionicons: require("#expo/vector-icons/fonts/Ionicons.ttf"),
});
this.setState({ fontLoaded: true });
}
render() {
const { navigate } = this.props.navigation;
return (
this.state.fontLoaded ? (
<Container>
<Content>
<View style={{ alignContent: 'center', alignItems: 'center' }}>
<Image
style={{
width: '60%',
height: 200,
}}
source={require('../../assets/images/Shootlog.png')} />
</View>
<Text style={{ textAlign: 'center', lineHeight: 30, fontWeight: 'bold', fontSize: 20, color: 'grey' }}> Welcome to NicoLog</Text>
<Text style={{ textAlign: 'center', color: '#be0202' }}>Smart Shooting Solution for shooting ranges.</Text>
<Text style={{ padding: 20, textAlign: 'center', color: 'grey' }}> Please fill in the 6 digits code from the email that you have recieved :</Text>
<View style={{ alignContent: 'center', alignItems: 'center', margin: 20 }}>
<Item style={{ marginBottom: 10 }}>
<Input
placeholder='Ex. 910-519'
onChangeText={(text) => this.validate(text)}
value={this.state.email}
keyboardType='number-pad'
/>
<Icon name={this.state.emailCheck} />
</Item>
<Button full onPress={() => this.props.navigation.navigate('Main')} style={{ backgroundColor: '#e72a2e' }}>
<Icon name='checkmark-circle' />
<Text style={{ textTransform: 'uppercase' }}>{'confirm'.toUpperCase()}</Text>
</Button>
<Text style={{ padding: 20, textAlign: 'center', color: 'grey' }}>If you didn't recieved anything please click the button bellow.</Text>
<Button full style={{ backgroundColor: '#e72a2e' }}>
<Icon name='refresh' />
<Text style={{ textTransform: 'uppercase' }}>{'re-send'.toUpperCase()}</Text>
</Button>
</View>
</Content>
<View style={{ width: '100%', alignContent: 'center', position: 'absolute', top: footerTopPosition }}>
<Text style={{ color: 'grey', fontSize: 11, textAlign: 'center' }} >All Rights Reserved.® 2018 by CanDoIt </Text>
<Text style={{ color: 'grey', fontSize: 10, textAlign: 'center' }} onPress={() => Linking.openURL('http://candoit.be')}>www.candoit.be</Text>
</View>
</Container>
) : null
);
}
validate = (text) => {
let reg = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (reg.test(text) === false) {
console.log('email is incorrect')
this.setState({ emailCheck: 'close-circle' });
return false;
}
else {
this.setState({ emailCheck: 'checkmark-circle' })
console.log('email is correct')
}
}
callMain = () => {
this.props.callParent(); // accsessing the function from the parent App.js
}
}
Navigation.js
import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import LoginScreen from './screens/LoginScreen';
import ValidationScreen from './screens/ValidationScreen';
export default createAppContainer( createStackNavigator (
{
Login: { screen: LoginScreen},
Validation: { screen: ValidationScreen},
},
{
headerMode: 'none'
}
));