LemmyNet
/
lemmy-ui
mirror of https://github.com/LemmyNet/lemmy-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Better resolver, communities mostly done.

This commit is contained in:
Dessalines 2020-09-07 10:32:07 -05:00
parent 241ef72290
commit cde3c266f2
7 changed files with 82 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/server/index.tsx
View File

@ -10,7 +10,7 @@ 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';
import { GetSiteForm, GetSiteResponse } from 'lemmy-js-client';
const server = express();
const port = 1234;
@ -38,15 +38,23 @@ server.get('/*', async (req, res) => {
}
let resolver = await Promise.all(promises);
let site: GetSiteResponse = resolver[0];
let routeData = resolver.slice(1, resolver.length);
let acceptLang = req.headers['accept-language'].split(',')[0];
let lang = !!site.my_user
? site.my_user.lang == 'browser'
? acceptLang
: 'en'
: acceptLang;
let isoData: IsoData = {
path: req.path,
site: resolver[0],
routeData: resolver.slice(1, resolver.length),
site,
routeData,
lang,
};
console.log(activeRoute.path);
const wrapper = (
<StaticRouter location={req.url} context={isoData}>
<App site={isoData.site} />

41
src/shared/components/app.tsx
View File

@ -1,7 +1,7 @@
import { Component } from 'inferno';
import { Route, Switch } from 'inferno-router';
/* import { Provider } from 'inferno-i18next'; */
/* import { i18n } from './i18next'; */
import { Provider } from 'inferno-i18next';
import { i18n } from '../i18next';
import { routes } from '../../shared/routes';
import { Navbar } from '../../shared/components/navbar';
import { Footer } from '../../shared/components/footer';
@ -18,28 +18,29 @@ export class App extends Component<AppProps, any> {
super(props, context);
}
/* <Provider i18next={i18n}> */
render() {
return (
<>
<div>
<Navbar site={this.props.site} />
<div class="mt-4 p-0 fl-1">
<Switch>
{routes.map(({ path, exact, component: C, ...rest }) => (
<Route
key={path}
path={path}
exact={exact}
render={props => <C {...props} {...rest} />}
/>
))}
{/* <Route render={(props) => <NoMatch {...props} />} /> */}
</Switch>
<Symbols />
<Provider i18next={i18n}>
<div>
<Navbar site={this.props.site} />
<div class="mt-4 p-0 fl-1">
<Switch>
{routes.map(({ path, exact, component: C, ...rest }) => (
<Route
key={path}
path={path}
exact={exact}
render={props => <C {...props} {...rest} />}
/>
))}
{/* <Route render={(props) => <NoMatch {...props} />} /> */}
</Switch>
<Symbols />
</div>
<Footer />
</div>
<Footer />
</div>
</Provider>
</>
);
}

41
src/shared/components/communities.tsx
View File

@ -1,7 +1,6 @@
import { Component, linkEvent } from 'inferno';
import { Helmet } from 'inferno-helmet';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import {
UserOperation,
Community,
@ -11,7 +10,6 @@ import {
ListCommunitiesForm,
SortType,
WebSocketJsonResponse,
GetSiteResponse,
Site,
} from 'lemmy-js-client';
import { WebSocketService } from '../services';
@ -22,10 +20,11 @@ import {
isBrowser,
lemmyHttp,
setAuth,
setIsoData,
wsSubscribe,
} from '../utils';
import { CommunityLink } from './community-link';
import { i18n } from '../i18next';
import { IsoData } from 'shared/interfaces';
const communityLimit = 100;
@ -42,36 +41,24 @@ interface CommunitiesProps {
export class Communities extends Component<any, CommunitiesState> {
private subscription: Subscription;
private isoData = setIsoData(this.context);
private emptyState: CommunitiesState = {
communities: [],
loading: true,
page: getPageFromProps(this.props),
site: undefined,
site: this.isoData.site.site,
};
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
let isoData: IsoData;
this.parseMessage = this.parseMessage.bind(this);
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;
this.subscription = wsSubscribe(this.parseMessage);
// 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;
if (this.isoData.path == this.context.router.route.match.url) {
this.state.communities = this.isoData.routeData[0].communities;
this.state.loading = false;
} else {
this.refetch();
@ -98,11 +85,7 @@ export class Communities extends Component<any, CommunitiesState> {
}
get documentTitle(): string {
if (this.state.site) {
return `${i18n.t('communities')} - ${this.state.site.name}`;
} else {
return 'Lemmy';
}
return `${i18n.t('communities')} - ${this.state.site.name}`;
}
render() {
@ -250,7 +233,7 @@ export class Communities extends Component<any, CommunitiesState> {
static fetchInitialData(auth: string, path: string): Promise<any>[] {
let pathSplit = path.split('/');
let page = pathSplit[2] ? Number(pathSplit[2]) : 1;
let page = pathSplit[3] ? Number(pathSplit[3]) : 1;
let listCommunitiesForm: ListCommunitiesForm = {
sort: SortType.TopAll,
limit: communityLimit,
@ -282,10 +265,6 @@ export class Communities extends Component<any, CommunitiesState> {
found.subscribed = data.community.subscribed;
found.number_of_subscribers = data.community.number_of_subscribers;
this.setState(this.state);
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.site = data.site;
this.setState(this.state);
}
}
}

43
src/shared/components/navbar.tsx
View File

@ -46,7 +46,6 @@ interface NavbarState {
unreadCount: number;
searchParam: string;
toggleSearch: boolean;
siteRes: GetSiteResponse;
onSiteBanner?(url: string): any;
}
@ -62,7 +61,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
mentions: [],
messages: [],
expanded: false,
siteRes: this.props.site, // TODO this could probably go away
searchParam: '',
toggleSearch: false,
};
@ -80,14 +78,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
() => console.log('complete')
);
// WebSocketService.Instance.getSite();
this.searchTextField = createRef();
}
// The login
// TODO this needs some work
if (this.props.site.my_user) {
console.log(this.props.site.my_user);
UserService.Instance.user = this.props.site.my_user;
// i18n.changeLanguage(getLanguage());
if (isBrowser()) {
WebSocketService.Instance.userJoin();
@ -97,6 +96,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
this.fetchUnreads();
// setTheme(data.my_user.theme, true);
// i18n.changeLanguage(getLanguage());
// i18n.changeLanguage('de');
}
}
}
@ -113,7 +113,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
this.state.isLoggedIn = false;
}
console.log('a new login');
WebSocketService.Instance.getSite();
// WebSocketService.Instance.getSite();
this.setState(this.state);
});
@ -184,19 +184,19 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
<div class="container">
<Link
title={this.state.siteRes.version}
title={this.props.site.version}
className="d-flex align-items-center navbar-brand mr-md-3"
to="/"
>
{this.state.siteRes.site.icon && showAvatars() && (
{this.props.site.site.icon && showAvatars() && (
<img
src={pictrsAvatarThumbnail(this.state.siteRes.site.icon)}
src={pictrsAvatarThumbnail(this.props.site.site.icon)}
height="32"
width="32"
class="rounded-circle mr-2"
/>
)}
{this.state.siteRes.site.name}
{this.props.site.site.name}
</Link>
{this.state.isLoggedIn && (
<Link
@ -441,29 +441,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
}
}
}
// TODO all this needs to be moved
else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.siteRes = data;
// The login
if (data.my_user) {
UserService.Instance.user = data.my_user;
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());
}
this.state.isLoggedIn = true;
}
this.setState(this.state);
}
}
fetchUnreads() {
@ -514,7 +491,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
get canAdmin(): boolean {
return (
UserService.Instance.user &&
this.state.siteRes.admins
this.props.site.admins
.map(a => a.id)
.includes(UserService.Instance.user.id)
);

2
src/shared/components/sponsors.tsx
View File

@ -93,11 +93,9 @@ 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')}

2
src/shared/interfaces.ts
View File

@ -4,6 +4,8 @@ export interface IsoData {
path: string;
routeData: any[];
site: GetSiteResponse;
// Lang and theme
lang: string;
// communities?: ListCommunitiesResponse;
}

30
src/shared/utils.ts
View File

@ -47,7 +47,7 @@ import {
import { httpUri } from './env';
import { CommentSortType, DataType } from './interfaces';
import { CommentSortType, DataType, IsoData } from './interfaces';
import { UserService, WebSocketService } from './services';
// import Tribute from 'tributejs';
@ -60,6 +60,8 @@ import emojiShortName from 'emoji-short-name';
import Toastify from 'toastify-js';
import tippy from 'tippy.js';
import moment from 'moment';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
export const favIconUrl = '/static/assets/favicon.svg';
export const favIconPngUrl = '/static/assets/apple-touch-icon.png';
@ -828,9 +830,7 @@ export function getSortTypeFromProps(props: any): SortType {
}
export function getPageFromProps(props: any): number {
// TODO
return 1;
// return props.match.params.page ? Number(props.match.params.page) : 1;
return props.match.params.page ? Number(props.match.params.page) : 1;
}
export function editCommentRes(data: CommentResponse, comments: Comment[]) {
@ -1112,3 +1112,25 @@ export function setAuth(obj: any, auth: string) {
obj.auth = auth;
}
}
export function setIsoData(context: any): IsoData {
if (isBrowser()) {
return window.isoData;
} else {
return context.router.staticContext;
}
}
export function wsSubscribe(parseMessage: any): Subscription {
if (isBrowser()) {
return WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => parseMessage(msg),
err => console.error(err),
() => console.log('complete')
);
} else {
return null;
}
}