mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-11-28 19:55:53 +03:00
webpack, spa arch, chat routes
This commit is contained in:
Gavin
Logan Allen
parent
32ade37fc6
commit
92865c75e4
8323
pkg/interface/package-lock.json
generated
8323
pkg/interface/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -3,15 +3,47 @@
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"dependencies": {},
|
||||
"dependencies": {
|
||||
"@reach/menu-button": "^0.10.1",
|
||||
"@tlon/indigo-react": "^1.1.10",
|
||||
"classnames": "^2.2.6",
|
||||
"codemirror": "^5.51.0",
|
||||
"formik": "^2.1.4",
|
||||
"lodash": "^4.17.11",
|
||||
"moment": "^2.20.1",
|
||||
"mousetrap": "^1.6.5",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.5.2",
|
||||
"react-codemirror2": "^6.0.1",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-markdown": "^4.3.1",
|
||||
"react-router-dom": "^5.0.0",
|
||||
"styled-components": "^5.1.0",
|
||||
"styled-system": "^5.1.5",
|
||||
"urbit-ob": "^5.0.0",
|
||||
"urbit-sigil-js": "^1.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/preset-env": "^7.9.5",
|
||||
"@babel/preset-react": "^7.9.4",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.9.5",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.9.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-loader": "^8.1.0",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-plugin-react": "^7.19.0"
|
||||
"eslint-plugin-react": "^7.19.0",
|
||||
"html-webpack-plugin": "^4.2.0",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.3.11",
|
||||
"webpack-dev-server": "^3.10.3"
|
||||
},
|
||||
"scripts": {
|
||||
"lint": "eslint ./**/*.js",
|
||||
"lint-file": "eslint",
|
||||
"build": "webpack",
|
||||
"start": "webpack-dev-server",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
|
||||
24
pkg/interface/public/index.html
Normal file
24
pkg/interface/public/index.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<meta name="theme-color" content="#000000" />
|
||||
|
||||
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
|
||||
|
||||
<title>OS1</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
|
||||
<div id="root"></div>
|
||||
<script src="../src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
8
pkg/interface/public/manifest.json
Normal file
8
pkg/interface/public/manifest.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"short_name": "indigo-react",
|
||||
"name": "indigo-react",
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
6905
pkg/interface/publish/package-lock.json
generated
6905
pkg/interface/publish/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
72
pkg/interface/src/App.js
Normal file
72
pkg/interface/src/App.js
Normal file
@ -0,0 +1,72 @@
|
||||
import * as React from "react";
|
||||
import { BrowserRouter as Router, Route, Switch, Link, useParams, useRouteMatch, withRouter } from "react-router-dom";
|
||||
import styled, { ThemeProvider, createGlobalStyle } from "styled-components";
|
||||
import { cssReset, light, Col, Text, Row } from "@tlon/indigo-react";
|
||||
|
||||
import Chat from './apps/chat/Chat';
|
||||
|
||||
const Style = createGlobalStyle`
|
||||
${cssReset}
|
||||
html {
|
||||
background-color: ${p => p.theme.colors.white};
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
`
|
||||
|
||||
const Root = styled.div`
|
||||
font-family: ${p => p.theme.fonts.sans};
|
||||
line-height: ${p => p.theme.lineHeights.regular};
|
||||
`;
|
||||
|
||||
const Home = () => (
|
||||
<div>
|
||||
Home
|
||||
<Link to='/~chat'>Chat</Link>
|
||||
<Link to={`/~chat/new/dm/~zod`}>new/dm/~zod</Link>
|
||||
<Link to='/~publish'>Publish</Link>
|
||||
</div>
|
||||
)
|
||||
|
||||
const StatusBar = (props) => {
|
||||
let routeTitle
|
||||
// should be encapsulated
|
||||
if (props.location.pathname === '/') routeTitle = 'Home'
|
||||
if (props.location.pathname === '/~chat') routeTitle = 'Chat'
|
||||
return (
|
||||
<Row p='6' expand> STATUS BAR - {routeTitle} </Row>
|
||||
)
|
||||
}
|
||||
const StatusBarWithRouter = withRouter(StatusBar)
|
||||
|
||||
|
||||
export default class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { state } = this
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={light}>
|
||||
<Style/>
|
||||
<Root>
|
||||
|
||||
<Router>
|
||||
<StatusBarWithRouter props={this.props}/>
|
||||
<div>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/~chat" component={Chat} />
|
||||
</div>
|
||||
</Router>
|
||||
</Root>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
71
pkg/interface/src/apps/chat/Chat.js
Normal file
71
pkg/interface/src/apps/chat/Chat.js
Normal file
@ -0,0 +1,71 @@
|
||||
import * as React from 'react'
|
||||
import { BrowserRouter as Router, Route, Switch, Link, useParams, useRouteMatch } from "react-router-dom";
|
||||
import { Col, Text } from "@tlon/indigo-react";
|
||||
|
||||
export default class Chat extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
// this.state = store.state;
|
||||
this.totalUnreads = 0;
|
||||
// store.setStateHandler(this.setState.bind(this));
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.title = 'OS1 - Chat'
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this)
|
||||
const path = this.props.match.path
|
||||
return (
|
||||
<div>
|
||||
<Col>
|
||||
<Link to={`${this.props.match.url}/new`}>new</Link>
|
||||
<Link to={`${this.props.match.url}/new/dm/~zod`}>new/dm/~zod</Link>
|
||||
</Col>
|
||||
|
||||
<Switch>
|
||||
<Route exact path={`${this.props.match.path}/`}>
|
||||
<h3>Select, create, or join a chat to begin.</h3>
|
||||
</Route>
|
||||
<Route path={`${this.props.match.path}/new`}>
|
||||
<h3>Create new chat</h3>
|
||||
<div />
|
||||
</Route>
|
||||
<Route path={`${this.props.match.path}/new/dm/:ship`}>
|
||||
<h3>New DM: {JSON.stringify(this.props, null, ' ')}</h3>
|
||||
{
|
||||
// new DM
|
||||
}
|
||||
<div />
|
||||
</Route>
|
||||
<Route path={`${this.props.match.path}/join/(~)?/:ship?/:station?`}>
|
||||
{
|
||||
// Join a DM
|
||||
}
|
||||
<div />
|
||||
</Route>
|
||||
<Route path={`${this.props.match.path}/(popout)?/room/(~)?/:ship/:station+`}>
|
||||
{
|
||||
// The chat stream itself
|
||||
}
|
||||
<div />
|
||||
</Route>
|
||||
<Route path={`${this.props.match.path}/(popout)?/members/(~)?/:ship/:station+`}>
|
||||
{
|
||||
// Members view of the chat
|
||||
}
|
||||
<div />
|
||||
</Route>
|
||||
<Route path={`${this.props.match.path}/(popout)?/settings/(~)?/:ship/:station+`}>
|
||||
{
|
||||
// Chat setting
|
||||
}
|
||||
<div />
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
7
pkg/interface/src/index.js
Normal file
7
pkg/interface/src/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
|
||||
// import "./fonts/font.css";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user