wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-29 11:28:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add UserBox

Browse Source
This commit is contained in:
Chi Vinh Le
2018-08-08 01:04:25 +02:00
parent 34fb53b3b0
commit fe7b734b2c
41 changed files with 773 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+80 -2
View File
@@ -5,10 +5,49 @@ exports[`loads more comments 1`] = `
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
>
<div
className="Stream-root"
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Flex-root Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Sign In
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Register
</button>
</div>
<form
autoComplete="off"
className="PostCommentForm-root"
onSubmit={[Function]}
>
<div>
@@ -148,10 +187,49 @@ exports[`renders comment stream 1`] = `
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
>
<div
className="Stream-root"
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Flex-root Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Sign In
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Register
</button>
</div>
<form
autoComplete="off"
className="PostCommentForm-root"
onSubmit={[Function]}
>
<div>
src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+40 -1
View File
@@ -61,10 +61,49 @@ exports[`show all comments 1`] = `
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
>
<div
className="Stream-root"
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Flex-root Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Sign In
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Register
</button>
</div>
<form
autoComplete="off"
className="PostCommentForm-root"
onSubmit={[Function]}
>
<div>
src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+40 -1
View File
@@ -34,10 +34,49 @@ exports[`show all comments 1`] = `
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
>
<div
className="Stream-root"
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Flex-root Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Sign In
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Register
</button>
</div>
<form
autoComplete="off"
className="PostCommentForm-root"
onSubmit={[Function]}
>
<div>
src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+40 -1
View File
@@ -5,10 +5,49 @@ exports[`renders comment stream 1`] = `
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
>
<div
className="Stream-root"
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Flex-root Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Sign In
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Register
</button>
</div>
<form
autoComplete="off"
className="PostCommentForm-root"
onSubmit={[Function]}
>
<div>
src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+40 -1
View File
@@ -5,10 +5,49 @@ exports[`renders comment stream 1`] = `
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
>
<div
className="Stream-root"
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Flex-root Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Sign In
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Register
</button>
</div>
<form
autoComplete="off"
className="PostCommentForm-root"
onSubmit={[Function]}
>
<div>
src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+80 -2
View File
@@ -5,10 +5,49 @@ exports[`renders comment stream 1`] = `
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
>
<div
className="Stream-root"
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Flex-root Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Sign In
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Register
</button>
</div>
<form
autoComplete="off"
className="PostCommentForm-root"
onSubmit={[Function]}
>
<div>
@@ -137,10 +176,49 @@ exports[`show all replies 1`] = `
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
>
<div
className="Stream-root"
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Flex-root Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Sign In
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
>
Register
</button>
</div>
<form
autoComplete="off"
className="PostCommentForm-root"
onSubmit={[Function]}
>
<div>
src/core/client/stream/test/createEnvironment.ts
+34
View File
@@ -0,0 +1,34 @@
import { IResolvers } from "graphql-tools";
import { Environment, RecordProxy, RecordSourceProxy } from "relay-runtime";
import { createRelayEnvironment } from "talk-framework/testHelpers";
import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "talk-stream/local";
interface CreateEnvironmentParams {
logNetwork?: boolean;
resolvers: IResolvers<any, any>;
initLocalState?: (
local: RecordProxy,
source: RecordSourceProxy,
environment: Environment
) => void;
}
export default function createEnvironment(params: CreateEnvironmentParams) {
return createRelayEnvironment({
network: {
logNetwork: params.logNetwork,
resolvers: params.resolvers,
projectName: "tenant",
},
initLocalState: (localRecord, source, environment) => {
const authPopupRecord = source.create(AUTH_POPUP_ID, AUTH_POPUP_TYPE);
authPopupRecord.setValue(false, "open");
authPopupRecord.setValue(false, "focus");
authPopupRecord.setValue("", "href");
localRecord.setLinkedRecord(authPopupRecord, "authPopup");
if (params.initLocalState) {
params.initLocalState(localRecord, source, environment);
}
},
});
}
src/core/client/stream/test/loadMore.spec.tsx
+6 -10
View File
@@ -1,13 +1,12 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { RecordProxy } from "relay-runtime";
import sinon from "sinon";
import { timeout } from "talk-common/utils";
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
import { createRelayEnvironment } from "talk-framework/testHelpers";
import AppContainer from "talk-stream/containers/AppContainer";
import createEnvironment from "./createEnvironment";
import { assets, comments } from "./fixtures";
const connectionStub = sinon.stub().throws();
@@ -61,14 +60,11 @@ const resolvers = {
},
};
const environment = createRelayEnvironment({
network: {
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
projectName: "tenant",
},
initLocalState: (localRecord: RecordProxy) => {
const environment = createEnvironment({
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
initLocalState: (localRecord, source) => {
localRecord.setValue(assetStub.id, "assetID");
},
});
src/core/client/stream/test/permalinkView.spec.tsx
+5 -8
View File
@@ -5,9 +5,9 @@ import sinon from "sinon";
import { timeout } from "talk-common/utils";
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
import { createRelayEnvironment } from "talk-framework/testHelpers";
import AppContainer from "talk-stream/containers/AppContainer";
import createEnvironment from "./createEnvironment";
import { assets, comments } from "./fixtures";
const commentStub = {
@@ -44,13 +44,10 @@ const resolvers = {
},
};
const environment = createRelayEnvironment({
network: {
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
projectName: "tenant",
},
const environment = createEnvironment({
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
initLocalState: (localRecord: RecordProxy) => {
localRecord.setValue(assetStub.id, "assetID");
localRecord.setValue(commentStub.id, "commentID");
src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
+6 -8
View File
@@ -4,9 +4,10 @@ import { RecordProxy } from "relay-runtime";
import { timeout } from "talk-common/utils";
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
import { createRelayEnvironment } from "talk-framework/testHelpers";
import AppContainer from "talk-stream/containers/AppContainer";
import createEnvironment from "./createEnvironment";
const resolvers = {
Query: {
comment: () => null,
@@ -14,13 +15,10 @@ const resolvers = {
},
};
const environment = createRelayEnvironment({
network: {
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
projectName: "tenant",
},
const environment = createEnvironment({
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
initLocalState: (localRecord: RecordProxy) => {
localRecord.setValue("unknown-asset-id", "assetID");
localRecord.setValue("unknown-comment-id", "commentID");
src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
+5 -8
View File
@@ -5,9 +5,9 @@ import sinon from "sinon";
import { timeout } from "talk-common/utils";
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
import { createRelayEnvironment } from "talk-framework/testHelpers";
import AppContainer from "talk-stream/containers/AppContainer";
import createEnvironment from "./createEnvironment";
import { assets, comments } from "./fixtures";
const commentStub = {
@@ -40,13 +40,10 @@ const resolvers = {
},
};
const environment = createRelayEnvironment({
network: {
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
projectName: "tenant",
},
const environment = createEnvironment({
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
initLocalState: (localRecord: RecordProxy) => {
localRecord.setValue(assetStub.id, "assetID");
localRecord.setValue("unknown-comment-id", "commentID");
src/core/client/stream/test/renderReplies.spec.tsx
+5 -8
View File
@@ -5,9 +5,9 @@ import sinon from "sinon";
import { timeout } from "talk-common/utils";
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
import { createRelayEnvironment } from "talk-framework/testHelpers";
import AppContainer from "talk-stream/containers/AppContainer";
import createEnvironment from "./createEnvironment";
import { assetWithReplies } from "./fixtures";
const resolvers = {
@@ -20,13 +20,10 @@ const resolvers = {
},
};
const environment = createRelayEnvironment({
network: {
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
projectName: "tenant",
},
const environment = createEnvironment({
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
initLocalState: (localRecord: RecordProxy) => {
localRecord.setValue(assetWithReplies.id, "assetID");
},
src/core/client/stream/test/renderStream.spec.tsx
+5 -8
View File
@@ -5,9 +5,9 @@ import sinon from "sinon";
import { timeout } from "talk-common/utils";
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
import { createRelayEnvironment } from "talk-framework/testHelpers";
import AppContainer from "talk-stream/containers/AppContainer";
import createEnvironment from "./createEnvironment";
import { assets } from "./fixtures";
const resolvers = {
@@ -20,13 +20,10 @@ const resolvers = {
},
};
const environment = createRelayEnvironment({
network: {
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
projectName: "tenant",
},
const environment = createEnvironment({
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
initLocalState: (localRecord: RecordProxy) => {
localRecord.setValue(assets[0].id, "assetID");
},
src/core/client/stream/test/showAllReplies.spec.tsx
+5 -8
View File
@@ -5,9 +5,9 @@ import sinon from "sinon";
import { timeout } from "talk-common/utils";
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
import { createRelayEnvironment } from "talk-framework/testHelpers";
import AppContainer from "talk-stream/containers/AppContainer";
import createEnvironment from "./createEnvironment";
import { assets, comments } from "./fixtures";
const connectionStub = sinon.stub().throws();
@@ -77,13 +77,10 @@ const resolvers = {
},
};
const environment = createRelayEnvironment({
network: {
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
projectName: "tenant",
},
const environment = createEnvironment({
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
initLocalState: (localRecord: RecordProxy) => {
localRecord.setValue(assetStub.id, "assetID");
},