LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-22 19:01:26 +00:00
Code Issues Projects Releases Wiki Activity

Somewhat working webpack. Sponsors and communities pages done.

Browse source
This commit is contained in:
Dessalines 2020-09-06 22:41:46 -05:00
parent 2eee936026
commit 241ef72290
22 changed files with 4604 additions and 1396 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
.babelrc Normal file
View file

@ -0,0 +1,20 @@
{
"compact": false,
"presets": [
[
"@babel/preset-env",
{
"loose": true,
"targets": {
"browsers": ["ie >= 11", "safari > 10"]
}
}
],
["@babel/typescript", {"isTSX": true, "allExtensions": true}]
],
"plugins": [
"@babel/plugin-transform-runtime",
["babel-plugin-inferno", { "imports": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
]
}

2
.eslintignore
View file

@ -1,3 +1,3 @@
fuse.ts
generate_translations.js
webpack.config.js
src/api_tests

8
Dockerfile Normal file
View file

@ -0,0 +1,8 @@
FROM node:14
WORKDIR /usr/src/app_name
COPY . .
RUN yarn
RUN yarn build:server
RUN yarn build:client
EXPOSE 1234
CMD yarn serve

82
fuse.ts
View file

@ -1,82 +0,0 @@
import { CSSPlugin, FuseBox, FuseBoxOptions, Sparky } from 'fuse-box';
import path = require('path');
import TsTransformClasscat from 'ts-transform-classcat';
import TsTransformInferno from 'ts-transform-inferno';
/**
* Some of FuseBoxOptions overrides by ts config (module, target, etc)
* https://fuse-box.org/page/working-with-targets
*/
let fuse: FuseBox;
const fuseOptions: FuseBoxOptions = {
homeDir: './src',
output: 'dist/$name.js',
sourceMaps: { inline: false, vendor: false },
/**
* Custom TypeScript Transformers (compile Inferno tsx to ts)
*/
transformers: {
before: [TsTransformClasscat(), TsTransformInferno()],
},
};
const fuseClientOptions: FuseBoxOptions = {
...fuseOptions,
plugins: [
/**
* https://fuse-box.org/page/css-resource-plugin
* Compile Sass {SassPlugin()}
* Make .css files modules-like (allow import them like modules) {CSSModules}
* Make .css files modules like and allow import it from node_modules too {CSSResourcePlugin}
* Use them all and bundle with {CSSPlugin}
* */
CSSPlugin(),
],
};
const fuseServerOptions: FuseBoxOptions = {
...fuseOptions,
};
Sparky.task('clean', () => {
/**Clean distribute (dist) folder */
Sparky.src('dist/').clean('dist/');
});
Sparky.task('config', () => {
fuse = FuseBox.init(fuseOptions);
fuse.dev();
});
Sparky.task('test', ['&clean', '&config'], () => {
fuse.bundle('client/bundle').test('[**/**.test.tsx]', null);
});
Sparky.task('client', () => {
fuse.opts = fuseClientOptions;
fuse
.bundle('client/bundle')
.target('browser@esnext')
.watch('client/**')
.hmr()
.instructions('> client/index.tsx');
});
Sparky.task('copy-assets', () =>
Sparky.src('**/**.*', { base: 'src/assets' }).dest('dist/assets')
);
Sparky.task('server', () => {
/**Workaround. Should be fixed */
fuse.opts = fuseServerOptions;
fuse
.bundle('server/bundle')
.watch('**')
.target('server@esnext')
.instructions('> [server/index.tsx]')
.completed(proc => {
proc.require({
// tslint:disable-next-line:no-shadowed-variable
close: ({ FuseBox }) => FuseBox.import(FuseBox.mainFile).shutdown(),
});
});
});
Sparky.task(
'dev',
['&clean', '&config', '&client', '&server', '&copy-assets'],
() => {
fuse.run();
}
);

52
package.json
View file

@ -4,16 +4,19 @@
"author": "Dessalines <tyhou13@gmx.com>",
"license": "AGPL-3.0",
"scripts": {
"build": "yarn run build:server && yarn run build:client",
"build:client": "webpack --env.platform=client",
"build:server": "webpack --env.platform=server",
"clean": "yarn run rimraf dist",
"dev": "nodemon --watch ./src/shared/components -e ts,tsx,css,scss --exec yarn run start",
"lint": "tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
"prebuild": "node generate_translations.js",
"prestart": "node generate_translations.js",
"start": "set NODE_ENV=development && node -r ts-node/register --inspect fuse.ts dev",
"test": "node -r ts-node/register --inspect fuse.ts test"
"prebuild": "yarn clean && node generate_translations.js",
"serve": "node dist/js/server.js",
"start": "yarn run build && yarn run serve"
},
"repository": "https://github.com/LemmyNet/lemmy-isomorphic-ui",
"dependencies": {
"@types/autosize": "^3.0.6",
"@types/node-fetch": "^2.5.7",
"@typescript-eslint/parser": "^4.0.1",
"autosize": "^4.0.2",
"choices.js": "^9.0.1",
"cookie-parser": "^1.4.3",
@ -41,40 +44,57 @@
"reconnecting-websocket": "^4.4.0",
"rxjs": "^6.5.5",
"serialize-javascript": "^4.0.0",
"terser": "^4.6.11",
"tippy.js": "^6.1.1",
"toastify-js": "^1.7.0",
"tributejs": "^5.1.3",
"ws": "^7.3.1"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.11.5",
"@babel/plugin-transform-typescript": "^7.11.0",
"@babel/preset-env": "7.11.5",
"@babel/preset-typescript": "^7.3.3",
"@types/autosize": "^3.0.6",
"@types/cookie-parser": "^1.4.1",
"@types/enzyme": "^3.1.10",
"@types/express": "^4.11.1",
"@types/jest": "^26.0.10",
"@types/node": "^14.6.0",
"@types/node-fetch": "^2.5.7",
"@types/serialize-javascript": "^4.0.0",
"autoprefixer": "^9.8.6",
"babel-loader": "^8.0.6",
"babel-plugin-inferno": "^6",
"bootstrap": "^4.5.2",
"classcat": "^4.1.0",
"enzyme": "^3.3.0",
"enzyme-adapter-inferno": "^1.3.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.2.2",
"eslint": "^7.5.0",
"eslint-plugin-jane": "^8.0.4",
"fuse-box": "3.7.1",
"fuse-test-runner": "^1.0.16",
"husky": "^4.2.5",
"inferno-devtools": "^7.4.3",
"inferno-test-utils": "^7.4.3",
"jest": "^26.4.2",
"jsdom": "16.4.0",
"jsdom-global": "3.0.2",
"lemmy-js-client": "^1.0.8",
"lint-staged": "^10.1.3",
"mini-css-extract-plugin": "^0.11.0",
"node-sass": "^4.12.0",
"nodemon": "^2.0.4",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"prettier": "^2.0.4",
"rimraf": "^3.0.2",
"sass-loader": "^10.0.1",
"sortpack": "^2.1.4",
"style-loader": "^1.2.1",
"terser": "^4.6.11",
"ts-node": "^9.0.0",
"ts-transform-classcat": "^1.0.0",
"ts-transform-inferno": "^4.0.3",
"typescript": "^4.0.2"
"typescript": "^4.0.2",
"webpack": "4.44.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "3.11.0",
"webpack-node-externals": "^2.5.2"
},
"engines": {
"node": ">=8.9.0"

14
src/client/index.tsx
View file

@ -1,21 +1,11 @@
import { Component } from 'inferno';
import { hydrate } from 'inferno-hydrate';
import { BrowserRouter } from 'inferno-router';
import { App } from '../shared/components/app';
/* import { initDevTools } from 'inferno-devtools'; */
declare global {
interface Window {
isoData: {
name: string;
};
}
}
const wrapper = (
<BrowserRouter>
<App />
<App site={window.isoData.site} />
</BrowserRouter>
);
/* initDevTools(); */
hydrate(wrapper, document.getElementById('root'));

59
src/server/index.tsx
View file

@ -1,35 +1,55 @@
import cookieParser = require('cookie-parser');
// import cookieParser = require('cookie-parser');
import serialize from 'serialize-javascript';
import express from 'express';
import { StaticRouter } from 'inferno-router';
import { renderToString } from 'inferno-server';
import { matchPath } from 'inferno-router';
import path = require('path');
import path from 'path';
import { App } from '../shared/components/app';
import { IsoData } from '../shared/interfaces';
import { routes } from '../shared/routes';
import IsomorphicCookie from 'isomorphic-cookie';
import { lemmyHttp, setAuth } from '../shared/utils';
import { GetSiteForm } from 'lemmy-js-client';
const server = express();
const port = 1234;
server.use(express.json());
server.use(express.urlencoded({ extended: false }));
server.use('/assets', express.static(path.resolve('./dist/assets')));
server.use('/static', express.static(path.resolve('./dist/client')));
server.use('/assets', express.static(path.resolve('./src/assets')));
server.use('/static', express.static(path.resolve('./dist')));
server.use(cookieParser());
// server.use(cookieParser());
server.get('/*', (req, res) => {
server.get('/*', async (req, res) => {
const activeRoute = routes.find(route => matchPath(req.url, route)) || {};
console.log(activeRoute);
const context = {} as any;
const isoData = {
name: 'fishing sux',
};
let auth: string = IsomorphicCookie.load('jwt', req);
let getSiteForm: GetSiteForm = {};
setAuth(getSiteForm, auth);
let promises: Promise<any>[] = [];
let siteData = lemmyHttp.getSite(getSiteForm);
promises.push(siteData);
if (activeRoute.fetchInitialData) {
promises.push(...activeRoute.fetchInitialData(auth, req.path));
}
let resolver = await Promise.all(promises);
let isoData: IsoData = {
path: req.path,
site: resolver[0],
routeData: resolver.slice(1, resolver.length),
};
console.log(activeRoute.path);
const wrapper = (
<StaticRouter location={req.url} context={context}>
<App />
<StaticRouter location={req.url} context={isoData}>
<App site={isoData.site} />
</StaticRouter>
);
if (context.url) {
@ -49,24 +69,15 @@ server.get('/*', (req, res) => {
<!-- Icons -->
<link rel="shortcut icon" type="image/svg+xml" href="/assets/favicon.svg" />
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" />
<!-- <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" /> -->
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="/assets/css/tribute.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/toastify.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/choices.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/tippy.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/themes/litely.min.css" id="default-light" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" type="text/css" href="/assets/css/themes/darkly.min.css" id="default-dark" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" />
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
<!-- Scripts -->
<script async src="/assets/libs/sortable/sortable.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
</head>
<body>
<div id='root'>${renderToString(wrapper)}</div>
<script src='./static/bundle.js'></script>
<script src='/static/js/client.js'></script>
</body>
</html>
`);

14
src/shared/components/app.tsx
View file

@ -6,19 +6,24 @@ import { routes } from '../../shared/routes';
import { Navbar } from '../../shared/components/navbar';
import { Footer } from '../../shared/components/footer';
import { Symbols } from '../../shared/components/symbols';
import { GetSiteResponse } from 'lemmy-js-client';
import './styles.scss';
export class App extends Component<any, any> {
export interface AppProps {
site: GetSiteResponse;
}
export class App extends Component<AppProps, any> {
constructor(props: any, context: any) {
super(props, context);
}
/* <Provider i18next={i18n}> */
render() {
return (
<>
<h1>Hi there!</h1>
{/* <Provider i18next={i18n}> */}
<div>
<Navbar />
<Navbar site={this.props.site} />
<div class="mt-4 p-0 fl-1">
<Switch>
{routes.map(({ path, exact, component: C, ...rest }) => (
@ -35,7 +40,6 @@ export class App extends Component<any, any> {
</div>
<Footer />
</div>
{/* </Provider> */}
</>
);
}

63
src/shared/components/communities.tsx
View file

@ -15,11 +15,17 @@ import {
Site,
} from 'lemmy-js-client';
import { WebSocketService } from '../services';
import { wsJsonToRes, toast, getPageFromProps } from '../utils';
import {
wsJsonToRes,
toast,
getPageFromProps,
isBrowser,
lemmyHttp,
setAuth,
} from '../utils';
import { CommunityLink } from './community-link';
import { i18n } from '../i18next';
declare const Sortable: any;
import { IsoData } from 'shared/interfaces';
const communityLimit = 100;
@ -46,20 +52,36 @@ export class Communities extends Component<any, CommunitiesState> {
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
() => console.log('complete')
);
let isoData: IsoData;
this.refetch();
WebSocketService.Instance.getSite();
if (isBrowser()) {
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
() => console.log('complete')
);
isoData = window.isoData;
} else {
isoData = this.context.router.staticContext;
}
this.state.site = isoData.site.site;
// Only fetch the data if coming from another route
if (isoData.path == this.context.router.route.match.path) {
this.state.communities = isoData.routeData[0].communities;
this.state.loading = false;
} else {
this.refetch();
}
}
componentWillUnmount() {
this.subscription.unsubscribe();
if (isBrowser()) {
this.subscription.unsubscribe();
}
}
static getDerivedStateFromProps(props: any): CommunitiesProps {
@ -226,6 +248,19 @@ export class Communities extends Component<any, CommunitiesState> {
WebSocketService.Instance.listCommunities(listCommunitiesForm);
}
static fetchInitialData(auth: string, path: string): Promise<any>[] {
let pathSplit = path.split('/');
let page = pathSplit[2] ? Number(pathSplit[2]) : 1;
let listCommunitiesForm: ListCommunitiesForm = {
sort: SortType.TopAll,
limit: communityLimit,
page,
};
setAuth(listCommunitiesForm, auth);
return [lemmyHttp.listCommunities(listCommunitiesForm)];
}
parseMessage(msg: WebSocketJsonResponse) {
console.log(msg);
let res = wsJsonToRes(msg);
@ -241,8 +276,6 @@ export class Communities extends Component<any, CommunitiesState> {
this.state.loading = false;
window.scrollTo(0, 0);
this.setState(this.state);
let table = document.querySelector('#community_table');
Sortable.initTable(table);
} else if (res.op == UserOperation.FollowCommunity) {
let data = res.data as CommunityResponse;
let found = this.state.communities.find(c => c.id == data.community.id);

12
src/shared/components/footer.tsx
View file

@ -48,28 +48,28 @@ export class Footer extends Component<any, FooterState> {
<li class="nav-item">
<span class="navbar-text">{this.state.version}</span>
</li>
<li class="nav-item">
<Link class="nav-link" to="/modlog">
<li className="nav-item">
<Link className="nav-link" to="/modlog">
{i18n.t('modlog')}
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/instances">
<Link className="nav-link" to="/instances">
{i18n.t('instances')}
</Link>
</li>
<li class="nav-item">
<a class="nav-link" href={'/docs/index.html'}>
<a className="nav-link" href={'/docs/index.html'}>
{i18n.t('docs')}
</a>
</li>
<li class="nav-item">
<Link class="nav-link" to="/sponsors">
<Link className="nav-link" to="/sponsors">
{i18n.t('donate')}
</Link>
</li>
<li class="nav-item">
<a class="nav-link" href={repoUrl}>
<a className="nav-link" href={repoUrl}>
{i18n.t('code')}
</a>
</li>

402
src/shared/components/navbar.tsx
View file

@ -33,6 +33,10 @@ import {
} from '../utils';
import { i18n } from '../i18next';
interface NavbarProps {
site: GetSiteResponse;
}
interface NavbarState {
isLoggedIn: boolean;
expanded: boolean;
@ -42,51 +46,25 @@ interface NavbarState {
unreadCount: number;
searchParam: string;
toggleSearch: boolean;
siteLoading: boolean;
siteRes: GetSiteResponse;
onSiteBanner?(url: string): any;
}
export class Navbar extends Component<any, NavbarState> {
export class Navbar extends Component<NavbarProps, NavbarState> {
private wsSub: Subscription;
private userSub: Subscription;
private unreadCountSub: Subscription;
private searchTextField: RefObject<HTMLInputElement>;
emptyState: NavbarState = {
isLoggedIn: false,
isLoggedIn: !!this.props.site.my_user,
unreadCount: 0,
replies: [],
mentions: [],
messages: [],
expanded: false,
siteRes: {
site: {
id: null,
name: null,
creator_id: null,
creator_name: null,
published: null,
number_of_users: null,
number_of_posts: null,
number_of_comments: null,
number_of_communities: null,
enable_downvotes: null,
open_registration: null,
enable_nsfw: null,
icon: null,
banner: null,
creator_preferred_username: null,
},
my_user: null,
admins: [],
banned: [],
online: null,
version: null,
federated_instances: null,
},
siteRes: this.props.site, // TODO this could probably go away
searchParam: '',
toggleSearch: false,
siteLoading: true,
};
constructor(props: any, context: any) {
@ -102,15 +80,31 @@ export class Navbar extends Component<any, NavbarState> {
() => console.log('complete')
);
WebSocketService.Instance.getSite();
// WebSocketService.Instance.getSite();
this.searchTextField = createRef();
}
// The login
if (this.props.site.my_user) {
UserService.Instance.user = this.props.site.my_user;
if (isBrowser()) {
WebSocketService.Instance.userJoin();
// On the first load, check the unreads
if (this.state.isLoggedIn == false) {
this.requestNotificationPermission();
this.fetchUnreads();
// setTheme(data.my_user.theme, true);
// i18n.changeLanguage(getLanguage());
}
}
}
}
componentDidMount() {
// Subscribe to jwt changes
if (isBrowser()) {
// Subscribe to jwt changes
this.userSub = UserService.Instance.jwtSub.subscribe(res => {
// A login
if (res !== undefined) {
@ -118,6 +112,7 @@ export class Navbar extends Component<any, NavbarState> {
} else {
this.state.isLoggedIn = false;
}
console.log('a new login');
WebSocketService.Instance.getSite();
this.setState(this.state);
});
@ -137,16 +132,16 @@ export class Navbar extends Component<any, NavbarState> {
}
updateUrl() {
/* const searchParam = this.state.searchParam; */
/* this.setState({ searchParam: '' }); */
/* this.setState({ toggleSearch: false }); */
/* if (searchParam === '') { */
/* this.context.router.history.push(`/search/`); */
/* } else { */
/* this.context.router.history.push( */
/* `/search/q/${searchParam}/type/All/sort/TopAll/page/1` */
/* ); */
/* } */
const searchParam = this.state.searchParam;
this.setState({ searchParam: '' });
this.setState({ toggleSearch: false });
if (searchParam === '') {
this.context.router.history.push(`/search/`);
} else {
this.context.router.history.push(
`/search/q/${searchParam}/type/All/sort/TopAll/page/1`
);
}
}
handleSearchSubmit(i: Navbar, event: any) {
@ -185,37 +180,27 @@ export class Navbar extends Component<any, NavbarState> {
// TODO class active corresponding to current page
navbar() {
let user = UserService.Instance.user;
let expandedClass = `${!this.state.expanded && 'collapse'} navbar-collapse`;
return (
<nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
<div class="container">
{!this.state.siteLoading ? (
<Link
title={this.state.siteRes.version}
class="d-flex align-items-center navbar-brand mr-md-3"
to="/"
>
{this.state.siteRes.site.icon && showAvatars() && (
<img
src={pictrsAvatarThumbnail(this.state.siteRes.site.icon)}
height="32"
width="32"
class="rounded-circle mr-2"
/>
)}
{this.state.siteRes.site.name}
</Link>
) : (
<div class="navbar-item">
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
</div>
)}
<Link
title={this.state.siteRes.version}
className="d-flex align-items-center navbar-brand mr-md-3"
to="/"
>
{this.state.siteRes.site.icon && showAvatars() && (
<img
src={pictrsAvatarThumbnail(this.state.siteRes.site.icon)}
height="32"
width="32"
class="rounded-circle mr-2"
/>
)}
{this.state.siteRes.site.name}
</Link>
{this.state.isLoggedIn && (
<Link
class="ml-auto p-0 navbar-toggler nav-link border-0"
className="ml-auto p-0 navbar-toggler nav-link border-0"
to="/inbox"
title={i18n.t('inbox')}
>
@ -238,161 +223,155 @@ export class Navbar extends Component<any, NavbarState> {
>
<span class="navbar-toggler-icon"></span>
</button>
{/* TODO this isn't working
className={`${!this.state.expanded && 'collapse'
} navbar-collapse`}
*/}
{!this.state.siteLoading && (
<div class="navbar-collapse">
<ul class="navbar-nav my-2 mr-auto">
<li class="nav-item">
<Link
class="nav-link"
to="/communities"
title={i18n.t('communities')}
>
{i18n.t('communities')}
</Link>
</li>
<li class="nav-item">
<Link
class="nav-link"
to={{
pathname: '/create_post',
state: { prevPath: this.currentLocation },
}}
title={i18n.t('create_post')}
>
{i18n.t('create_post')}
</Link>
</li>
<li class="nav-item">
<Link
class="nav-link"
to="/create_community"
title={i18n.t('create_community')}
>
{i18n.t('create_community')}
</Link>
</li>
<div
className={`${!this.state.expanded && 'collapse'} navbar-collapse`}
>
<ul class="navbar-nav my-2 mr-auto">
<li class="nav-item">
<Link
className="nav-link"
to="/communities"
title={i18n.t('communities')}
>
{i18n.t('communities')}
</Link>
</li>
<li class="nav-item">
<Link
className="nav-link"
to={{
pathname: '/create_post',
state: { prevPath: this.currentLocation },
}}
title={i18n.t('create_post')}
>
{i18n.t('create_post')}
</Link>
</li>
<li class="nav-item">
<Link
className="nav-link"
to="/create_community"
title={i18n.t('create_community')}
>
{i18n.t('create_community')}
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/sponsors"
title={i18n.t('donate_to_lemmy')}
>
<svg class="icon">
<use xlinkHref="#icon-coffee"></use>
</svg>
</Link>
</li>
</ul>
<ul class="navbar-nav my-2">
{this.canAdmin && (
<li className="nav-item">
<Link
class="nav-link"
to="/sponsors"
title={i18n.t('donate_to_lemmy')}
className="nav-link"
to={`/admin`}
title={i18n.t('admin_settings')}
>
<svg class="icon">
<use xlinkHref="#icon-coffee"></use>
<use xlinkHref="#icon-settings"></use>
</svg>
</Link>
</li>
</ul>
<ul class="navbar-nav my-2">
{this.canAdmin && (
)}
</ul>
{!this.context.router.history.location.pathname.match(
/^\/search/
) && (
<form
class="form-inline"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<input
class={`form-control mr-0 search-input ${
this.state.toggleSearch ? 'show-input' : 'hide-input'
}`}
onInput={linkEvent(this, this.handleSearchParam)}
value={this.state.searchParam}
ref={this.searchTextField}
type="text"
placeholder={i18n.t('search')}
onBlur={linkEvent(this, this.handleSearchBlur)}
></input>
<button
name="search-btn"
onClick={linkEvent(this, this.handleSearchBtn)}
class="px-1 btn btn-link"
style="color: var(--gray)"
>
<svg class="icon">
<use xlinkHref="#icon-search"></use>
</svg>
</button>
</form>
)}
{this.state.isLoggedIn ? (
<>
<ul class="navbar-nav my-2">
<li className="nav-item">
<Link
class="nav-link"
to={`/admin`}
title={i18n.t('admin_settings')}
className="nav-link"
to="/inbox"
title={i18n.t('inbox')}
>
<svg class="icon">
<use xlinkHref="#icon-settings"></use>
<use xlinkHref="#icon-bell"></use>
</svg>
</Link>
</li>
)}
</ul>
{!this.context.router.history.location.pathname.match(
/^\/search/
) && (
<form
class="form-inline"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
{/* TODO No idea why, but this class here fails
class={`form-control mr-0 search-input ${
this.state.toggleSearch ? 'show-input' : 'hide-input'
}`}
*/}
<input
onInput={linkEvent(this, this.handleSearchParam)}
value={this.state.searchParam}
type="text"
placeholder={i18n.t('search')}
onBlur={linkEvent(this, this.handleSearchBlur)}
></input>
<button
name="search-btn"
onClick={linkEvent(this, this.handleSearchBtn)}
class="px-1 btn btn-link"
style="color: var(--gray)"
>
<svg class="icon">
<use xlinkHref="#icon-search"></use>
</svg>
</button>
</form>
)}
{this.state.isLoggedIn ? (
<>
<ul class="navbar-nav my-2">
<li className="nav-item">
<Link
class="nav-link"
to="/inbox"
title={i18n.t('inbox')}
>
<svg class="icon">
<use xlinkHref="#icon-bell"></use>
</svg>
{this.state.unreadCount > 0 && (
<span class="ml-1 badge badge-light">
{this.state.unreadCount}
</span>
)}
</Link>
</li>
</ul>
<ul class="navbar-nav">
<li className="nav-item">
<Link
class="nav-link"
to={`/u/${user.name}`}
title={i18n.t('settings')}
>
<span>
{user.avatar && showAvatars() && (
<img
src={pictrsAvatarThumbnail(user.avatar)}
height="32"
width="32"
class="rounded-circle mr-2"
/>
)}
{user.preferred_username
? user.preferred_username
: user.name}
{this.state.unreadCount > 0 && (
<span class="ml-1 badge badge-light">
{this.state.unreadCount}
</span>
</Link>
</li>
</ul>
</>
) : (
<ul class="navbar-nav my-2">
<li className="ml-2 nav-item">
<Link
class="btn btn-success"
to="/login"
title={i18n.t('login_sign_up')}
>
{i18n.t('login_sign_up')}
)}
</Link>
</li>
</ul>
)}
</div>
)}
<ul class="navbar-nav">
<li className="nav-item">
<Link
className="nav-link"
to={`/u/${user.name}`}
title={i18n.t('settings')}
>
<span>
{user.avatar && showAvatars() && (
<img
src={pictrsAvatarThumbnail(user.avatar)}
height="32"
width="32"
class="rounded-circle mr-2"
/>
)}
{user.preferred_username
? user.preferred_username
: user.name}
</span>
</Link>
</li>
</ul>
</>
) : (
<ul class="navbar-nav my-2">
<li className="ml-2 nav-item">
<Link
className="btn btn-success"
to="/login"
title={i18n.t('login_sign_up')}
>
{i18n.t('login_sign_up')}
</Link>
</li>
</ul>
)}
</div>
</div>
</nav>
);
@ -405,7 +384,6 @@ export class Navbar extends Component<any, NavbarState> {
parseMessage(msg: WebSocketJsonResponse) {
let res = wsJsonToRes(msg);
console.log(res);
if (msg.error) {
if (msg.error == 'not_logged_in') {
UserService.Instance.logout();
@ -462,7 +440,10 @@ export class Navbar extends Component<any, NavbarState> {
notifyPrivateMessage(data.message, this.context.router);
}
}
} else if (res.op == UserOperation.GetSite) {
}
// TODO all this needs to be moved
else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.siteRes = data;
@ -480,10 +461,9 @@ export class Navbar extends Component<any, NavbarState> {
}
this.state.isLoggedIn = true;
}
}
this.state.siteLoading = false;
this.setState(this.state);
this.setState(this.state);
}
}
fetchUnreads() {

53
src/shared/components/sponsors.tsx
View file

@ -1,17 +1,10 @@
import { Component } from 'inferno';
import { Helmet } from 'inferno-helmet';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import { WebSocketService } from '../services';
import {
GetSiteResponse,
Site,
WebSocketJsonResponse,
UserOperation,
} from 'lemmy-js-client';
import { Site } from 'lemmy-js-client';
import { i18n } from '../i18next';
import { T } from 'inferno-i18next';
import { repoUrl, wsJsonToRes, toast } from '../utils';
import { repoUrl, isBrowser } from '../utils';
import { IsoData } from 'shared/interfaces';
interface SilverUser {
name: string;
@ -51,30 +44,27 @@ interface SponsorsState {
}
export class Sponsors extends Component<any, SponsorsState> {
private subscription: Subscription;
private emptyState: SponsorsState = {
site: undefined,
};
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
() => console.log('complete')
);
WebSocketService.Instance.getSite();
let isoData: IsoData;
if (isBrowser()) {
isoData = window.isoData;
} else {
isoData = this.context.router.staticContext;
}
this.state.site = isoData.site.site;
}
componentDidMount() {
window.scrollTo(0, 0);
}
componentWillUnmount() {
this.subscription.unsubscribe();
if (isBrowser()) {
window.scrollTo(0, 0);
}
}
get documentTitle(): string {
@ -103,9 +93,11 @@ export class Sponsors extends Component<any, SponsorsState> {
<div>
<h5>{i18n.t('donate_to_lemmy')}</h5>
<p>
{/* TODO
<T i18nKey="sponsor_message">
#<a href={repoUrl}>#</a>
</T>
*/}
</p>
<a class="btn btn-secondary" href="https://liberapay.com/Lemmy/">
{i18n.t('support_on_liberapay')}
@ -195,17 +187,4 @@ export class Sponsors extends Component<any, SponsorsState> {
</div>
);
}
parseMessage(msg: WebSocketJsonResponse) {
console.log(msg);
let res = wsJsonToRes(msg);
if (msg.error) {
toast(i18n.t(msg.error), 'danger');
return;
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.site = data.site;
this.setState(this.state);
}
}
}

23
src/shared/components/styles.scss Normal file
View file

@ -0,0 +1,23 @@
// import '../../assets/css/themes/darkly.min.css';
@import '../../assets/css/tribute.css';
@import '../../assets/css/toastify.css';
@import '../../assets/css/choices.min.css';
@import '../../assets/css/tippy.css';
@import '../../assets/css/main.css';
// Bootstrap theme
@import "../../assets/css/themes/_variables.darkly.scss";
@import "../../../node_modules/bootstrap/scss/bootstrap";
// // Required
// @import "../../../node_modules/bootstrap/scss/functions";
// @import "../../../node_modules/bootstrap/scss/variables";
// @import "../../../node_modules/bootstrap/scss/mixins";
// // Optional
// @import "../../../node_modules/bootstrap/scss/reboot";
// @import "../../../node_modules/bootstrap/scss/type";
// @import "../../../node_modules/bootstrap/scss/images";
// @import "../../../node_modules/bootstrap/scss/code";
// @import "../../../node_modules/bootstrap/scss/grid";

1
src/shared/env.ts
View file

@ -13,3 +13,4 @@ const host = '192.168.50.60';
const port = 8536;
const endpoint = `${host}:${port}`;
export const wsUri = `ws://${endpoint}/api/v1/ws`;
export const httpUri = `http://${endpoint}/api/v1`;

15
src/shared/interfaces.ts
View file

@ -1,3 +1,18 @@
import { GetSiteResponse } from 'lemmy-js-client';
export interface IsoData {
path: string;
routeData: any[];
site: GetSiteResponse;
// communities?: ListCommunitiesResponse;
}
declare global {
interface Window {
isoData: IsoData;
}
}
export enum CommentSortType {
Hot,
Top,

16
src/shared/routes.ts
View file

@ -1,8 +1,5 @@
import { BrowserRouter, Route, Switch } from 'inferno-router';
import { IRouteProps } from 'inferno-router/dist/Route';
import { Main } from './components/main';
import { Navbar } from './components/navbar';
import { Footer } from './components/footer';
import { Login } from './components/login';
import { CreatePost } from './components/create-post';
import { CreateCommunity } from './components/create-community';
@ -20,7 +17,11 @@ import { Search } from './components/search';
import { Sponsors } from './components/sponsors';
import { Instances } from './components/instances';
export const routes: IRouteProps[] = [
interface IRoutePropsWithFetch extends IRouteProps {
fetchInitialData?(auth: string, path: string): Promise<any>[];
}
export const routes: IRoutePropsWithFetch[] = [
{ exact: true, path: `/`, component: Main },
{
path: `/home/data_type/:data_type/listing_type/:listing_type/sort/:sort/page/:page`,
@ -36,8 +37,13 @@ export const routes: IRouteProps[] = [
{
path: `/communities/page/:page`,
component: Communities,
fetchInitialData: (auth, path) => Communities.fetchInitialData(auth, path),
},
{
path: `/communities`,
component: Communities,
fetchInitialData: (auth, path) => Communities.fetchInitialData(auth, path),
},
{ path: `/communities`, component: Communities },
{
path: `/post/:id/comment/:comment_id`,
component: Post,

4
src/shared/services/UserService.ts
View file

@ -24,7 +24,7 @@ export class UserService {
if (jwt) {
this.setClaims(jwt);
} else {
setTheme();
// setTheme();
console.log('No JWT cookie found.');
}
}
@ -39,7 +39,7 @@ export class UserService {
this.claims = undefined;
this.user = undefined;
IsomorphicCookie.remove('jwt');
setTheme();
// setTheme();
this.jwtSub.next();
console.log('Logged out.');
}

2
src/shared/services/WebSocketService.ts
View file

@ -393,7 +393,7 @@ export class WebSocketService {
this.ws.send(this.client.saveSiteConfig(form));
}
private setAuth(obj: any, throwErr: boolean = true) {
public setAuth(obj: any, throwErr: boolean = true) {
obj.auth = UserService.Instance.auth;
if (obj.auth == null && throwErr) {
toast(i18n.t('not_logged_in'), 'danger');

49
src/shared/utils.ts
View file

@ -42,8 +42,11 @@ import {
SearchResponse,
CommentResponse,
PostResponse,
LemmyHttp,
} from 'lemmy-js-client';
import { httpUri } from './env';
import { CommentSortType, DataType } from './interfaces';
import { UserService, WebSocketService } from './services';
@ -74,6 +77,8 @@ export const postRefetchSeconds: number = 60 * 1000;
export const fetchLimit: number = 20;
export const mentionDropdownFetchLimit = 10;
export const lemmyHttp = new LemmyHttp(httpUri);
export const languages = [
{ code: 'ca', name: 'Català' },
{ code: 'en', name: 'English' },
@ -450,18 +455,18 @@ export function setTheme(theme: string = 'darkly', loggedIn: boolean = false) {
// }
}
export function loadCss(id: string, loc: string) {
if (!document.getElementById(id)) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = id;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = loc;
link.media = 'all';
head.appendChild(link);
}
}
// export function loadCss(id: string, loc: string) {
// if (!document.getElementById(id)) {
// var head = document.getElementsByTagName('head')[0];
// var link = document.createElement('link');
// link.id = id;
// link.rel = 'stylesheet';
// link.type = 'text/css';
// link.href = loc;
// link.media = 'all';
// head.appendChild(link);
// }
// }
export function objectFlip(obj: any) {
const ret = {};
@ -828,10 +833,7 @@ export function getPageFromProps(props: any): number {
// return props.match.params.page ? Number(props.match.params.page) : 1;
}
export function editCommentRes(
data: CommentResponse,
comments: Comment[]
) {
export function editCommentRes(data: CommentResponse, comments: Comment[]) {
let found = comments.find(c => c.id == data.comment.id);
if (found) {
found.content = data.comment.content;
@ -844,10 +846,7 @@ export function editCommentRes(
}
}
export function saveCommentRes(
data: CommentResponse,
comments: Comment[]
) {
export function saveCommentRes(data: CommentResponse, comments: Comment[]) {
let found = comments.find(c => c.id == data.comment.id);
if (found) {
found.saved = data.comment.saved;
@ -907,9 +906,7 @@ export function editPostRes(data: PostResponse, post: Post) {
}
}
export function commentsToFlatNodes(
comments: Comment[]
): CommentNodeI[] {
export function commentsToFlatNodes(comments: Comment[]): CommentNodeI[] {
let nodes: CommentNodeI[] = [];
for (let comment of comments) {
nodes.push({ comment: comment });
@ -1109,3 +1106,9 @@ export function siteBannerCss(banner: string): string {
export function isBrowser() {
return typeof window !== 'undefined';
}
export function setAuth(obj: any, auth: string) {
if (auth) {
obj.auth = auth;
}
}

37
tsconfig.json
View file

@ -1,14 +1,27 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "esnext",
"sourceMap": true,
"inlineSources": true,
"jsx": "preserve",
"importHelpers": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true
},
"exclude": ["node_modules", "fuse.ts"]
"compilerOptions": {
"pretty": true,
"target": "esnext",
"module": "esnext",
"allowSyntheticDefaultImports": true,
"preserveConstEnums": true,
"sourceMap": true,
"moduleResolution": "node",
"lib": ["es2017", "dom"],
"types": [
"inferno"
],
"jsx": "preserve",
"noUnusedLocals": true,
"baseUrl": "./src",
"noEmit": true,
"skipLibCheck": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
"include": [
"src/**/*",
"node_modules/inferno/dist/index.d.ts"
]
}

70
webpack.config.js Normal file
View file

@ -0,0 +1,70 @@
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const nodeExternals = require('webpack-node-externals');
const path = require('path');
module.exports = function (env, _) {
const base = {
// mode: "production",
mode: 'development',
entry: './src/server/index.tsx', // Point to main file
output: {
path: path.resolve(process.cwd(), 'dist'),
filename: 'js/server.js',
publicPath: '/',
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
performance: {
hints: false,
},
module: {
rules: [
{
test: /\.(scss|css)$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () {
// post css plugins, can be exported to postcss.config.js
return [require('precss'), require('autoprefixer')];
},
},
},
'sass-loader',
],
},
{
test: /\.(js|jsx|tsx|ts)$/, // All ts and tsx files will be process by
loaders: 'babel-loader', // first babel-loader, then ts-loader
exclude: /node_modules/, // ignore node_modules
},
],
},
devServer: {
host: '0.0.0.0',
contentBase: 'src/',
historyApiFallback: true,
},
plugins: [
new MiniCssExtractPlugin({
filename: 'styles/styles.css',
}),
],
};
// server-specific configuration
if (env.platform === 'server') {
base.target = 'node';
base.externals = [nodeExternals()];
}
// client-specific configurations
if (env.platform === 'client') {
base.entry = './src/client/index.tsx';
base.output.filename = 'js/client.js';
}
return base;
};

5002
yarn.lock
View file

File diff suppressed because it is too large Load diff