react-device-detect#MobileView JavaScript Examples

export default function Layout({ children }) {
  const style = {
    margin: `2rem auto`,
    maxWidth: 650,
    padding: `0.5rem 0.5rem`,
    border: `1px solid #e1e4e8`,
    borderRadius: `6px`,
  };

  if (isMobile) {
    style.margin = `auto`;
    style.border = `inherit`;
    return <MobileView style={style}>{children}</MobileView>;
  }

  return <BrowserView style={style}>{children}</BrowserView>;
}

Home = () => {
    const query = new URLSearchParams(useLocation().search)
    return (
        <>
            <header>
                <nav style={{ marginBottom: 0 }}>
                    <h1>
                        <Link to='/' style={{ color: 'var(--color-text)' }}>rendezvous</Link>
                        {query.get('subject') && !isMobile && (<sup>{'@' + query.get('subject')}</sup>)}
                    </h1>
                    <ul>
                        <li><Link to='/about'>About</Link></li>
                        <li><a href='https://github.com/this-fifo/rendezvous' rel='noopener noreferrer' target='_blank'>GitHub</a></li>
                    </ul>
                </nav>
                <BrowserView>
                    {query.get('code') && query.get('email')
                        ? <InviteForm code={query.get('code')} email={query.get('email')}/>
                        : !query.get('room') && <EmailConfirmation />}
                    {query.get('room') &&
                        <Jutsu
                            containerStyles={{ width: '1080px', height: '600px' }}
                            subject={query.get('subject')}
                            roomName={query.get('room')}
                            password={query.get('password')}
                            displayName={query.get('name')} />}
                </BrowserView>
                <MobileView>
                    <Mobile room={query.get('room')} password={query.get('password')} />
                </MobileView>
            </header>
            <Footer />
        </>
    )
}

ShowSection = () => {
  const [isHidden, toggleHidden] = useState(false)
  const onClick = () => {
    isHidden ? toggleHidden(false) : toggleHidden(true)
  }

  const ButtonContainer = styled.div`
    position: absolute;
    z-index: 5;
    background-color: ${props => props.theme.background};
    opacity: 0.9;
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-self: center;
    place-content: center;
  `
  const CloseButton = styled.button`
    background: unset;
    border: 1px solid ${props => props.theme.highlight};
    border-radius: 100px;
    color: ${props => props.theme.highlight};
    font-size: 1rem;
    font-weight: 100;
    padding: 1rem;
    justify-self: center;
    align-self: start;
    max-width: 250px;
    & :focus {
      filter: invert(100%);
    }
  `
  return (
    <div>
      {isHidden ? null : (
        <ButtonContainer>
          <BrowserView>{isHidden ? null : <DesktopElement />}</BrowserView>
          <MobileView>{isHidden ? null : <MobileElement />}</MobileView>
          <CloseButton onClick={onClick} className='click-zone'>
            {isHidden ? '' : 'ENTER'}
          </CloseButton>
        </ButtonContainer>
      )}
    </div>
  )
}

