jeena/lemmy-ui
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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;
}
}