filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-09 20:28:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

finished refactor

Browse Source
This commit is contained in:
Martina 2020-09-03 15:42:08 -07:00
parent bb45ebe2e3
commit 6fb183fdff
14 changed files with 228 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common/navigation-data.js
View File

@ -73,7 +73,7 @@ export const generate = ({ library = [], slates = [] }) => [
},
{
id: "V1_NAVIGATION_SLATE",
decorator: "VIEW_SLATE",
decorator: "PUBLIC_SLATE",
name: "Slate",
pageTitle: "Slate",
children: null,
@ -144,7 +144,7 @@ export const generate = ({ library = [], slates = [] }) => [
},
{
id: "V1_NAVIGATION_PROFILE",
decorator: "PROFILE",
decorator: "PUBLIC_PROFILE",
name: "Profile",
pageTitle: "Profile",
children: null,

7
components/core/Application.js
View File

@ -24,12 +24,9 @@ import SceneSlate from "~/scenes/SceneSlate";
import SceneActivity from "~/scenes/SceneActivity";
import SceneDirectory from "~/scenes/SceneDirectory";
import SceneProfile from "~/scenes/SceneProfile";
<<<<<<< HEAD
import SceneSentinel from "~/scenes/SceneSentinel";
=======
import ScenePublicProfile from "~/scenes/ScenePublicProfile";
import ScenePublicSlate from "~/scenes/ScenePublicSlate";
>>>>>>> working on serialized endpoint
// NOTE(jim):
// Sidebars each have a decorator and can be shown to with _handleAction
@ -68,12 +65,12 @@ const SIDEBARS = {
const SCENES = {
HOME: <SceneHome />,
DIRECTORY: <SceneDirectory />,
PROFILE: <SceneProfile />,
PUBLIC_SLATE: <ScenePublicSlate />,
PUBLIC_PROFILE: <ScenePublicProfile />,
PROFILE: <SceneProfile />,
WALLET: <SceneWallet />,
FOLDER: <SceneFilesFolder />,
FILE: <SceneFile />,
PUBLIC_SLATE: <ScenePublicSlate />,
SLATE: <SceneSlate />,
DEALS: <SceneDeals />,
SETTINGS: <SceneSettings />,

15
components/core/Profile.js
View File

@ -69,7 +69,6 @@ export default class Profile extends React.Component {
{data.slates && data.slates.length ? (
<div>
{data.slates.map((slate) => {
const url = `/${data.username}/${slate.slatename}`;
if (this.props.onAction) {
return (
<div
@ -78,18 +77,28 @@ export default class Profile extends React.Component {
this.props.onAction({
type: "NAVIGATE",
value: this.props.sceneId,
scene: "SLATE",
data: { owner: data, ...slate },
scene: "PUBLIC_SLATE",
data: slate,
})
}
>
<SlatePreviewBlock
key={url}
slate={slate}
editing={this.props.editing}
onClick={() =>
this.props.onAction({
type: "NAVIGATE",
value: this.props.sceneId,
scene: "PUBLIC_SLATE",
data: slate,
})
}
/>
</div>
);
}
const url = `/${data.username}/${slate.slatename}`;
return (
<a key={url} href={url} css={STYLES_LINK}>
<SlatePreviewBlock slate={slate} />

21
components/core/SearchModal.js
View File

@ -216,8 +216,6 @@ export class SearchModal extends React.Component {
this.miniSearch.addAll(response.data.users);
this.miniSearch.addAll(response.data.slates);
this.miniSearch.addAll(files);
console.log(response.data.slates);
console.log(files);
}
};
@ -260,17 +258,10 @@ export class SearchModal extends React.Component {
_handleSelect = async (value) => {
if (value.type === "SLATE") {
// if (value.data.owner && value.data.owner.username) {
// value.data.owner = this.users.filter((user) => {
// return user.username === value.data.owner.username;
// })[0];
// } //TODO: slightly hacky way of getting the data. May want to serialize later?
console.log(value);
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATE",
scene: "PUBLIC_SLATE",
data: { id: value.data.id },
data: value.data,
});
}
if (value.type === "USER") {
@ -281,16 +272,10 @@ export class SearchModal extends React.Component {
});
}
if (value.type === "FILE") {
let slate = value.data.data.slate;
if (slate.owner && slate.owner.username) {
slate.owner = this.users.filter((user) => {
return user.username === slate.owner.username;
})[0];
} //TODO: slightly hacky way of getting the data. May want to serialize later?
this.props.onAction({
await this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATE",
data: slate,
data: value.data.data.slate,
});
dispatchCustomEvent({
name: "slate-global-open-carousel",

22
components/core/SlatePreviewBlock.js
View File

@ -10,7 +10,7 @@ const STYLES_IMAGE_ROW = css`
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-height: 186px;
height: 186px;
overflow: hidden;
@media (max-width: ${Constants.sizes.mobile}px) {
@ -52,13 +52,12 @@ export function SlatePreviewRow(props) {
const STYLES_BLOCK = css`
border: 1px solid ${Constants.system.border};
border-radius: 16px;
padding: 24px;
border-radius: 20px;
padding: 40px;
font-size: 12px;
text-align: left;
margin: 24px auto;
width: 100%;
max-width: 980px;
margin: 24px auto 48px auto;
max-width: 1012px;
cursor: pointer;
`;
@ -88,7 +87,7 @@ const STYLES_COPY_INPUT = css`
const STYLES_TAG = css`
margin-left: 24px;
padding: 4px 8px;
border-radius: 4px;
border-radius: 2px;
background-color: ${Constants.system.gray};
color: ${Constants.system.white};
`;
@ -118,7 +117,12 @@ export default class SlatePreviewBlock extends Component {
</strong>
{this.props.editing ? (
this.props.slate.data.public ? (
<div css={STYLES_TAG}>Public</div>
<div
css={STYLES_TAG}
style={{ backgroundColor: Constants.system.brand }}
>
Public
</div>
) : (
<div css={STYLES_TAG}>Private</div>
)
@ -139,7 +143,7 @@ export default class SlatePreviewBlock extends Component {
previewStyle={this.props.previewStyle}
/>
<input
readonly
readOnly
ref={(c) => {
this._ref = c;
}}

1
components/sidebars/SidebarAddFileToBucket.js
View File

@ -5,6 +5,7 @@ import * as Validations from "~/common/validations";
import { css } from "@emotion/react";
import { DataMeterBar } from "~/components/core/DataMeter";
import { dispatchCustomEvent } from "~/common/custom-events";
const STYLES_FILE_HIDDEN = css`
height: 1px;

28
pages/api/slates/get-serialized.js Normal file
View File

@ -0,0 +1,28 @@
import * as Data from "~/node_common/data";
import * as Serializers from "~/node_common/serializers";
import * as Strings from "~/common/strings";
export default async (req, res) => {
let slate = await Data.getSlateById({ id: req.body.data.id });
if (!slate) {
return res.status(404).send({
decorator: "SLATE_NOT_FOUND",
error: true,
});
}
slate = Serializers.slate(slate);
let user = await Data.getUserById({ id: slate.data.ownerId });
if (!user) {
return res.status(200).send({
decorator: "SLATE_OWNER_NOT_FOUND",
data: slate,
});
}
slate.user = Serializers.user(user);
return res.status(200).send({
decorator: "SERIALIZED_SLATE",
data: slate,
});
};

28
pages/api/users/get-serialized.js Normal file
View File

@ -0,0 +1,28 @@
import * as Data from "~/node_common/data";
import * as Serializers from "~/node_common/serializers";
import * as Strings from "~/common/strings";
export default async (req, res) => {
let user = await Data.getUserById({ id: req.body.data.id });
if (!user) {
return res.status(404).send({
decorator: "USER_NOT_FOUND",
error: true,
});
}
user = Serializers.user(user);
let slates = await Data.getSlatesByUserId({
userId: req.body.data.id,
publicOnly: true,
});
user.slates = [];
for (let slate of slates) {
user.slates.push(Serializers.slate(slate));
}
return res.status(200).send({
decorator: "SERIALIZED_USER",
data: user,
});
};

3
scenes/SceneDirectory.js
View File

@ -144,6 +144,7 @@ export default class SceneDirectory extends React.Component {
Remove
</div>
);
console.log(relation.owner);
return (
<UserEntry
user={relation.owner}
@ -214,7 +215,7 @@ export default class SceneDirectory extends React.Component {
this.props.onAction({
type: "NAVIGATE",
value: this.props.sceneId,
scene: "PROFILE",
scene: "PUBLIC_PROFILE",
data: relation.user,
});
}}

21
scenes/SceneProfile.js
View File

@ -41,20 +41,7 @@ export default class SceneProfile extends React.Component {
};
componentDidUpdate(prevProps) {
const isNewScene = prevProps.data.username !== this.props.data.username;
let isUpdated = false;
// if (
// this.props.data.data.objects.length !== prevProps.data.data.objects.length
// ) {
// isUpdated = true;
// }
// if (this.props.data.data.body !== prevProps.data.data.body) {
// isUpdated = true;
// }
if (isNewScene || isUpdated) {
if (prevProps.data.username !== this.props.data.username) {
this.setStatus(this.props.viewer);
}
}
@ -140,6 +127,7 @@ export default class SceneProfile extends React.Component {
};
render() {
console.log(this.props.data);
let buttons = (
<div>
{this.state.followStatus ? (
@ -173,11 +161,6 @@ export default class SceneProfile extends React.Component {
{STATUS_BUTTON_MAP[this.state.trustStatus]}
</ButtonSecondary>
)}
{/* {this.state.trustStatus === "trusted" ? (
<ButtonPrimary style={BUTTON_STYLE} onClick={this._handleSendMoney}>
Send Money
</ButtonPrimary>
) : null} */}
</div>
);
return (

46
scenes/ScenePublicProfile.js Normal file
View File

@ -0,0 +1,46 @@
import * as React from "react";
import * as Actions from "~/common/actions";
import { LoaderSpinner } from "~/components/system/components/Loaders";
import EmptyState from "~/components/core/EmptyState";
import SceneProfile from "~/scenes/SceneProfile";
export default class ScenePublicProfile extends React.Component {
state = {
profile: null,
};
componentDidMount = () => {
this.renderProfile();
};
componentDidUpdate = (prevProps) => {
if (this.props.data.id !== prevProps.data.id) {
this.renderProfile();
}
};
renderProfile = async () => {
if (this.props.data.id === this.props.viewer.id) {
this.setState({ profile: this.props.viewer });
return;
}
let profile = await Actions.getSerializedProfile({
id: this.props.data.id,
});
console.log(profile.data);
this.setState({ profile: profile.data });
};
render() {
if (!this.state.profile) {
return (
<EmptyState style={{ marginTop: "88px" }}>
<LoaderSpinner />
</EmptyState>
);
}
return <SceneProfile {...this.props} data={this.state.profile} />;
}
}

51
scenes/ScenePublicSlate.js Normal file
View File

@ -0,0 +1,51 @@
import * as React from "react";
import * as Actions from "~/common/actions";
import { LoaderSpinner } from "~/components/system/components/Loaders";
import EmptyState from "~/components/core/EmptyState";
import SceneSlate from "~/scenes/SceneSlate";
export default class ScenePublicSlate extends React.Component {
state = {
slate: null,
};
componentDidMount = () => {
this.renderSlate();
};
componentDidUpdate = (prevProps) => {
console.log(this.props);
console.log(prevProps);
if (this.props.data.id !== prevProps.data.id) {
this.renderSlate();
}
};
renderSlate = async () => {
for (let slate of this.props.viewer.slates) {
if (slate.id === this.props.data.id) {
this.props.onAction({
type: "NAVIGATE",
value: this.props.data.id,
});
return;
}
}
let slate = await Actions.getSerializedSlate({ id: this.props.data.id });
console.log(slate);
this.setState({ slate: slate.data });
};
render() {
if (!this.state.slate) {
return (
<EmptyState style={{ marginTop: "88px" }}>
<LoaderSpinner />
</EmptyState>
);
}
return <SceneSlate {...this.props} current={this.state.slate} />;
}
}

59
scenes/SceneSlate.js
View File

@ -13,6 +13,20 @@ import ScenePageHeader from "~/components/core/ScenePageHeader";
import Slate, { generateLayout } from "~/components/core/Slate";
import SlateMediaObject from "~/components/core/SlateMediaObject";
import CircleButtonGray from "~/components/core/CircleButtonGray";
import {
ButtonPrimary,
ButtonSecondary,
} from "~/components/system/components/Buttons";
const STYLES_BUTTON = css`
color: ${Constants.system.brand};
cursor: pointer;
padding: 4px 8px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
`;
const STYLES_USERNAME = css`
cursor: pointer;
@ -122,28 +136,12 @@ export default class SceneSlate extends React.Component {
}
};
_handleUpdate = async (e) => {
let response = await this.props.onRehydrate();
if (!response || response.error) {
alert("TODO: error fetching authenticated viewer");
return null;
}
let viewer = response.data;
this.setState({
following: !!viewer.subscriptions.filter((subscription) => {
return subscription.target_slate_id === this.props.current.id;
}).length,
});
};
_handleFollow = async () => {
let response = await Actions.createSubscription({
slateId: this.props.current.id,
});
console.log(response);
// await this._handleUpdate();
this.props.onRehydrate();
};
_handleChangeLayout = async (layout, layouts) => {
@ -341,29 +339,32 @@ export default class SceneSlate extends React.Component {
};
render() {
const { username, slatename, data, name } = this.props.current;
const { user, slatename, data } = this.props.current;
const { body = "A slate." } = data;
const { objects, layouts } = this.state;
let following = !!this.props.viewer.subscriptions.filter((subscription) => {
return subscription.target_slate_id === this.props.current.id;
}).length;
return (
<ScenePage style={{ padding: `88px 24px 128px 24px` }}>
<ScenePageHeader
style={{ padding: `0 24px 0 24px` }}
title={
username ? (
user ? (
<span>
<span
onClick={() =>
this.props.onAction({
type: "NAVIGATE",
value: this.props.sceneId,
scene: "PROFILE",
data: this.props.current.owner,
scene: "PUBLIC_PROFILE",
data: user,
})
}
css={STYLES_USERNAME}
>
{username}
{user.username}
</span>{" "}
/ {slatename}
</span>
@ -390,11 +391,15 @@ export default class SceneSlate extends React.Component {
</React.Fragment>
) : (
<div onClick={this._handleFollow}>
{!!this.props.viewer.subscriptions.filter((subscription) => {
return subscription.target_slate_id === this.props.current.id;
}).length
? "Unfollow"
: "Follow"}
{following ? (
<div css={STYLES_BUTTON} onClick={this._handleFollow}>
Unfollow
</div>
) : (
<div css={STYLES_BUTTON} onClick={this._handleFollow}>
Follow
</div>
)}
</div>
)
}

12
scenes/SceneSlates.js
View File

@ -25,11 +25,13 @@ export default class SceneSlates extends React.Component {
};
_handleAdd = () => {
return this.props.onAction({
this.props.onAction({
name: "Create slate",
type: "SIDEBAR",
value: "SIDEBAR_CREATE_SLATE",
});
console.log(this.props.viewer);
this.props.onRehydrate();
};
render() {
@ -37,9 +39,7 @@ export default class SceneSlates extends React.Component {
const slates = this.props.viewer.slates.map((each) => {
return {
...each,
url: `https://slate.host/${this.props.viewer.username}/${
each.slatename
}`,
url: `https://slate.host/${this.props.viewer.username}/${each.slatename}`,
public: each.data.public,
objects: <span css={STYLES_NUMBER}>{each.data.objects.length}</span>,
};
@ -87,8 +87,8 @@ export default class SceneSlates extends React.Component {
/>
{this.state.tab === 0 ? (
this.props.data && this.props.data.children.length ? (
this.props.data.children.map((slate) => (
this.props.viewer.slates && this.props.viewer.slates.length ? (
this.props.viewer.slates.map((slate) => (
<div
key={slate.id}
onClick={() =>