Space = () => {
  const [live, setLive] = useState(false)

  const { currentFloatingSpaces, addFloatingSpace } = useContext(
    FloatingSpaceContext
  )

  const space = currentFloatingSpaces

  let displayedJoinedSpaces
  if (space.length > 0) {
    if (space.length > 2) {
      let nameCount = space.length
      displayedJoinedSpaces =
        space.slice(0, nameCount - 2).join(', ') +
        ', ' +
        space.slice(nameCount - 2, nameCount).join(' & ')
    } else {
      displayedJoinedSpaces = space.join(' & ')
    }
  }
  {
    /**
  useEffect(() => {
    var Sidecar = require("gitter-sidecar");
    var myChat = new Sidecar({
      room: "ethereum/solidity",
      activationElement: false,
    });
  });
   */
  }

  return (
    <SpaceSelector>
      <BrowserView viewClassName='space-container'>
        <ShowSection />
        {live && <MovingImage src={Zeppelin} width='auto' height='auto' />}
        <ClickImage
          src={Date}
          alt='March 7th - April 4th'
          width='auto'
          height='60px'
          style={{
            position: 'absolute',
            bottom: '10px',
            left: '1rem',
            zIndex: 2
          }}
          className='click-zone'
          onClick={() => addFloatingSpace('Calendar')}
        />
        <a href='/'>
          <ClickImage
            src={HeaderImage}
            alt='MetaFest'
            width='auto'
            height='150px'
            style={{
              position: 'absolute',
              top: '10px',
              marginLeft: 'auto',
              marginRight: 'auto',
              left: '0px',
              right: '0px',
              zIndex: 2
            }}
          />
        </a>
        <ClickImage
          src={Future}
          alt='manifest'
          width='auto'
          height='100px'
          style={{
            position: 'absolute',
            bottom: '10px',
            right: '1rem',
            zIndex: 2
          }}
          className='click-zone'
          onClick={() => addFloatingSpace('Apply')}
        />

        <ImagemapContainer>
          <SvgImagemap />
        </ImagemapContainer>
        <Header style={{ position: 'relative', zIndex: 3 }}>
          <SpaceInfo>
            {displayedJoinedSpaces ? (
              <Fragment>
                You're in <CurrentSpace>{displayedJoinedSpaces}</CurrentSpace>!
              </Fragment>
            ) : (
              <Fragment>
                <div>
                  Click on a <Triangle src={triangle} height='12px' />
                </div>
              </Fragment>
            )}
          </SpaceInfo>
        </Header>
        {/**<img
          src={Grid}
          alt=''
          width='100%'
          height='50%'
          style={{
            position: 'absolute',
            bottom: '0',
            zIndex: -1
          }}
        />*/}
      </BrowserView>
      <MobileView>
        <ShowSection />
        <ImagemapContainerMobile>
          <Mobile />
        </ImagemapContainerMobile>
      </MobileView>
    </SpaceSelector>
  )
}

