I want to add background image fullscreen cover in React JS - html

import React, {Component} from "react";
import CreateRoomPage from "./CreateRoomPage";
import RoomJoinPage from "./RoomJoinPage";
import Room from "./Room";
import { Grid, Button, ButtonGroup, Typography } from "#material-ui/core";
import {BrowserRouter as Router, Switch, Route, Link, Redirect} from "react-router-dom";
import Info from "./info";
I did import image path and local image folder but didn't work.
export default class HomePage extends Component {
constructor(props) {
super(props);
this.state = {
roomCode: null,
};
this.clearRoomCode = this.clearRoomCode.bind(this);
}
async componentDidMount(){
fetch("/api/user-in-room").then((response) => response.json()).then((data) => {
this.setState({
roomCode: data.code
});
});
}
renderHomePage(){
return(
<Grid container spacing={3}>
<Grid item xs={12} align="center">
<Typography variant = "h3" compact="h3">
Xone Music
</Typography>
</Grid>
<Grid item xs={12} align="center">
<ButtonGroup disableElevation variant="contained" color="primary">
<Button color="primary" to="/join" component={Link}>
Join a Room
</Button>
<Button color="default" to="/info" component = {Link} >
<Typography variant = "h5" compact="h5">
?
</Typography>
</Button>
<Button color="secondary" to="/create" component = {Link}>
Create a Room
</Button>
</ButtonGroup>
</Grid>
</Grid>
);
}
clearRoomCode(){
this.setState({
roomCode:null
});
}
render(){
return (
<Router>
<Switch>
<Route exact path="/" render={() => {
return this.state.roomCode ? (<Redirect to={`/room/${this.state.roomCode}`}/>) : (this.renderHomePage());
}}/>
<Route path="/join" component={RoomJoinPage}/>
<Route path="/info" component={Info}/>
<Route path="/create" component={CreateRoomPage}/>
<Route path="/room/:roomCode" render={(props) => {
return <Room {...props} leaveRoomCallback= {this.clearRoomCode} />
}}/>
</Switch>
</Router>);
}
}
I want to add bg image but I don't know how or where to put it.
This page is my landing page.
When I import the local image folder I got some error about webpack.

Related

The parameter's value don't display with TS

Goal:
Display the parameter's value in the webpage when you click on the text "DetailView"
Problem:
The value don't display and I am not sure if this tis the correct error for this case.
"The 'jsxFragmentFactory' compiler option must be provided to use JSX fragments with the 'jsxFactory' compiler option.(17016)"
How should I solve it?
Thank you!
Stackblitz:
https://stackblitz.com/edit/react-router-typescript-example-asrnpk?
Other info:
*Newbie in react TS
----------------------------
import * as React from 'react';
import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
import { render } from 'react-dom';
import { Home, Foo, Bar } from './Pages';
import DetailView from './DetailView';
import './style.css';
class App extends React.Component {
render() {
return (
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<br />
<Link to="/foo">Foo</Link>
<br />
<Link to="/bar">Bar</Link>
<br />
<Link to="/detailview/3}">DetailView</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/foo" element={<Foo />} />
<Route path="/bar" element={<Bar />} />
<Route path="/detailview/:p1?" element={<DetailView />} />
</Routes>
</div>
</Router>
);
}
}
render(<App />, document.getElementById('root'));
----------------
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
interface MatchParams {
id: string;
}
interface Props extends RouteComponentProps<MatchParams> {
// ...
}
const DetailView: React.FC<Props> = ({ match }: Props): JSX.Element => {
const params = match.params;
return <>{`Test "${params.id}"`}</>;
};
export default DetailView;
-------------------
import React from 'react';
export const Home = () => <h1>Home Page</h1>;
export const Foo = () => <h1>Foo Page</h1>;
export const Bar = () => <h1>Bar Page</h1>;

Unexpected re-rendering of components

