ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-15 01:52:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2272 from urbit/m/link-fe-bugfix

Browse Source 
link fe: various fixes causing improvements
This commit is contained in:
Fang 2020-02-11 18:51:48 +01:00 committed by GitHub
commit 2c436655a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 55 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pkg/interface/link/src/js/components/lib/channel-sidebar.js
View File

@ -10,7 +10,7 @@ export class ChannelsSidebar extends Component {
const { props, state } = this;
let privateChannel =
Object.keys(props.paths)
Object.keys(props.groups)
.filter((path) => {
return (path === "/~/default")
})
@ -25,7 +25,7 @@ export class ChannelsSidebar extends Component {
<ChannelsItem
key={path}
link={path}
members={props.paths[path]}
memberList={props.groups[path]}
selected={selected}
linkCount={linkCount}
unseenCount={unseenCount}
@ -34,7 +34,7 @@ export class ChannelsSidebar extends Component {
})
let channelItems =
Object.keys(props.paths)
Object.keys(props.groups)
.filter((path) => {
return (!path.startsWith("/~/"))
})
@ -45,14 +45,18 @@ export class ChannelsSidebar extends Component {
let selected = (props.selected === path);
let linkCount = !!props.links[path] ? props.links[path].totalItems : 0;
const unseenCount = !!props.links[path]
? props.links[path].unseenCount
: linkCount
return (
<ChannelsItem
key={path}
link={path}
members={props.paths[path]}
memberList={props.groups[path]}
selected={selected}
linkCount={linkCount}
unseenCount={unseenCount}
name={name}/>
)
});

4
pkg/interface/link/src/js/components/lib/channels-item.js
View File