Editor = (props) => {

  const socket = props.socket

  // Change theme of editor
  const [theme, setTheme] = useState("dark")
  // Default language JS
  const [language, setLanguage] = useState("javascript")
  // Check if editor is ready
  const [isEditorReady, setIsEditorReady] = useState(false)
  // Send chunks of code on change
  const [message, setMessage] = useState("")
  // Set value of editor
  const [value, setValue] = useState('')
  const [valid, setValid] = useState(false)
  const [sendInitialData, setSendInitialData] = useState(false)
  const [users, setUsers] = useState(0)
  const [title, setTitle] = useState("Untitled")
  const [titleInfo, setTitleInfo] = useState("Untitled")
  const [titleChange, setTitleChange] = useState(false)
  let { id } = useParams();

  // Check if room exists
  useEffect(() => {
    socket.emit('room-id', id)
    setValid(true)
  }, [])

  // Ref for editor
  const editorRef = useRef()

  // Called on initialization, adds ref
  const handleEditorDidMount = (_, editor) => {
    setIsEditorReady(true);
    editorRef.current = editor
  }

  // Called whenever there is a change in the editor
  const handleEditorChange = (ev, value) => {
    // Set value to send over to other sockets
    setMessage(value)
  };

  // For theme of code editor
  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light")
  }

  // If language changes on one socket, emit to all other
  useEffect(() => {
    socket.emit('language-change', language)
  }, [language])


  // If there is a code change on a socket, emit to all other
  useEffect(() => {
    socket.emit('code-change', message)
    console.log("CODE-CHANGE: " + message)
  }, [message])

  // If there is a title change on a socket, emit to all other
  useEffect(() => {
    console.log("Title Updating")
    socket.emit('title-change', title)
  }, [title])


  // Recieve code, title and language changes
  useEffect(() => {
    socket.on('code-update', (data) => {
      console.log("CODE-UPDATE: " + data)
      setValue(data)
    })
    socket.on('language-update', (data) => {
      setLanguage(data)
    })

    socket.on('title-update', (data) => {
      setTitleInfo(data)
    })

    socket.on('room-check', (data) => {
      if (data === false) {
        setValid(false)
      } else {
        socket.emit('join-room', id)
      }

    })

    socket.on('request-info', (data) => {
      setSendInitialData(true)
    })

    // Triggered if new user joins
    socket.on('accept-info', (data) => {
      console.log(data)
      setTitleInfo(data.title)
      setLanguage(data.language)
    })

    // Update participants
    socket.on('joined-users', (data) => {
      setUsers(data)
    })

  }, [])


  // If a new user join, send him current language and title used by other sockets.
  useEffect(() => {
    if (sendInitialData == true) {
      socket.emit('user-join', { title: title, language: language })
      setSendInitialData(false)
    }
  }, [sendInitialData])

  const languages = ["javascript", "python", "c++", "c", "java", "go"]

  const changeLanguage = (e) => {
    setLanguage(languages[e.target.value])
  }

  const titleUpdating = (e) => {
    setTitleInfo(e.target.value)
    setTitleChange(true)
  }

  const titleUpdated = (e) => {
    setTitle(titleInfo)
    setTitleChange(false)
  }

  const renderTrue = () => {
    return (
      <>
      <BrowserView>
        <div className="navBar">

          <div className={theme === "light" ? 'listButton-light' : 'listButton-dark'}>
            <Link to="/" className="logoEditor">CodeLive</Link>
            {theme === "light" &&
              <FaRegLightbulb className="bulbIcon" onClick={toggleTheme} disabled={!isEditorReady}></FaRegLightbulb>

            }
            {theme !== "light" &&

              <RiSunLine className="sunIcon" onClick={toggleTheme} disabled={!isEditorReady}></RiSunLine>
            }

            <select className={theme === "light" ? 'select-light' : 'select-dark'} onChange={changeLanguage} value="language">
              <option value="-1">Language</option>
              <option value="0">Javascript</option>
              <option value="1">Python</option>
              <option value="2">C++</option>
              <option value="3">C</option>
              <option value="4">Java</option>
              <option value="5">Go</option>
            </select>

            <span className={theme === "light" ? 'language-name-light' : 'language-name-dark'}>{language[0].toUpperCase() + language.substr(1)}</span>
            <span className={theme === "light" ? 'language-name-light' : 'language-name-dark'}>Participants: {users}</span>
            <div className="title-doc">
              <input className={theme === "light" ? 'input-light' : 'input-dark'} type="text" value={titleInfo} onChange={titleUpdating}></input>
            </div>
            {titleChange === true &&
              <RiCheckFill className="checkIcon" onClick={titleUpdated} disabled={!isEditorReady}></RiCheckFill>
            }

          </div>
          
            <ControlledEditor
              height="100vh"
              theme={theme}
              language={language}
              value={value}
              editorDidMount={handleEditorDidMount}
              onChange={handleEditorChange}
              loading={"Loading..."}
            />
          
        </div>
        </BrowserView>
        <MobileView>
          <div className="mobile-notValid">
            <h1>Unfortunately, the code editor doesn't work on mobile. There are bugs that we still need to fix before we provide the mobile functionality.</h1>
            <h1>Kindly use on a Desktop.</h1>
          </div>
        </MobileView>
      </>
    )
  }

  const renderFalse = () => {
    return (
      <>
        <h4>There seems to be no room here.</h4>
      </>
    )
  }
  return (
    <div>
      {valid === true
        ? renderTrue()
        : renderFalse()}
    </div>
  );
}