I'm trying to navigate back to a Menu component, but when I trigger a route to do so, the previous rendered Practice component is rendered in the root domain level, which should just be for the Menu component.
The solutions for similar questions on StackOverflow say to use exact in the route, but as you can see I have this in place.
How do I make this work as expected? Thanks.
Here's what I have...
App.js
import React from 'react';
import './App.css';
import PracticeContextProvider from './contexts/PracticeContext';
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import Menu from './pages/Menu';
function App() {
return (
<div className="app">
<PracticeContextProvider>
<Menu />
</PracticeContextProvider>
</div>
);
}
export default App;
Menu.js
import React, { useContext } from 'react';
import {BrowserRouter as Router, Route, Switch, Link, useParams, useLocation, useRouteMatch} from 'react-router-dom';
import { PracticeContext } from '../contexts/PracticeContext';
import Practice from './Practice';
import ModuleLanguageSelector from '../components/ModuleLanguageSelector';
import ModuleListMenuItem from '../components/ModuleListMenuItem';
const Menu = () => {
const { modulesJson } = useContext(PracticeContext);
return (
<div>
<h1>Menu</h1>
<Router>
<Switch>
<Route exact path="/">
<ModuleLanguageSelector />
{ modulesJson && (
modulesJson.map(module => {
return (
<Link to={'/Practice/' + module._id} key={ module._id }>
<ModuleListMenuItem module={ module }></ModuleListMenuItem>
</Link>
)
})
)}
</Route>
<Route exact path="/Practice/:moduleId" component={Practice} />
</Switch>
</Router>
</div>
);
}
export default Menu;
Practice.js
import React, { useContext } from 'react';
import {BrowserRouter as Router, Route, Switch, Link, useParams, useLocation, useRouteMatch} from 'react-router-dom';
import { PracticeContext } from '../contexts/PracticeContext';
import Menu from './Menu';
import ModulePracticeAnswerArea from '../components/ModulePracticeAnswerArea';
import ModulePracticeQuestion from '../components/ModulePracticeQuestion';
import ModulePracticeProgress from '../components/ModulePracticeProgress';
import ModulePracticeTutorial from '../components/ModulePracticeTutorial';
const Practice = () => {
const { moduleId } = useParams();
const { questionIndex } = useContext(PracticeContext);
return (
<Router>
<div className="module-practice-screen">
<h1>Practice</h1>
<div className="module-practice-container">
<Link to={'/'}>
<button className="quit-practice">X</button>
</Link>
{
moduleId ?
<React.Fragment>
{/*<ModulePracticeTutorial moduleId={ moduleId } />*/}
<ModulePracticeProgress questionNumber={ questionIndex } />
<ModulePracticeQuestion moduleId={ moduleId } questionNumber={ questionIndex } />
<ModulePracticeAnswerArea moduleId={ moduleId } questionNumber={ questionIndex } />
</React.Fragment>
:
<h3>The menu should appear here!</h3>
}
</div>
</div>
<Switch>
<Route exact path="/" component={Menu} />
</Switch>
</Router>
);
};
export default Practice;
You don't need <Router> and <Switch> in Practice
const Practice = props => {
const { moduleId } = useParams();
const { questionIndex } = useContext(PracticeContext);
return (
<div>
<div className="module-practice-screen">
<h1>Practice</h1>
<div className="module-practice-container">
<Link to="/">
<button>X</button>
</Link>
{moduleId ? (
<React.Fragment>
{/*<ModulePracticeTutorial moduleId={ moduleId } />*/}
<ModulePracticeProgress questionNumber={questionIndex} />
<ModulePracticeQuestion
moduleId={moduleId}
questionNumber={questionIndex}
/>
<ModulePracticeAnswerArea
moduleId={moduleId}
questionNumber={questionIndex}
/>
</React.Fragment>
) : (
<h3>The menu should appear here!</h3>
)}
</div>
</div>
</div>
);
};
codesandbox

React router multiple <Switch>