@ -10,7 +10,9 @@ export class ChannelsItem extends Component {
? "bg-gray5 bg-gray1-d b--gray4 b--gray2-d"
: "b--transparent";
let memberCount = Object.keys(props.members).length;
let memberCount = props.memberList
? props.memberList.size
: 0;
const unseenCount = props.unseenCount > 0
? <span className="green2">{" " + props.unseenCount + " unread"}</span>
: null;

2
pkg/interface/link/src/js/components/lib/comment-item.js
View File

@ -41,7 +41,7 @@ export class CommentItem extends Component {
/>
<p className="gray2 f9 flex items-center ml2">
<span className={"black white-d " + props.nameClass}>
{((props.nickname) ? props.nickname : props.ship)}
{props.nickname ? props.nickname : '~'+props.ship}
</span>
<span className="ml2">
{this.state.timeSinceComment}

16
pkg/interface/link/src/js/components/lib/comments.js
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react'
import { CommentItem } from './comment-item';
import { CommentsPagination } from './comments-pagination';
import { uxToHex } from '../../lib/util';
import { getContactDetails } from '../../lib/util';
import { api } from '../../api';
export class Comments extends Component {
@ -48,20 +48,14 @@ export class Comments extends Component {
let commentObj = commentsPage[entry]
let { ship, time, udon } = commentObj;
let members = !!props.members
? props.members
: {};
let contacts = !!props.contacts
? props.contacts
: {};
let nickname = !!members[ship]
? members[ship].nickname
: "";
const {nickname, color} = getContactDetails(contacts[ship]);
let nameClass = nickname ? "inter" : "mono";
let color = !!members[ship]
? uxToHex(members[ship].color)
: "000000";
return(
<CommentItem
key={time}

5
pkg/interface/link/src/js/components/link.js
View File

@ -5,6 +5,7 @@ import { SidebarSwitcher } from '/components/lib/icons/icon-sidebar-switch.js';
import { api } from '../api';
import { Route, Link } from 'react-router-dom';
import { Comments } from './lib/comments';
import { getContactDetails } from '../lib/util';
export class LinkDetail extends Component {
constructor(props) {
@ -71,7 +72,7 @@ export class LinkDetail extends Component {
let comments = commentCount + " comment" + (commentCount === 1 ? "" : "s");
let nickname = !!props.members[ship] ? props.members[ship].nickname : "";
const { nickname } = getContactDetails(props.contacts[ship]);
let activeClasses = this.state.comment
? "black b--black pointer"
@ -137,7 +138,7 @@ export class LinkDetail extends Component {
key={props.groupPath + props.commentPage}
comments={props.comments}
commentPage={props.commentPage}
members={props.members}
contacts={props.contacts}
popout={props.popout}
url={props.url}
linkPage={props.page}

21
pkg/interface/link/src/js/components/links-list.js
View File

@ -6,8 +6,7 @@ import { LinkItem } from '/components/lib/link-item.js';
import { LinkSubmit } from '/components/lib/link-submit.js';
import { Pagination } from '/components/lib/pagination.js';
//TODO look at uxToHex wonky functionality
import { uxToHex } from '../lib/util';
import { getContactDetails } from '../lib/util';
//TODO Avatar support once it's in
export class Links extends Component {
@ -62,23 +61,7 @@ export class Links extends Component {
? props.comments[url].totalItems
: linksObj[linkIndex].commentCount || 0;
if (!props.members[ship]) {
members[ship] = {'nickname': '', 'avatar': 'TODO', 'color': '0x0'};
} else {
members = props.members;
}
let color = uxToHex('0x0');
let nickname = "";
// restore this to props.members
if (members[ship].nickname) {
nickname = members[ship].nickname;
}
if (members[ship].color !== "") {
color = uxToHex(members[ship].color);
}
const {nickname, color} = getContactDetails(props.contacts[ship]);
return (
<LinkItem

17
pkg/interface/link/src/js/components/root.js
View File

@ -30,7 +30,8 @@ export class Root extends Component {
render() {
const { props, state } = this;
let paths = !!state.contacts ? state.contacts : {};
let contacts = !!state.contacts ? state.contacts : {};
const groups = !!state.groups ? state.groups : {};
let links = !!state.links ? state.links : {};
let comments = !!state.comments ? state.comments : {};
@ -43,7 +44,7 @@ export class Root extends Component {
return (
<Skeleton
active="channels"
paths={paths}
groups={groups}
rightPanelHide={true}
sidebarShown={true}
links={links}>
@ -63,7 +64,7 @@ export class Root extends Component {
let groupPath =
`/${props.match.params.ship}/${props.match.params.channel}`;
let groupMembers = paths[groupPath] || {};
let contactDetails = contacts[groupPath] || {};
let page = props.match.params.page || 0;
@ -84,7 +85,7 @@ export class Root extends Component {
return (
<Skeleton
spinner={state.spinner}
paths={paths}
groups={groups}
active="links"
selected={groupPath}
sidebarShown={state.sidebarShown}
@ -93,7 +94,7 @@ export class Root extends Component {
links={links}>
<Links
{...props}
members={groupMembers}
contacts={contactDetails}
links={channelLinks}
comments={channelComments}
seen={channelSeen}
@ -113,7 +114,7 @@ export class Root extends Component {
let popout = props.match.url.includes("/popout/");
let groupMembers = paths[groupPath] || {};
let contactDetails = contacts[groupPath] || {};
let index = props.match.params.index || 0;
let page = props.match.params.page || 0;
@ -133,7 +134,7 @@ export class Root extends Component {
return (
<Skeleton
spinner={state.spinner}
paths={paths}
groups={groups}
active="links"
selected={groupPath}
sidebarShown={state.sidebarShown}
@ -145,7 +146,7 @@ export class Root extends Component {
page={page}
url={url}
linkIndex={index}
members={groupMembers}
contacts={contactDetails}
groupPath={groupPath}
popout={popout}
sidebarShown={state.sidebarShown}

2
pkg/interface/link/src/js/components/skeleton.js
View File

@ -27,7 +27,7 @@ export class Skeleton extends Component {
<div className={`cf w-100 h-100 flex ` + popoutBorder}>
<ChannelsSidebar
popout={popout}
paths={this.props.paths}
groups={this.props.groups}
active={this.props.active}
selected={this.props.selected}
sidebarShown={this.props.sidebarShown}

13
pkg/interface/link/src/js/lib/util.js
View File

@ -14,6 +14,17 @@ export function uuid() {
return str.slice(0,-1);
}
export function getContactDetails(contact) {
contact = contact || {
'nickname': '',
'avatar': 'TODO',
'color': '0x0'
};
const nickname = contact.nickname || '';
const color = uxToHex(contact.color || '0x0');
return {nickname, color};
}
// encodes string into base64url,
// by encoding into base64 and replacing non-url-safe characters.
//
@ -117,6 +128,8 @@ export function deSig(ship) {
return ship.replace('~', '');
}
//TODO look at uxToHex wonky functionality
//TODO what does "wonky functionality" refer to?
export function uxToHex(ux) {
let value = ux.substr(2).replace('.', '').padStart(6, '0');
return value;

11
pkg/interface/link/src/js/reducers/link-update.js
View File

@ -76,7 +76,7 @@ export class LinkUpdateReducer {
data.pages, state.links[path]
);
state.links[path].unseenCount =
state.links[path].unseenCount + data.pages.length;
(state.links[path].unseenCount || 0) + data.pages.length;
}
}
@ -160,7 +160,14 @@ export class LinkUpdateReducer {
//
_addNewItems(items, pages = {local: {}}, page = 0) {
_addNewItems(items, pages, page = 0) {
if (!pages) {
pages = {
local: {},
totalPages: 0,
totalItems: 0
};
}
const i = page;
if (!pages[i]) {
pages[i] = [];