Space = () => {
  const { currentFloatingSpaces, addFloatingSpace } = useContext(
    FloatingSpaceContext
  );

  let displayedJoinedSpaces;
  if (currentFloatingSpaces.length > 0) {
    if (currentFloatingSpaces.length > 2) {
      let nameCount = currentFloatingSpaces.length;
      displayedJoinedSpaces =
        currentFloatingSpaces.slice(0, nameCount - 2).join(", ") +
        ", " +
        currentFloatingSpaces.slice(nameCount - 2, nameCount).join(" & ");
    } else {
      displayedJoinedSpaces = currentFloatingSpaces.join(" & ");
    }
  }

  const openInNewTab = url => {
    let win = window.open(url, "_blank");
    win.focus();
  };

  return (
    <SpaceSelector>
      <BrowserView>
        <span>
          <SpaceInfo>
            {displayedJoinedSpaces ? (
              <Fragment>
                You're in the{" "}
                <CurrentSpace>{displayedJoinedSpaces}</CurrentSpace>!
              </Fragment>
            ) : (
              <Fragment>
                <div>Click on a portal</div>
              </Fragment>
            )}
          </SpaceInfo>
        </span>
        <div>
          <div className="m-grid-container">
            <svg
              className="frame"
              // xmlns:svg='http://www.w3.org/2000/svg'
              xmlns="http://www.w3.org/2000/svg"
              preserveAspectRatio="xMidYMid meet"
              viewBox="1 1 36 40"
              id="svg"
            >
              <g id="shapes">
                <path
                  className="path-hex "
                  d="M 19,5 L 33,13 L 33,29 L 19,37 L 5,29 L 5,13 L 19,5 z "
                  id="octagon"
                />
                <path
                  className="path-hex "
                  d="M 19,5 L 5,29 L 33,29 L 19,5 z "
                  id="triange-up"
                />
                <path
                  className="path-hex "
                  d="M 5,13 L 19,37 L 33,13 L 5,13 z "
                  id="triange-down"
                />
                <path
                  className="path-hex inner"
                  d="M 19,13 L 12,17 L 12,25 L 19,29 L 26,25 L 26,17 L 19,13 z "
                  id="octagon-inner"
                />
                <path
                  className="path-hex "
                  d="M 12,25 L 19,5 L 26,25 L 12,25 z "
                  id="path2894"
                />
                <path
                  className="path-hex "
                  d="M 19,37 L 12,17 L 26,17 L 19,37 z "
                  id="path2896"
                />
                <path className="path-hex " d="M 5,13 L 33,29" id="line-6-3" />
                <path className="path-hex " d="M 5,29 L 33,13" id="line-6-2" />
                <path className="path-hex " d="M 19,5 L 19,37" id="line=-1-3" />
                <path
                  className="path-hex "
                  d="M 5,29 L 19,13 L 26,25 L 5,29 z "
                  id="path2904"
                />
                <path
                  className="path-hex "
                  d="M 33,29 L 19,13 L 12,25 L 33,29 z "
                  id="path2906"
                />
                <path
                  className="path-hex "
                  d="M 33,13 L 12,17 L 19,29 L 33,13 z "
                  id="path2908"
                />
                <path
                  className="path-hex "
                  d="M 5,13 L 19,29 L 26,17 L 5,13 z "
                  id="path2910"
                />
              </g>
            </svg>
            <div
              id="c0"
              className="circle row-1 c-center c-1 click-zone"
              onClick={() => openInNewTab("https://portal.interspace.chat")}
            >
              <span className="roomName">Launch new capsule</span>
            </div>
            <div
              id="c1"
              className="circle row-2 c-right click-zone"
              onClick={() => addFloatingSpace("capsule2")}
            >
              <span className="roomName">Capsule 2</span>
            </div>
            <div
              id="c2"
              className="circle row-6 c-right click-zone"
              onClick={() => openInNewTab("https://ethturin.com/")}
            >
              <span className="roomName">ETHTurin</span>
            </div>
            <div
              id="c3"
              className="circle row-7 c-center click-zone"
              onClick={() => openInNewTab("https://noncon.interspace.chat")}
            >
              <span className="roomName">NonCon</span>
            </div>
            <div
              id="c4"
              className="circle row-6 c-left click-zone"
              onClick={() => openInNewTab("https://interspace.metagame.wtf")}
            >
              <span className="roomName">Metagame</span>
            </div>
            <div
              id="c5"
              className="circle row-2 c-left click-zone"
              onClick={() => addFloatingSpace("capsule1")}
            >
              <span className="roomName">Capsule 1</span>
            </div>

            <div
              id="c6"
              className="circle row-2 c-center click-zone"
              onClick={() => addFloatingSpace("discord chat")}
            >
              <span className="roomName">Discord chat</span>
            </div>

            <div id="c7" className="circle row-3 c-center-right"></div>

            <div id="c8" className="circle row-5 c-center-right"></div>
            <div
              id="c9"
              className="circle row-6 c-center click-zone"
              onClick={() => addFloatingSpace("loft.radio")}
            >
              <span className="roomName">loft.radio</span>
            </div>
            <div id="c10" className="circle row-5 c-center-left"></div>
            <div id="c11" className="circle row-3 c-center-left"></div>

            <div
              id="c12"
              className="circle row-4 c-center click-zone"
              onClick={() => addFloatingSpace("calendar")}
            >
              <span className="roomName">Event calendar</span>
            </div>
          </div>
          {/*
        <span className="mapInstructions">
          Click a location to join a conversation.
        </span>
        */}
        </div>
      </BrowserView>
      <MobileView>
        <MobileContainer>
          <Headline>
            Welcome to{" "}
            <a
              href="https://interspace.chat"
              target="_blank"
              rel="noopener noreferrer"
              style={{ textDecoration: "none" }}
            >
              interspace.chat
            </a>
          </Headline>
          <Descripton>
            <p> Click below to enter the videochat</p>

            <a href="https://portal.interspace.chat">or open a new room</a>
          </Descripton>
          <MobileSelectorContainer>
            <Room roomName="capsule1" />
            <Room roomName="capsule2" />
          </MobileSelectorContainer>
          <JitsiInstanceMobile />
        </MobileContainer>
      </MobileView>
    </SpaceSelector>
  );
}