I'm using "react-router-dom": "^4.3.1",, "#material-ui/core": "^3.9.2",
I got router.ts which has Route, Switch and MainPage component.
router.ts
<HashRouter>
<div id="App">
<Appbar />
<Switch>
<Route exact path="/" component={MainPage} />
<Route exact path="/signup" component={SignupPage} />
<Route exact path="/signup/success" component={SignupSuccessPage} />
<Route exact path="/room/:id" component={NovelPage} />
<Route component={NotfoundPage} />
</Switch>
</div>
</HashRouter>
And I got MainPage component which has Route and Switch
<AppBar position="static">
<Tabs
variant="fullWidth"
value={this.state.value}
indicatorColor="primary"
textColor="primary"
>
<Tab
label={"latest_novel"}
onChange={this.handleTabsChange(`/latest/novel`, 0)}
/>
<Tab
label={"create novel"}
onChange={this.handleTabsChange(`/create/room`, 1)}
/>
</Tabs>
<Switch>
<Route exact path={`${this.props.match.url}/latest/novel`} component={TodayNovelPage} />
<Route exact path={`${this.props.match.url}/create/room`} component={CreateRoomPage} />
</Switch>
</AppBar>
I expected
When I click Mainpage's Tab component then, page url is changed like "localhost:3000/latest/novel" and page is moved.
When page is moved then it shows under MainPage's Switch
But, when I tried it.
Page is moved but, Tabs is disappears and it seemed shows under the router.ts not Mainpage. Why is it?
Please let me know if you need more info.
Thanks.
You should have common parent route for both the tabs.
Please check below example which I have created.
https://codesandbox.io/s/zz2xnn9p7m
Index.js
import React from "react";
import ReactDOM from "react-dom";
import { Switch, Route, Redirect, BrowserRouter } from "react-router-dom";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
import MainPage from "../src/mainPage";
import "./styles.css";
function App() {
return (
<div className="App">
<AppBar position="static">
<Toolbar>
<Typography variant="h6" color="inherit">
Relay Novel
</Typography>
</Toolbar>
</AppBar>
<BrowserRouter>
<Switch>
<Route exact path="/" render={() => <Redirect to="/mainPage" />} />
<Route path="/mainPage" component={MainPage} />
</Switch>
</BrowserRouter>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
MainPage.js
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import { Switch, Route, Redirect, Link } from "react-router-dom";
import Tabs from "#material-ui/core/Tabs";
import Tab from "#material-ui/core/Tab";
class MainPage extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0
};
}
handleChange = (event, value) => {
this.setState({ value });
};
render() {
const { value } = this.state;
return (
<Fragment>
<Tabs value={value} onChange={this.handleChange}>
<Tab label="Latest Novel" component={Link} to="/mainPage/tab1" />
<Tab label="Create Novel" component={Link} to="/mainPage/tab2" />
</Tabs>
<Switch>
<Route exact path="/mainPage" />
<Route path="/mainPage/tab2" render={() => <div>Latest Novel</div>} />
<Route path="/mainPage/tab1" render={() => <div>Create Novel</div>} />
</Switch>
</Fragment>
);
}
}
export default MainPage;

Materialize-ui navigation menu

