import { styles } from 'refire-app'
import ReactMarkdown from 'react-markdown'
import CodeBlock from '../App/CodeBlock'
const PreviewFields = ({ preview, text, styles }) => {
if (preview) {
return (
<div>
<div className={styles.textPreview}>
<ReactMarkdown
escapeHtml={true}
source={text}
renderers={{...ReactMarkdown.renderers, ...{ CodeBlock }}} />
</div>
</div>
)
} else {
return <div />
}
}
const css = {
textPreview: {
"& p": {
margin: "0 0 20px 0"
}
}
}
export default styles(css, PreviewFields)
import React from 'react'
import { Card, Spinner } from 'elemental'
import { styles } from 'refire-app'
const LoadingSpinner = ({ styles }) => {
return (
<Card>
<div className={styles.spinnerContainer}>
<Spinner />
</div>
</Card>
)
}
const css = {
spinnerContainer: {
padding: "30px 0",
}
}
export default styles(css, LoadingSpinner)
profileContainer: {
display: "inline-block",
position: "relative",
verticalAlign: "middle"
},
metaContainer: {
position: "absolute",
right: 0,
top: 0,
padding: "13px 0",
},
commentsContainer: {
display: "inline-block",
minWidth: "40px",
textAlign: "right",
verticalAlign: "middle"
},
commentsCount: {
display: "inline-block",
margin: "0 5px 0 0"
},
lastPost: {
display: "inline-block",
minWidth: "40px",
textAlign: "right",
verticalAlign: "middle"
}
}
export default styles(css, Thread)
import React from 'react'
import { styles } from 'refire-app'
import TrashIcon from 'react-icons/lib/fa/trash'
const DeletePostButton = ({ user, isAdmin, onClick, styles }) => {
if (user && isAdmin) {
return (
<span onClick={onClick} title="Delete">
<span className={styles.button}>
<TrashIcon size="16px" />
</span>
</span>
)
} else {
return <span />
}
}
const css = {
button: {
cursor: "pointer",
verticalAlign: "top",
display: "inline-block",
paddingRight: "20px",
verticalAlign: "top",
color: "#955",
},
}
export default styles(css, DeletePostButton)
import React from 'react'
import { styles } from 'refire-app'
import SettingsModal from '../Admin/SettingsModal'
const LockDialog = ({ visible, save, hide, locked, title="", styles }) => {
const text = locked ? "Unlock" : "Lock"
const confirmText = locked ? "unlock" : "lock"
return (
<SettingsModal
title={`${text} thread?`}
visible={visible}
hide={hide}
save={save}
saveText={text}
width="small"
styles={styles}
>
Do you really want to {confirmText} thread <strong>{title}</strong>?
</SettingsModal>
)
}
const css = {
container: {},
modal: {},
}
export default styles(css, LockDialog)
import React from 'react'
import { Button } from 'elemental'
import { styles } from 'refire-app'
const SettingsButton = ({ visible, toggleVisible, styles }) => {
if (visible) {
return (
<Button className={styles.button} onClick={() => toggleVisible()}>
Settings
</Button>
)
} else {
return <span />
}
}
const css = {
button: {
width: "100%",
"@media (min-width: 480px)": {
width: "auto",
marginRight: "10px"
}
}
}
export default styles(css, SettingsButton)
import React from 'react'
import { bindings, styles } from 'refire-app'
const Index = ({
settings: { value: settings } = {},
styles
}) => {
return (
<div className={styles.container}>
{settings.indexTitle}
</div>
)
}
const css = {
container: {}
}
export default styles(css, bindings(["settings"])(Index))
</div>
)
}
if (authenticatedUser) {
return <div />
}
return (
<div className={classnames("app-container", styles.container)}>
<FirebaseOAuth provider="google" flow="authWithOAuthRedirect">
<Button>Login with Google</Button>
</FirebaseOAuth>
</div>
)
}
}
const css = {
container: prefix({
display: "flex",
alignItems: "center",
justifyContent: "center",
}),
}
export default styles(
css,
bindings(["_status"], ["authenticatedUser"])(NativeLogin)
)
import React from 'react'
import { styles } from 'refire-app'
import SettingsModal from '../Admin/SettingsModal'
const Settings = ({ visible, toggleVisible, styles }) => {
return (
<SettingsModal
title="Board settings"
visible={visible}
hide={toggleVisible}
save={toggleVisible}
styles={styles}
>
Not implemented yet.
</SettingsModal>
)
}
const css = {
container: {},
modal: {},
}
export default styles(css, Settings)
} else {
return (
<div>
{
posts.map(({ key, value: post}) => {
return (
<Post
key={key}
postKey={key}
post={post}
user={user}
locked={locked}
isAdmin={isAdmin}
deletePost={deletePost}
updateQuote={updateQuote} />
)
})
}
</div>
)
}
}
const css = {
spinnerContainer: {
padding: "30px 0",
}
}
export default styles(css, Posts)
import React from 'react'
import { styles } from 'refire-app'
import SettingsModal from '../Admin/SettingsModal'
const DeletePostDialog = ({ visible, save, hide, styles }) => {
return (
<SettingsModal
title="Delete post?"
visible={visible}
hide={hide}
save={save}
saveText="Delete"
width="small"
styles={styles}
>
Do you really want to delete this post?
</SettingsModal>
)
}
const css = {
container: {},
modal: {},
}
export default styles(css, DeletePostDialog)
import React from 'react'
import { styles } from 'refire-app'
import QuoteIcon from 'react-icons/lib/fa/quote-left'
const QuoteButton = ({ user, locked, onClick, styles }) => {
if (user && !locked) {
return (
<span onClick={onClick} title="Quote">
<span className={styles.button}>
<QuoteIcon size="16px" />
</span>
</span>
)
} else {
return <span />
}
}
const css = {
button: {
cursor: "pointer",
display: "inline-block",
verticalAlign: "top",
paddingRight: "20px",
color: "#555",
},
}
export default styles(css, QuoteButton)
>
<div>
<FormField label="Theme">
<Radio
name="inline_radios"
label="Light (default)"
checked={settings.theme === "light"}
onChange={() => this.saveSettings("theme", "light")}
/>
<Radio
name="inline_radios"
label="Dark"
checked={settings.theme === "dark"}
onChange={() => this.saveSettings("theme", "dark")}
/>
</FormField>
</div>
</SettingsModal>
)
}
}
const css = {
container: {},
modal: {},
}
export default FirebaseWrite({ method: "update" })(
styles(css, UserSettings)
)
import React from 'react'
import { styles } from 'refire-app'
const TopToolbar = ({ children, isAdmin, posts, pageSize, styles }) => {
if (posts.length > pageSize || isAdmin) {
return (
<div className={styles.container}>
{children}
</div>
)
} else {
return <span />
}
}
const css = {
container: {
margin: "0 0 20px 0",
"@media (min-width: 760px)": {
margin: "0",
position: "absolute",
right: "0px",
top: "0px",
}
}
}
export default styles(css, TopToolbar)
const PreviewButton = ({ enabled, togglePreview, styles }) => {
if (enabled) {
return (
<Button type="link" onClick={togglePreview}>
<span className={styles.iconContainer}>
<PencilIcon size="16px" />
</span> Back to edit
</Button>
)
} else {
return (
<Button type="link" onClick={togglePreview}>
<span className={styles.iconContainer}>
<EyeIcon size="16px" />
</span> Preview
</Button>
)
}
}
const css = {
iconContainer: {
verticalAlign: "top",
display: "inline-block",
margin: "-1px 1px 0 0"
}
}
export default styles(css, PreviewButton)
background: "#fdfdfd",
},
topbar: {
position: "relative",
maxWidth: "940px",
margin: "0 auto",
height: "50px",
padding: "7px 20px",
},
header: {
display: "inline-block",
margin: 0,
paddingTop: "12px",
fontSize: "14px",
"@media (min-width: 480px)": {
paddingTop: "5px",
fontSize: "20px",
},
},
buttonsContainer: {
position: "absolute",
right: "20px",
top: "8px",
},
link: {
color: "#3c9def",
},
}
export default styles(css, TopBar)