SearchBox = (props) => {
    const classes = useStyles();
    const country = useContext(CountryContext);
    const counties =
        country.allStates().flatMap(s => s.allCounties()).map(county => {
            return {
                display_name: `${county.name}, ${county.state().name}`,
                county: county,
                total: county.totalConfirmed() + county.newCases(),
            };
        });
    const states = country.allStates().map(
        state => {
            return {
                display_name: `${state.name} (${state.twoLetterName})`,
                state: state,
                total: state.totalConfirmed() + state.newCases(),
            }
        });
    const metros = country.allMetros().map(
        metro => {
            return {
                display_name: `${metro.name}, ${metro.state().name}`,
                metro: metro,
                total: metro.totalConfirmed() + metro.newCases(),
            }
        });
    const search_list = counties.concat(states).concat(metros)
    let search_list_sorted = search_list.sort((a, b) => {
        let x = a.total;
        let y = b.total;
        if (!x) x = 0;
        if (!y) y = 0;

        return y - x;
    });
    let search_list_final = search_list_sorted
        .map(c => {
            return {
                label: `${c.display_name} (${c.total})`,
                value: c,
            };
        });
    const history = useHistory();

    const mobilePropsBar = {
        xs: 10,
        sm: 11
    }

    const mobilePropsButton = {
        xs: 12 - mobilePropsBar.xs,
        sm: 12 - mobilePropsBar.sm
    }

    const webPropsBar = {
        xl: 11,
        md: 10,
        sm: 9,
        xs: 8
    }

    const webPropsButton = {
        xl: 12 - webPropsBar.xl,
        md: 12 - webPropsBar.md,
        sm: 12 - webPropsBar.sm,
        xs: 12 - webPropsBar.md
    }

    return (
        <Grid container justify="space-evenly" alignItems="center" direction="row">
            <Grid item {...(isMobile ? mobilePropsBar : webPropsBar)}>
                <Select
                    className="basic-single"
                    classNamePrefix="select"
                    styles={{
                        menu: provided => ({ ...provided, zIndex: 9999 })
                    }}
                    defaultValue={""}
                    placeholder={"Search for a County or a State"}
                    isDisabled={false}
                    isLoading={false}
                    isClearable={true}
                    isRtl={false}
                    isSearchable={true}
                    name="county_or_state_selection"
                    options={search_list_final}
                    onChange={param => {
                        if (param && param.value) {
                            let route;
                            if (param.value.county) {
                                route = param.value.county.routeTo();
                            } else if (param.value.metro) {
                                route = param.value.metro.routeTo();
                            } else {
                                route = param.value.state.routeTo();
                            }
                            history.push(route);
                        }
                    }}
                />
            </Grid>
            <Grid item {...(isMobile ? mobilePropsButton : webPropsButton)}>
                <BrowserView>
                    <Typography variant="body2" className={`${classes.findLocation} ${classes.link}`}>
                        <MaterialLink target="_blank" onClick={() => findLocationAndRedirect(country, history)} className={`${classes.findLocation}`} >
                            Find My Location
                        </MaterialLink>
                    </Typography>
                </BrowserView>
                <MobileView>
                    <MaterialLink onClick={() => findLocationAndRedirect(country, history)} className={classes.gpsIcon}>
                        <GpsFixedIcon target="_blank" fontSize="large" className={classes.gpsIcon}/>
                    </MaterialLink>
                </MobileView>
            </Grid>
        </Grid>
    );
}