How to fill navigation menu, so when it's clicked on the icon on the left (like mobile menu), a drop down menu appears?
/**
* A simple example of `AppBar` with an icon on the right.
* By default, the left icon is a navigation-menu.
*/
const AppBarExampleIcon = () => (
<AppBar
title="Title"
/>
);
you can try this. this is just an example from http://www.material-ui.com/#/components/app-bar
import React, {Component} from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import FlatButton from 'material-ui/FlatButton';
import Toggle from 'material-ui/Toggle';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
class Login extends Component {
static muiName = 'FlatButton';
render() {
return (
<FlatButton {...this.props} label="Login" />
);
}
}
const Logged = (props) => (
<IconMenu
{...props}
iconButtonElement={
<IconButton><MoreVertIcon /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh" />
<MenuItem primaryText="Help" />
<MenuItem primaryText="Sign out" />
</IconMenu>
);
Logged.muiName = 'IconMenu';
/**
* This example is taking advantage of the composability of the `AppBar`
* to render different components depending on the application state.
*/
class AppBarExampleComposition extends Component {
state = {
logged: true,
};
handleChange = (event, logged) => {
this.setState({logged: logged});
};
render() {
return (
<div>
<Toggle
label="Logged"
defaultToggled={true}
onToggle={this.handleChange}
labelPosition="right"
style={{margin: 20}}
/>
<AppBar
title="Title"
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={this.state.logged ? <Logged /> : <Login />}
/>
</div>
);
}
}
export default AppBarExampleComposition;
just tweak iconElementLeft={this.state.logged ? <Logged /> : <Login />}

appbar responsive with options with react router v4, material-ui and apollo client

I'm working with apollo client, react, reac routerv4 and material-ui, my app is working ,
before insert material-ui i had
<Link to="/" className="navbar">React + GraphQL Tutorial</Link>
then i've inserted material-ui
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more"
/>
but it's not clear for me how to add links for the title and options, in responsive mode with small screen the options i think must be invisible, in small screen not.
The official material-ui site is not well explained by example like bootstrap, so i need a litlle of help.
the full code is:
import React, { Component } from 'react';
import {
BrowserRouter,
Link,
Route,
Switch,
} from 'react-router-dom';
import './App.css';
import ChannelsListWithData from './components/ChannelsListWithData';
import NotFound from './components/NotFound';
import ChannelDetails from './components/ChannelDetails';
import AppBar from 'material-ui/AppBar';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {
ApolloClient,
ApolloProvider,
createNetworkInterface,
toIdValue,
} from 'react-apollo';
const networkInterface = createNetworkInterface({ uri: 'http://localhost:4000/graphql' });
networkInterface.use([{
applyMiddleware(req, next) {
setTimeout(next, 500);
},
}]);
function dataIdFromObject (result) {
if (result.__typename) {
if (result.id !== undefined) {
return `${result.__typename}:${result.id}`;
}
}
return null;
}
// customResolvers:
// This custom resolver tells Apollo Client to check its cache for a Channel object with ID $channelId
// whenever we make a channel query. If it finds a channel with that ID in the cache,
// it will not make a request to the server.
const client = new ApolloClient({
networkInterface,
customResolvers: {
Query: {
channel: (_, args) => {
return toIdValue(dataIdFromObject({ __typename: 'Channel', id: args['id'] }))
},
},
},
dataIdFromObject,
});
class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<BrowserRouter>
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div className="App">
<Link to="/" className="navbar">React + GraphQL Tutorial</Link>
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more"
/>
<Switch>
<Route exact path="/" component={ChannelsListWithData}/>
<Route path="/channel/:channelId" component={ChannelDetails}/>
<Route component={ NotFound }/>
</Switch>
</div>
</MuiThemeProvider>
</BrowserRouter>
</ApolloProvider>
);
}
}
export default App;
the right is add a code like this:
<AppBar position="static">
<Toolbar>
<IconButton color="contrast" aria-label="Menu">
</IconButton>
<Typography type="title" color="inherit" >
{"Admin"}
</Typography>
<AuthLink to="/customers" label="Customers"/>
<AuthLink to="/tours" label="Tours"/>
<AuthLink to="/signout" label="Sign Out"/>
<AuthLink to="/signin" label=" Sign In" whenLogged="false"/>
</Toolbar>
</AppBar>
Authlink is just a component that I wrote to show the options and where simple I add the Title to display options.
const AuthLink = (props) => {
let auth = checkAuth();
return (
( (auth && !props.whenLogged ) || (!auth && props.whenLogged == "false") ) ? (
<Link to={props.to} className="navbar"><Button>{props.label}</Button></Link>
) : (
null
)
);
}
"Button" is a component from material, "Link" from react-router, here the imports:
import {
BrowserRouter,
Link,
Route,
Switch,
Redirect,
} from 'react-router-dom';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';