unmute(item.url)}
68 | onRemoveLabel={`Unmute ${item.url}`}
69 | />
70 | ))}
71 |
72 | {!loading && (!muted || muted.length === 0) && (
73 |
74 | No muted urls in this channel
75 |
76 | )}
77 |
78 | )
79 | }
80 |
81 | ChannelMuted.propTypes = {
82 | channel: PropTypes.string,
83 | }
84 |
85 | export default withStyles(styles)(ChannelMuted)
86 |
--------------------------------------------------------------------------------
/src/components/ChannelSettings/style.js:
--------------------------------------------------------------------------------
1 | export default theme => ({
2 | list: {
3 | position: 'relative',
4 | height: '100%',
5 | },
6 | fieldset: {
7 | display: 'block',
8 | maxWidth: '100%',
9 | },
10 | following: {
11 | display: 'block',
12 | width: '100%',
13 | },
14 | followingUrl: {
15 | overflow: 'hidden',
16 | whiteSpace: 'nowrap',
17 | textOverflow: 'ellipsis',
18 | },
19 | delete: {
20 | color:
21 | theme.palette.type === 'dark'
22 | ? theme.palette.error.light
23 | : theme.palette.error.dark,
24 | borderColor:
25 | theme.palette.type === 'dark'
26 | ? theme.palette.error.light
27 | : theme.palette.error.dark,
28 | },
29 | })
30 |
--------------------------------------------------------------------------------
/src/components/Donate/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import {
3 | Card,
4 | CardHeader,
5 | CardContent,
6 | CardActions,
7 | Typography,
8 | Link,
9 | TextField,
10 | MenuItem,
11 | Button,
12 | } from '@material-ui/core'
13 | import Meta from '../Meta'
14 |
15 | const Donate = () => {
16 | const [currency, setCurrency] = useState('$')
17 | const [amount, setAmount] = useState(5)
18 |
19 | return (
20 |
21 |
22 |
23 |
24 |
25 | If you'd like to donate money towards the continued development of
26 | Together that would be extremely nice of you.
27 |
28 |
29 | I accept payments via{' '}
30 | my website.
31 |
32 |
33 | setCurrency(e.target.value)}
39 | style={{ marginRight: 12 }}
40 | >
41 |
42 |
43 |
44 |
45 | setAmount(e.target.value)}
51 | min="2"
52 | />
53 |
54 |
55 |
66 |
67 |
68 | )
69 | }
70 |
71 | export default Donate
72 |
--------------------------------------------------------------------------------
/src/components/ErrorBoundary/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { withStyles } from '@material-ui/core/styles'
3 | import Card from '@material-ui/core/Card'
4 | import CardActions from '@material-ui/core/CardActions'
5 | import CardContent from '@material-ui/core/CardContent'
6 | import Button from '@material-ui/core/Button'
7 | import Typography from '@material-ui/core/Typography'
8 | import styles from './style'
9 |
10 | class ErrorBoundary extends Component {
11 | constructor(props) {
12 | super(props)
13 | this.state = { hasError: false, newIssueUrl: null }
14 | }
15 |
16 | componentDidCatch(error, info) {
17 | console.log('[React error]', { error, info })
18 |
19 | const newIssueUrl = new URL(
20 | 'https://github.com/alltogethernow/web/issues/new'
21 | )
22 |
23 | newIssueUrl.searchParams.set('template', 'bug_report.md')
24 | newIssueUrl.searchParams.set('title', 'React Error: ' + error.message)
25 | newIssueUrl.searchParams.set('labels', 'U0001F41B bug')
26 |
27 | const stackTrace = info && info.componentStack ? info.componentStack : ''
28 | newIssueUrl.searchParams.set(
29 | 'body',
30 | `
31 | **Describe the bug**
32 | I encountered a bug on the url ${
33 | typeof window !== 'undefined'
34 | ? window.location.href
35 | : '{copy and paste the url here}'
36 | }
37 |
38 | **To Reproduce**
39 | Steps to reproduce the behavior:
40 | 1. Go to '...'
41 | 2. Click on '....'
42 | 3. Scroll down to '....'
43 | 4. See error
44 |
45 | **Expected Behavior**
46 | A clear and concise description of what you expected to happen.
47 |
48 | **Screenshots**
49 | If applicable, add screenshots to help explain your problem.
50 |
51 | **Browser(please complete the following information):**
52 | - OS: [e.g. iOS]
53 | - Browser [e.g. chrome, safari]
54 | - Version [e.g. 22]
55 |
56 | **More Info**
57 | Add any other context about the problem here.
58 |
59 | **Stack Trace**
60 | ${stackTrace}
61 | `
62 | )
63 | this.setState({ hasError: true, newIssueUrl: newIssueUrl.href })
64 | }
65 |
66 | render() {
67 | const { classes, children } = this.props
68 | const { hasError, newIssueUrl } = this.state
69 | return (
70 | <>
71 | {children}
72 | {hasError && (
73 |
74 |
75 |
76 | Uh Oh{' '}
77 |
78 | 🙈
79 |
80 |
81 |
82 | Something went wrong. If you look in the console you should see
83 | the error details
84 |
85 |
86 |
87 |
92 |
95 |
96 | {newIssueUrl && (
97 |
98 |
101 |
102 | )}
103 |
109 |
110 |
111 | )}
112 |
113 | )
114 | }
115 | }
116 |
117 | export default withStyles(styles)(ErrorBoundary)
118 |
--------------------------------------------------------------------------------
/src/components/ErrorBoundary/style.js:
--------------------------------------------------------------------------------
1 | export default {
2 | card: {
3 | maxWidth: '96%',
4 | width: 400,
5 | position: 'fixed',
6 | top: '50%',
7 | left: '50%',
8 | transform: 'translate(-50%, -50%)',
9 | },
10 | media: {
11 | height: 0,
12 | paddingTop: '56.25%', // 16:9
13 | },
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/GallerySlider/style.js:
--------------------------------------------------------------------------------
1 | export default theme => ({
2 | loadMore: {
3 | width: '100%',
4 | marginTop: 16,
5 | },
6 | carousel: {},
7 | popup: {
8 | boxSizing: 'border-box',
9 | display: 'flex',
10 | justifyContent: 'center',
11 | alignItems: 'center',
12 | width: '100vw',
13 | height: '100vh',
14 | overflow: 'hidden',
15 | background: '#111',
16 | },
17 | popupMedia: {
18 | display: 'block',
19 | width: '100%',
20 | height: '100%',
21 | objectFit: 'contain',
22 | },
23 | button: {
24 | color: 'white',
25 | background: 'rgba(0,0,0,.4)',
26 | },
27 | drawer: {
28 | display: 'block',
29 | boxSizing: 'border-box',
30 | width: 300,
31 | maxWidth: '80%',
32 | maxHeight: '100%',
33 | overflow: 'auto',
34 | },
35 | })
36 |
--------------------------------------------------------------------------------
/src/components/GlobalShotcuts/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Shortcuts } from 'react-shortcuts'
3 | import useReactRouter from 'use-react-router'
4 | import useLocalState from '../../hooks/use-local-state'
5 | import useChannels from '../../hooks/use-channels'
6 |
7 | const GlobalShortcutHandler = ({ children, className }) => {
8 | const { history } = useReactRouter()
9 | const { channels } = useChannels()
10 | const [localState, setLocalState] = useLocalState()
11 |
12 | const handleShortcuts = action => {
13 | if (action.startsWith('CHANNEL_')) {
14 | // Switch channel
15 | const channelIndex = parseInt(action.replace('CHANNEL_', '')) - 1
16 | if (channels && channels[channelIndex] && channels[channelIndex].uid) {
17 | // Switch to the selected channel
18 | const uid = channels[channelIndex].uid
19 | history.push(`/channel/${uid}`)
20 | setLocalState({ focusedComponent: 'timeline' })
21 | }
22 | } else {
23 | // Other actions
24 | switch (action) {
25 | case 'NEW_POST':
26 | history.push('/editor')
27 | break
28 | case 'FOCUS_CHANNEL_LIST':
29 | setLocalState({ focusedComponent: 'channels' })
30 | break
31 | case 'HELP':
32 | setLocalState({ shortcutHelpOpen: !!!localState.shortcutHelpOpen })
33 | break
34 | case 'KONAMI':
35 | alert('Look at you. You are very clever')
36 | break
37 | default:
38 | // Nothing to do
39 | break
40 | }
41 | }
42 | }
43 |
44 | return (
45 |
51 | {children}
52 |
53 | )
54 | }
55 |
56 | export default GlobalShortcutHandler
57 |
--------------------------------------------------------------------------------
/src/components/Home/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import {
4 | List,
5 | Typography,
6 | Card,
7 | LinearProgress,
8 | CardContent,
9 | CardHeader,
10 | ButtonGroup,
11 | Button,
12 | } from '@material-ui/core'
13 | import { withStyles } from '@material-ui/styles'
14 | import {
15 | Settings as SettingsIcon,
16 | Edit as NoteIcon,
17 | FolderShared as PostsIcon,
18 | } from '@material-ui/icons'
19 | import ChannelMenuItem from '../ChannelMenu/ChannelMenuItem'
20 | import useChannels from '../../hooks/use-channels'
21 | import useUser from '../../hooks/use-user'
22 | import style from './style'
23 |
24 | const Home = ({ classes }) => {
25 | const { channels, loading } = useChannels()
26 | const { user } = useUser()
27 | const mainChannels = channels.filter((c) => c.uid !== 'notifications') || []
28 |
29 | return (
30 |
31 | {!!loading && }
32 |
33 |
34 | Welcome to Together
35 |
36 |
37 | {mainChannels.length > 0 && (
38 |
39 |
40 |
41 | {mainChannels.map((channel) => (
42 |
43 | ))}
44 |
45 |
46 | )}
47 |
48 |
49 |
50 |
51 |
52 | {user && user.hasMicropub && (
53 | }>
54 | New Post
55 |
56 | )}
57 | }
61 | >
62 | Settings
63 |
64 | {user && user.hasMicropub && (
65 | }>
66 | My Posts
67 |
68 | )}
69 |
70 |
71 |
72 |
73 | )
74 | }
75 |
76 | export default withStyles(style)(Home)
77 |
--------------------------------------------------------------------------------
/src/components/Home/style.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 | container: {
3 | display: 'block',
4 | justifyContent: 'center',
5 | boxSizing: 'border-box',
6 | width: '100%',
7 | height: '100%',
8 | overflow: 'auto',
9 | padding: theme.spacing(2),
10 |
11 | '& > *': {
12 | maxWidth: 600,
13 | width: '100%',
14 | },
15 | },
16 | title: {
17 | marginBottom: theme.spacing(4),
18 | },
19 | channels: {
20 | display: 'flex',
21 | flexDirection: 'row',
22 | flexWrap: 'wrap',
23 | '& > *': {
24 | width: '50%',
25 | },
26 |
27 | '& .MuiBadge-badge': {
28 | transform: 'scale(1) translate(0%, -50%)',
29 | },
30 | },
31 | })
32 |
--------------------------------------------------------------------------------
/src/components/LandingPage/ExampleApp/example-data.js:
--------------------------------------------------------------------------------
1 | import faker from 'faker'
2 |
3 | const examplePost = (data = {}) => {
4 | const basePost = {
5 | _id: faker.random.uuid(),
6 | // name: faker.hacker.phrase(),
7 | content: { text: faker.hacker.phrase() },
8 | published: faker.date.past(),
9 | url: process.env.PUBLIC_URL,
10 | author: {
11 | name: faker.name.findName(),
12 | photo: faker.image.avatar(),
13 | },
14 | }
15 |
16 | return Object.assign({}, basePost, data)
17 | }
18 |
19 | const sortDate = (a, b) => b.published - a.published
20 |
21 | const timelinePosts = [
22 | examplePost(),
23 | examplePost(),
24 | examplePost(),
25 | examplePost(),
26 | examplePost(),
27 | ].sort(sortDate)
28 |
29 | const mapPost = () =>
30 | examplePost({
31 | checkin: {
32 | name: faker.company.companyName(),
33 | latitude: faker.random.number({
34 | precision: 0.00001,
35 | min: 40.396,
36 | max: 40.444,
37 | }),
38 | longitude:
39 | 0 -
40 | faker.random.number({
41 | precision: 0.00001,
42 | min: 3.67,
43 | max: 3.728,
44 | }),
45 | },
46 | })
47 |
48 | const mapPosts = [mapPost(), mapPost(), mapPost(), mapPost(), mapPost()].sort(
49 | sortDate
50 | )
51 |
52 | const photoPost = () =>
53 | examplePost({
54 | photo: [
55 | 'https://picsum.photos/1400/800/?image=' + faker.random.number(1084),
56 | ],
57 | })
58 |
59 | const galleryPosts = [
60 | photoPost(),
61 | photoPost(),
62 | photoPost(),
63 | photoPost(),
64 | photoPost(),
65 | ].sort(sortDate)
66 |
67 | const classicPost = () =>
68 | examplePost({
69 | name: faker.lorem.words(),
70 | content: { html: '' + faker.lorem.paragraphs(3, '
') + '
' },
71 | })
72 |
73 | const classicPosts = [
74 | classicPost(),
75 | classicPost(),
76 | classicPost(),
77 | classicPost(),
78 | classicPost(),
79 | ].sort(sortDate)
80 |
81 | export default {
82 | timeline: {
83 | id: 'timeline',
84 | title: '📱 Timeline View',
85 | items: timelinePosts,
86 | },
87 | classic: {
88 | id: 'classic',
89 | title: '📰 Classic View',
90 | items: classicPosts,
91 | },
92 | gallery: {
93 | id: 'gallery',
94 | title: '📸 Gallery View',
95 | items: galleryPosts,
96 | },
97 | map: {
98 | id: 'map',
99 | title: '🗺️ Map View',
100 | items: mapPosts,
101 | },
102 | }
103 |
--------------------------------------------------------------------------------
/src/components/LandingPage/ExampleApp/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { withStyles } from '@material-ui/core/styles'
3 | import {
4 | Typography,
5 | AppBar,
6 | Toolbar,
7 | Drawer,
8 | List,
9 | ListItem,
10 | ListItemText,
11 | IconButton,
12 | } from '@material-ui/core'
13 | import MenuIcon from '@material-ui/icons/Menu'
14 | import Timeline from '../../Layout/Timeline'
15 | import Gallery from '../../Layout/Gallery'
16 | import Classic from '../../Layout/Classic'
17 | import Map from '../../Layout/Map'
18 | import style from './style'
19 | // import PropTypes from 'prop-types'
20 |
21 | import exampleData from './example-data'
22 |
23 | const ExampleApp = ({ classes }) => {
24 | const [menuOpen, setMenuOpen] = useState(false)
25 | const [selectedPreview, setSelectedPreview] = useState(
26 | Object.keys(exampleData)[0]
27 | )
28 |
29 | return (
30 |
31 |
32 |
33 | setMenuOpen(!menuOpen)}
37 | className={classes.menuButton}
38 | >
39 |
40 |
41 |
42 | {exampleData[selectedPreview].title}
43 |
44 |
45 |
46 |
47 |
56 |
57 | {Object.values(exampleData).map(example => (
58 | setSelectedPreview(example.id)}
62 | selected={selectedPreview === example.id}
63 | >
64 |
65 |
66 | ))}
67 |
68 |
69 |
70 | {selectedPreview === 'timeline' && (
71 |
72 | )}
73 | {selectedPreview === 'classic' && (
74 |
75 | )}
76 | {selectedPreview === 'gallery' && (
77 |
78 | )}
79 | {selectedPreview === 'map' && (
80 |
81 |
82 |
83 | )}
84 |
85 |
86 |
8 |
9 |
10 | 🤷
11 | {' '}
12 | Nothing to show
13 |
14 |
15 | Maybe you need to subscribe to a site or select a different channel
16 |
17 |
18 | )
19 |
20 | export default withStyles(styles)(NoContent)
21 |
--------------------------------------------------------------------------------
/src/components/Layout/Shortcuts.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { withStyles } from '@material-ui/core/styles'
4 | import { Shortcuts } from 'react-shortcuts'
5 | import useLocalState from '../../hooks/use-local-state'
6 | import styles from './style'
7 |
8 | const LayoutShortcuts = ({
9 | focusComponent,
10 | onNext,
11 | onPrevious,
12 | onMarkRead,
13 | onSelectPost,
14 | children,
15 | className,
16 | classes,
17 | ...props
18 | }) => {
19 | const ref = useRef()
20 | const [localState, setLocalState] = useLocalState()
21 |
22 | // Focus the timeline when the focused component is set
23 | useEffect(() => {
24 | const el = ref.current._domNode
25 | if (
26 | localState.focusedComponent === 'timeline' &&
27 | el !== document.activeElement
28 | ) {
29 | el.focus()
30 | }
31 | }, [localState.focusedComponent])
32 |
33 | // Handle keypresses
34 | const handleShortcuts = action => {
35 | switch (action) {
36 | case 'NEXT':
37 | onNext()
38 | break
39 | case 'PREVIOUS':
40 | onPrevious()
41 | break
42 | case 'SELECT_POST':
43 | setLocalState({ focusedComponent: 'post' })
44 | onSelectPost()
45 | break
46 | case 'FOCUS_CHANNEL_LIST':
47 | setLocalState({ focusedComponent: 'channels' })
48 | break
49 | case 'MARK_READ':
50 | onMarkRead()
51 | break
52 | default:
53 | // Nothing to handle
54 | break
55 | }
56 | }
57 |
58 | // Add class names and is-focused
59 | let shortcutsClassName = classes.shortcuts + ' layoutScrollTop'
60 | if (className) {
61 | shortcutsClassName += ' ' + className
62 | }
63 | if (localState.focusedComponent === 'timeline') {
64 | shortcutsClassName += ' is-focused'
65 | }
66 |
67 | return (
68 |
75 | {children}
76 |
77 | )
78 | }
79 |
80 | LayoutShortcuts.defaultProps = {
81 | onNext: () => {},
82 | onPrevious: () => {},
83 | onSelectPost: () => {},
84 | onMarkRead: () => {},
85 | }
86 |
87 | LayoutShortcuts.propTypes = {
88 | onNext: PropTypes.func.isRequired,
89 | onPrevious: PropTypes.func.isRequired,
90 | onSelectPost: PropTypes.func.isRequired,
91 | onMarkRead: PropTypes.func.isRequired,
92 | }
93 |
94 | export default withStyles(styles)(LayoutShortcuts)
95 |
--------------------------------------------------------------------------------
/src/components/Layout/Timeline/index.js:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import PropTypes from 'prop-types'
3 | import useMarkRead from '../../../hooks/use-mark-read'
4 | import { withStyles } from '@material-ui/core/styles'
5 | import 'intersection-observer'
6 | import { InView } from 'react-intersection-observer'
7 | import Button from '@material-ui/core/Button'
8 | import ReactList from 'react-list'
9 | import Shortcuts from '../Shortcuts'
10 | import Post from '../../Post'
11 | import styles from './style'
12 |
13 | const Timeline = ({
14 | classes,
15 | posts,
16 | channel,
17 | loadMore,
18 | loading,
19 | shownActions = null,
20 | }) => {
21 | const ref = useRef()
22 | const markRead = useMarkRead()
23 |
24 | const handleIntersection = async (inView, entry) => {
25 | if (!entry || !entry.intersectionRatio) {
26 | return null
27 | }
28 |
29 | const target = entry.target
30 | const itemId = target.dataset.id
31 | const itemIsRead = target.dataset.isread === 'true'
32 |
33 | if (channel && channel._t_autoRead && !itemIsRead) {
34 | markRead(channel.uid, itemId)
35 | }
36 |
37 | const isSecondLastItem =
38 | posts.length > 2 && itemId === posts[posts.length - 2]._id
39 |
40 | if (channel && channel._t_infiniteScroll && isSecondLastItem && loadMore) {
41 | loadMore()
42 | }
43 |
44 | return null
45 | }
46 |
47 | return (
48 | {
50 | if (ref.current && ref.current.scrollParent) {
51 | ref.current.scrollParent.scrollBy(0, 50)
52 | }
53 | }}
54 | onPrevious={() => {
55 | if (ref.current && ref.current.scrollParent) {
56 | ref.current.scrollParent.scrollBy(0, -50)
57 | }
58 | }}
59 | onMarkRead={() => {}}
60 | className={classes.timeline}
61 | >
62 | (
65 |
72 |
73 |
74 | )}
75 | length={posts.length}
76 | type="simple"
77 | minSize={5}
78 | />
79 |
80 | {channel && loadMore && (
81 |
88 | )}
89 |
90 | )
91 | }
92 |
93 | Timeline.defaultProps = {
94 | posts: [],
95 | }
96 |
97 | Timeline.propTypes = {
98 | posts: PropTypes.array.isRequired,
99 | }
100 |
101 | export default withStyles(styles)(Timeline)
102 |
--------------------------------------------------------------------------------
/src/components/Layout/Timeline/style.js:
--------------------------------------------------------------------------------
1 | export default theme => ({
2 | timeline: {
3 | display: 'block',
4 | boxSizing: 'border-box',
5 | width: '100%',
6 | height: '100%',
7 | padding: theme.spacing(2),
8 | paddingTop: 0,
9 | overflow: 'auto',
10 | overscrollBehaviorY: 'contain',
11 | outline: 'none',
12 | '& > div': {
13 | maxWidth: 600,
14 | },
15 | },
16 | shortcuts: {
17 | outline: 'none',
18 | },
19 | loadMore: {
20 | display: 'block',
21 | width: '100%',
22 | marginTop: 40,
23 | },
24 | })
25 |
--------------------------------------------------------------------------------
/src/components/Layout/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { withStyles } from '@material-ui/core/styles'
3 | import useCurrentChannel from '../../hooks/use-current-channel'
4 | import useTimeline from '../../hooks/use-timeline'
5 | import AddFeed from '../AddFeed'
6 | import Content from './Content'
7 | import styles from './style'
8 |
9 | const ContentFetcher = ({ channel }) => {
10 | const { data, fetchMore, networkStatus } = useTimeline({
11 | channel: channel.uid,
12 | unreadOnly: channel._t_unreadOnly,
13 | })
14 |
15 | return (
16 |
22 | )
23 | }
24 |
25 | const Layout = ({ classes }) => {
26 | const channel = useCurrentChannel()
27 |
28 | return (
29 |
30 | {channel && channel.uid &&
}
31 |
32 |
29 | {layouts.map(layout => {
30 | const Icon = layout.icon
31 | let iconClassName = classes.icon
32 | // Add class if layout selected
33 | if (layout.id === channel._t_layout) {
34 | iconClassName += ' ' + classes.iconSelected
35 | }
36 |
37 | return (
38 |
43 |
46 | updateChannel({
47 | variables: { uid: channel.uid, _t_layout: layout.id },
48 | })
49 | }
50 | >
51 |
52 |
53 |
54 | )
55 | })}
56 |
57 | )
58 | }
59 |
60 | export default withStyles(styles)(LayoutSwitcher)
61 |
--------------------------------------------------------------------------------
/src/components/LayoutSwitcher/style.js:
--------------------------------------------------------------------------------
1 | export default theme => ({
2 | menu: {
3 | display: 'flex',
4 | flexDirection: 'column',
5 | overflow: 'visible',
6 | background: theme.palette.primary.main,
7 | },
8 | icon: {
9 | color: 'rgba(255,255,255,.3)',
10 | '&:hover': {
11 | color: theme.palette.primary.contrastText,
12 | },
13 | },
14 | iconSelected: {
15 | color: theme.palette.primary.contrastText,
16 | },
17 | })
18 |
--------------------------------------------------------------------------------
/src/components/Login/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { Redirect } from 'react-router-dom'
4 | import {
5 | TextField,
6 | Dialog,
7 | DialogContent,
8 | DialogContentText,
9 | DialogTitle,
10 | LinearProgress,
11 | InputAdornment,
12 | IconButton,
13 | } from '@material-ui/core'
14 | import LoginIcon from '@material-ui/icons/Send'
15 | import gql from 'graphql-tag'
16 | import { useMutation } from 'react-apollo-hooks'
17 | import useLocalState from '../../hooks/use-local-state'
18 |
19 | const GET_AUTH_URL = gql`
20 | mutation GetAuthUrl($url: String!) {
21 | getAuthUrl(url: $url)
22 | }
23 | `
24 |
25 | const Login = ({ onClose }) => {
26 | const [localState] = useLocalState()
27 | const [me, setMe] = useState('')
28 | const [loading, setLoading] = useState(false)
29 |
30 | const getAuthUrl = useMutation(GET_AUTH_URL, {
31 | variables: { url: me },
32 | })
33 |
34 | // Gets the auth url and redirects on submit
35 | const handleSubmit = async e => {
36 | e.preventDefault()
37 | setLoading(true)
38 |
39 | try {
40 | const { data, error } = await getAuthUrl()
41 | const { getAuthUrl: url } = data
42 | if (error || !url) {
43 | alert('Uh oh, there was an error getting your authorization url')
44 | console.log('[Error getting auth url]', error)
45 | }
46 | window.location.href = url
47 | } catch (err) {
48 | console.log('[Error getting auth url]', err)
49 | }
50 | setLoading(false)
51 | return false
52 | }
53 |
54 | if (localState && localState.token) {
55 | return
56 | }
57 |
58 | return (
59 |
93 | )
94 | }
95 |
96 | Login.defaultProps = {
97 | onClose: () => {},
98 | }
99 |
100 | Login.propTypes = {
101 | onClose: PropTypes.func.isRequired,
102 | }
103 |
104 | export default Login
105 |
--------------------------------------------------------------------------------
/src/components/Map/Marker/index.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState, useEffect } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { withStyles } from '@material-ui/core/styles'
4 | import Popover from '@material-ui/core/Popover'
5 | import AuthorAvatar from '../../AuthorAvatar'
6 | import Post from '../../Post'
7 | import styles, { markerSize } from './style'
8 |
9 | const MapMarker = ({ classes, post, postOpen = false, author, left, top }) => {
10 | const [open, setOpen] = useState(postOpen)
11 | const [anchor, setAnchor] = useState(null)
12 |
13 | // Open / close on prop change
14 | useEffect(() => {
15 | if (postOpen !== open) {
16 | setOpen(postOpen)
17 | }
18 | }, [postOpen])
19 |
20 | return (
21 |
22 | {
25 | setOpen(true)
26 | setAnchor(e.target)
27 | e.preventDefault()
28 | }}
29 | style={{ left, top }}
30 | >
31 |
32 |
70 | {notifications.map(post => (
71 |
72 |
79 |
80 |
81 | ))}
82 | {after && (
83 |
91 | )}
92 |
96 |
100 |
101 | {loading && }
102 |
103 |
104 | )
105 | }
106 |
107 | export default ActionReply
108 |
--------------------------------------------------------------------------------
/src/components/Post/Actions/Repost.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { useMutation } from 'react-apollo-hooks'
3 | import { useSnackbar } from 'notistack'
4 | import RepostIcon from '@material-ui/icons/Repeat'
5 | import useUser from '../../../hooks/use-user'
6 | import BaseAction from './Base'
7 | import SnackbarLinkAction from '../../SnackbarActions/Link'
8 | import SnackbarUndo from '../../SnackbarActions/Undo'
9 | import { MICROPUB_CREATE, MICROPUB_DELETE } from '../../../queries'
10 |
11 | const ActionRepost = ({ url, menuItem }) => {
12 | const [loading, setLoading] = useState(false)
13 | const { enqueueSnackbar, closeSnackbar } = useSnackbar()
14 | const { user } = useUser()
15 | let mf2 = {
16 | type: ['h-entry'],
17 | properties: {
18 | 'repost-of': [url],
19 | },
20 | }
21 | if (user && user.settings.repostSyndication.length) {
22 | mf2.properties['mp-syndicate-to'] = user.settings.repostSyndication
23 | }
24 | const createRepost = useMutation(MICROPUB_CREATE, {
25 | variables: {
26 | json: JSON.stringify(mf2),
27 | },
28 | })
29 | const micropubDelete = useMutation(MICROPUB_DELETE)
30 |
31 | const onClick = async e => {
32 | try {
33 | setLoading(true)
34 | const {
35 | data: { micropubCreate: postUrl },
36 | } = await createRepost()
37 | enqueueSnackbar('Successfully reposted', {
38 | variant: 'success',
39 | action: key => [
40 | ,
41 | {
43 | closeSnackbar(key)
44 | await micropubDelete({ variables: { url: postUrl } })
45 | enqueueSnackbar('Deleted repost', { variant: 'success' })
46 | }}
47 | />,
48 | ],
49 | })
50 | } catch (err) {
51 | console.error('Error reposting', err)
52 | enqueueSnackbar('Error reposting', { variant: 'error' })
53 | }
54 | setLoading(false)
55 | }
56 | return (
57 | }
61 | menuItem={menuItem}
62 | loading={loading}
63 | />
64 | )
65 | }
66 |
67 | export default ActionRepost
68 |
--------------------------------------------------------------------------------
/src/components/Post/Actions/View.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import BaseAction from './Base'
3 | import ViewIcon from '@material-ui/icons/Link'
4 |
5 | const ActionView = ({ url, menuItem }) => (
6 |
7 | {}} icon={} />
8 |
9 | )
10 |
11 | export default ActionView
12 |
--------------------------------------------------------------------------------
/src/components/Post/Actions/style.js:
--------------------------------------------------------------------------------
1 | export default theme => ({
2 | actions: {
3 | display: 'flex',
4 | },
5 | moreButton: {
6 | marginLeft: 'auto',
7 | },
8 | })
9 |
--------------------------------------------------------------------------------
/src/components/Post/Content/TruncatedContentLoader.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { useMutation } from 'react-apollo-hooks'
4 | import Button from '@material-ui/core/Button'
5 | import CircularProgress from '@material-ui/core/CircularProgress'
6 | import { useSnackbar } from 'notistack'
7 | import { REFETCH_POST } from '../../../queries'
8 |
9 | const hasTruncatedContent = post => {
10 | const html =
11 | post && post.content ? post.content.html || post.content.text : null
12 | const url = post && post.url ? post.url : null
13 |
14 | if (!html || !url) {
15 | return false
16 | }
17 |
18 | // If twitter url then almost certainly not truncated
19 | if (new URL(url).hostname === 'twitter.com') {
20 | return false
21 | }
22 |
23 | const el = document.createElement('div')
24 | el.innerHTML = html
25 | if (el.innerText.endsWith('...')) {
26 | // The content ends with an ellipsis, it is probably truncated
27 | return true
28 | }
29 | if (url) {
30 | const selfLink = el.querySelector(`a[href^="${url}"]`)
31 | if (selfLink) {
32 | // The content links to itself. It might be truncated
33 | const linkText = selfLink.innerText.toLowerCase()
34 | const truncateWords = ['continue', 'read', 'more']
35 | for (const word of truncateWords) {
36 | if (linkText.includes(word)) {
37 | // The text contains one of the words above so probably is truncated
38 | return true
39 | }
40 | }
41 | }
42 | }
43 | return false
44 | }
45 |
46 | const TruncatedContentLoader = ({ post }) => {
47 | const [loading, setLoading] = useState(false)
48 | const [isTruncated, setIsTruncated] = useState(hasTruncatedContent(post))
49 | const { enqueueSnackbar } = useSnackbar()
50 | const refetchPost = useMutation(REFETCH_POST, {
51 | variables: { post: post._id, url: post.url },
52 | })
53 |
54 | useEffect(() => {
55 | setIsTruncated(hasTruncatedContent(post))
56 | }, [post])
57 |
58 | const handleLoad = async e => {
59 | e.preventDefault()
60 | setLoading(true)
61 | const {
62 | data: { refetchPost: update },
63 | error,
64 | } = await refetchPost()
65 | setLoading(false)
66 | setIsTruncated(false)
67 | if (error) {
68 | enqueueSnackbar('Error loading post content', { variant: 'error' })
69 | } else if (!update || !update.content) {
70 | enqueueSnackbar('Could not parse post content', { variant: 'warning' })
71 | }
72 | }
73 |
74 | if (isTruncated) {
75 | return (
76 |
93 | )
94 | }
95 | return null
96 | }
97 |
98 | TruncatedContentLoader.propTypes = {
99 | post: PropTypes.object.isRequired,
100 | }
101 |
102 | export default TruncatedContentLoader
103 |
--------------------------------------------------------------------------------
/src/components/Post/Content/index.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState } from 'react'
2 | import { withStyles } from '@material-ui/core/styles'
3 | import CardContent from '@material-ui/core/CardContent'
4 | import Collapse from '@material-ui/core/Collapse'
5 | import Typography from '@material-ui/core/Typography'
6 | import Button from '@material-ui/core/Button'
7 | import Divider from '@material-ui/core/Divider'
8 | import ExpandIcon from '@material-ui/icons/ExpandMore'
9 | import CollapseIcon from '@material-ui/icons/ExpandLess'
10 | import parse from 'html-react-parser'
11 | import TruncatedContentLoader from './TruncatedContentLoader'
12 | import style from './style'
13 |
14 | const TogetherCardContent = ({ classes, post, expandable = false }) => {
15 | const [expanded, setExpanded] = useState(false)
16 |
17 | const isExpandable = () => {
18 | let contentLength = 0
19 | if (post.content && post.content.text) {
20 | contentLength = post.content.text.length
21 | } else if (post.content && post.content.html) {
22 | contentLength = post.content.html.length
23 | }
24 | if (contentLength > 300) {
25 | return expandable
26 | }
27 | return false
28 | }
29 |
30 | const getContent = () => {
31 | if (post.summary && !post.content) {
32 | return {
33 | component: 'p',
34 | content: post.summary,
35 | }
36 | }
37 |
38 | if (post.content && post.content.html) {
39 | return {
40 | component: 'div',
41 | content: post.content.html,
42 | }
43 | }
44 |
45 | if (post.content && post.content.text) {
46 | return {
47 | component: 'p',
48 | content: post.content.text,
49 | }
50 | }
51 |
52 | return null
53 | }
54 |
55 | const content = getContent()
56 |
57 | if (content && content.component === 'div' && content.content) {
58 | content.content = parse(content.content, {
59 | replace: (domNode) => {
60 | // Open links in new tabs always
61 | if (domNode.name === 'a') {
62 | domNode.attribs.target = '_blank'
63 | domNode.attribs.rel = 'noopener noreferrer'
64 | }
65 | },
66 | })
67 | }
68 |
69 | return (
70 |
71 | {!!post.name && (
72 |
78 | )}
79 |
80 | {!!content && (
81 |
85 |
86 | {content.content}
87 |
88 |
89 |
90 | )}
91 |
92 | {isExpandable() && (
93 |
94 |
95 |
104 |
105 | )}
106 |
107 | )
108 | }
109 | export default withStyles(style)(TogetherCardContent)
110 |
--------------------------------------------------------------------------------
/src/components/Post/Content/style.js:
--------------------------------------------------------------------------------
1 | export default theme => ({
2 | content: {
3 | '& img': {
4 | maxWidth: '100%',
5 | height: 'auto',
6 | },
7 | '& blockquote': {
8 | borderLeft: '4px solid ' + theme.palette.primary.main,
9 | paddingLeft: theme.spacing(2),
10 | marginLeft: theme.spacing(2),
11 | '& blockquote': {
12 | marginLeft: theme.spacing(1),
13 | },
14 | },
15 | // Emoji images'
16 | '& img[src^="https://s.w.org/images/core/emoji"]': {
17 | width: '1em',
18 | },
19 | },
20 | divider: {
21 | marginBottom: theme.spacing(1),
22 | },
23 | })
24 |
--------------------------------------------------------------------------------
/src/components/Post/Header/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { CardHeader } from '@material-ui/core'
4 | import moment from 'moment'
5 | import useReactRouter from 'use-react-router'
6 | import AuthorAvatar from '../../AuthorAvatar'
7 | import useCurrentChannel from '../../../hooks/use-current-channel'
8 | import authorToAvatarData from '../../../modules/author-to-avatar-data'
9 |
10 | const TogetherCardHeader = ({ item, shownActions }) => {
11 | const { history } = useReactRouter()
12 | const channel = useCurrentChannel()
13 | // Parse author data
14 | const avatarData = authorToAvatarData(item.author)
15 |
16 | // Parse published date
17 | let date = 'unknown'
18 | if (item.published) {
19 | date = moment(item.published).fromNow()
20 | }
21 |
22 | if (!Array.isArray(shownActions)) {
23 | shownActions = ['consoleLog', 'markRead', 'remove']
24 | if (item.url) {
25 | shownActions.push('view')
26 | shownActions.push('refetch')
27 | }
28 | if (item.url && !item['likeOf'] && !item['repostOf']) {
29 | shownActions.push('like', 'repost', 'reply')
30 | }
31 | }
32 |
33 | const authorNameLink = avatarData.href ? (
34 |
35 | {avatarData.alt}
36 |
37 | ) : (
38 | avatarData.alt
39 | )
40 |
41 | return (
42 | {
44 | if (item._source && history && channel) {
45 | e.preventDefault()
46 | history.push(`/channel/${channel._t_slug}/${item._source}`)
47 | }
48 | }}
49 | title={authorNameLink}
50 | subheader={date}
51 | avatar={}
52 | />
53 | )
54 | }
55 |
56 | TogetherCardHeader.propTypes = {
57 | item: PropTypes.object.isRequired,
58 | }
59 |
60 | export default TogetherCardHeader
61 |
--------------------------------------------------------------------------------
/src/components/Post/Location/index.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 | import Map from '../../Map'
3 | import MapMarker from '../../Map/Marker'
4 | import CardContent from '@material-ui/core/CardContent'
5 | import Typography from '@material-ui/core/Typography'
6 |
7 | const TogetherCardLocation = ({ location, author }) => {
8 | let lat = false
9 | let lng = false
10 | if (!location) {
11 | return null
12 | }
13 | if (location.latitude && location.longitude) {
14 | lat = parseFloat(location.latitude)
15 | lng = parseFloat(location.longitude)
16 | }
17 |
18 | return (
19 |
20 | {location.name && (
21 |
22 | {location.name}
23 |
24 | )}
25 | {lat !== false && lng !== false && (
26 |
29 | )}
30 |
31 | )
32 | }
33 |
34 | export default TogetherCardLocation
35 |
--------------------------------------------------------------------------------
/src/components/Post/Meta.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { withStyles } from '@material-ui/core/styles'
3 | import { CardContent, Chip, Tooltip } from '@material-ui/core'
4 | import CategoryIcon from '@material-ui/icons/Label'
5 | import StatusIcon from '@material-ui/icons/Public'
6 | import VisibilityIcon from '@material-ui/icons/Visibility'
7 |
8 | const metaProperties = ['postStatus', 'visibility', 'category']
9 |
10 | const styles = theme => ({
11 | chip: {
12 | marginRight: theme.spacing(1),
13 | marginBottom: theme.spacing(1),
14 | },
15 | })
16 |
17 | function stringToColor(string) {
18 | if (!string) {
19 | return '#000'
20 | }
21 | let hash = 0
22 | for (let i = 0; i < string.length; i++) {
23 | hash = string.charCodeAt(i) + ((hash << 5) - hash)
24 | }
25 | let color = '#'
26 | for (let x = 0; x < 3; x++) {
27 | const value = (hash >> (x * 8)) & 0xff
28 | color += ('00' + value.toString(16)).substr(-2)
29 | }
30 | return color
31 | }
32 |
33 | const PostMeta = ({ item = {}, classes }) => {
34 | if (!metaProperties.find(prop => !!item[prop])) {
35 | return null
36 | }
37 | return (
38 |
39 | {!!item.category &&
40 | item.category.map((cat, i) => {
41 | return (
42 |
43 | }
47 | style={{ background: stringToColor(cat) }}
48 | />
49 |
50 | )
51 | })}
52 | {!!item.postStatus && (
53 |
54 | }
58 | />
59 |
60 | )}
61 | {!!item.visibility && (
62 |
63 | }
67 | />
68 |
69 | )}
70 |
71 | )
72 | }
73 |
74 | export default withStyles(styles)(PostMeta)
75 |
--------------------------------------------------------------------------------
/src/components/Post/Photos/index.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState } from 'react'
2 | import { withStyles } from '@material-ui/core/styles'
3 | import GridList from '@material-ui/core/GridList'
4 | import GridListTile from '@material-ui/core/GridListTile'
5 | import GallerySlider from '../../GallerySlider'
6 | import resizeImage from '../../../modules/get-image-proxy-url'
7 | import style from './style'
8 |
9 | const TogetherCardPhotos = ({ classes, photos }) => {
10 | const [selectedPhoto, setSelectedPhoto] = useState(null)
11 |
12 | const Photos = () => {
13 | if (photos.length === 1) {
14 | return (
15 | 
setSelectedPhoto(0)}
20 | />
21 | )
22 | } else if (Array.isArray(photos)) {
23 | let cols = photos.length
24 | if (cols === 4) {
25 | cols = 2
26 | }
27 | if (cols > 3) {
28 | cols = 3
29 | }
30 | let cellHeight = 200
31 | let cardWidth = document.getElementById('root').clientWidth - 49 - 12 - 12
32 | if (cardWidth < 600) {
33 | cellHeight = Math.floor(cardWidth / 3)
34 | }
35 | return (
36 |
37 | {photos.map((photo, i) => (
38 | setSelectedPhoto(i)}
42 | >
43 | 
51 |
52 | ))}
53 |
54 | )
55 | }
56 | return null
57 | }
58 |
59 | return (
60 |
61 |
62 | {selectedPhoto !== null && (
63 | ({ photo }))}
65 | startIndex={selectedPhoto}
66 | onClose={() => setSelectedPhoto(null)}
67 | open={true}
68 | />
69 | )}
70 |
71 | )
72 | }
73 |
74 | export default withStyles(style)(TogetherCardPhotos)
75 |
--------------------------------------------------------------------------------
/src/components/Post/Photos/style.js:
--------------------------------------------------------------------------------
1 | export default theme => ({
2 | fullImage: {
3 | display: 'block',
4 | maxWidth: '100%',
5 | margin: '0 auto',
6 | height: 'auto',
7 | },
8 | })
9 |
--------------------------------------------------------------------------------
/src/components/Post/ReplyContext/index.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 | import { withStyles } from '@material-ui/core/styles'
3 | import CardContent from '@material-ui/core/CardContent'
4 | import Typography from '@material-ui/core/Typography'
5 | import LikeIcon from '@material-ui/icons/ThumbUp'
6 | import BookmarkIcon from '@material-ui/icons/Bookmark'
7 | import ReplyIcon from '@material-ui/icons/Reply'
8 | import RepostIcon from '@material-ui/icons/Repeat'
9 | import QuoteIcon from '@material-ui/icons/FormatQuote'
10 | import Post from '../index'
11 | import style from './style'
12 |
13 | const TogetherCardReplyContext = ({ type, url, reference, classes }) => {
14 | let icon = null
15 | switch (type) {
16 | case 'reply':
17 | icon =
18 | break
19 | case 'like':
20 | icon =
21 | break
22 | case 'repost':
23 | icon =
24 | break
25 | case 'bookmark':
26 | icon =
27 | break
28 | case 'quotation':
29 | icon =
30 | break
31 | default:
32 | icon = null
33 | break
34 | }
35 | return (
36 |
37 |
38 |
39 | {icon}
40 |
41 | {url}
42 |
43 |
44 |
45 | {reference && (
46 |
47 |
51 |
52 | )}
53 |
54 | )
55 | }
56 | export default withStyles(style)(TogetherCardReplyContext)
57 |
--------------------------------------------------------------------------------
/src/components/Post/ReplyContext/style.js:
--------------------------------------------------------------------------------
1 | import { darken } from '@material-ui/core/styles/colorManipulator'
2 |
3 | export default theme => ({
4 | replyContext: {
5 | background:
6 | theme.palette.type === 'dark'
7 | ? darken(theme.palette.background.paper, 0.2)
8 | : darken(theme.palette.background.paper, 0.07),
9 | },
10 | replyUrl: {
11 | whiteSpace: 'nowrap',
12 | overflow: 'hidden',
13 | textOverflow: 'ellipsis',
14 | },
15 | icon: {
16 | marginRight: 10,
17 | marginBottom: -5,
18 | width: 18,
19 | height: 18,
20 | },
21 | })
22 |
--------------------------------------------------------------------------------
/src/components/Post/Shortcuts.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { withStyles } from '@material-ui/core/styles'
4 | import { Shortcuts } from 'react-shortcuts'
5 | import useLocalState from '../../hooks/use-local-state'
6 | import useMarkRead from '../../hooks/use-mark-read'
7 | import useMarkUnread from '../../hooks/use-mark-unread'
8 | import useCurrentChannel from '../../hooks/use-current-channel'
9 |
10 | const styles = theme => {
11 | const color =
12 | theme.palette.type === 'dark'
13 | ? theme.palette.secondary.main
14 | : theme.palette.primary.main
15 | return {
16 | main: {
17 | display: 'block',
18 | outline: 'none',
19 | '&:focus, &.is-focused': {
20 | boxShadow: `inset 0 0 4px ${color}`,
21 | },
22 | },
23 | }
24 | }
25 |
26 | const PostShortcuts = ({
27 | children,
28 | classes,
29 | focus,
30 | onNext,
31 | scrollElement,
32 | post,
33 | className,
34 | ...props
35 | }) => {
36 | const ref = useRef()
37 | const [localState, setLocalState] = useLocalState()
38 | const markRead = useMarkRead()
39 | const markUnread = useMarkUnread()
40 | const channel = useCurrentChannel()
41 |
42 | useEffect(() => {
43 | const el = ref.current._domNode
44 | if (
45 | focus &&
46 | localState.focusedComponent === 'post' &&
47 | el !== document.activeElement
48 | ) {
49 | el.focus()
50 | }
51 | }, [focus, localState.focusedComponent])
52 |
53 | const handleShortcuts = action => {
54 | switch (action) {
55 | case 'SCROLL_DOWN':
56 | if (scrollElement) {
57 | scrollElement.scrollBy(0, 50)
58 | }
59 | break
60 | case 'SCROLL_UP':
61 | if (scrollElement) {
62 | scrollElement.scrollBy(0, -50)
63 | }
64 | break
65 | case 'TO_TIMELINE':
66 | setLocalState({ focusedComponent: 'timeline' })
67 | break
68 | case 'NEXT':
69 | onNext()
70 | break
71 | case 'OPEN':
72 | if (post.url) {
73 | window.open(post.url, '_blank')
74 | }
75 | break
76 | case 'TOGGLE_READ':
77 | if (channel && channel.uid) {
78 | if (post._is_read) {
79 | markUnread(channel.uid, post._id)
80 | } else {
81 | markRead(channel.uid, post._id)
82 | }
83 | }
84 | break
85 | default:
86 | // Nothing to handle
87 | break
88 | }
89 | }
90 |
91 | const classNames = [classes.main]
92 | if (className) {
93 | classNames.push(className)
94 | }
95 | if (localState.focusedComponent === 'post' && focus) {
96 | classNames.push('is-focused')
97 | }
98 |
99 | return (
100 |
107 | {children}
108 |
109 | )
110 | }
111 |
112 | PostShortcuts.defaultProps = {
113 | focus: false,
114 | onNext: () => {},
115 | }
116 |
117 | PostShortcuts.propTypes = {
118 | post: PropTypes.object.isRequired,
119 | focus: PropTypes.bool.isRequired,
120 | onNext: PropTypes.func.isRequired,
121 | }
122 |
123 | export default withStyles(styles)(PostShortcuts)
124 |
--------------------------------------------------------------------------------
/src/components/Post/style.js:
--------------------------------------------------------------------------------
1 | export default theme => ({
2 | card: {
3 | maxWidth: '100%',
4 | marginTop: theme.spacing(3),
5 | marginBottom: theme.spacing(3),
6 | overflow: 'hidden',
7 | },
8 | video: {
9 | width: '100%',
10 | objectFit: 'contain',
11 | background: '#111',
12 | },
13 | })
14 |
--------------------------------------------------------------------------------
/src/components/ServiceWorker.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import { useSnackbar } from 'notistack'
3 | import { IconButton } from '@material-ui/core'
4 | import ReloadIcon from '@material-ui/icons/Refresh'
5 | import * as serviceWorker from '../serviceWorkerRegistration'
6 |
7 | const ReloadButton = ({ reg }) => {
8 | const { enqueueSnackbar } = useSnackbar()
9 |
10 | return (
11 | {
14 | try {
15 | const res = reg.waiting.postMessage('skipWaiting')
16 | console.log({ res })
17 | // window.location.reload(true)
18 | } catch (err) {
19 | console.error('[Error skipping service worker waiting]', err)
20 | enqueueSnackbar('Error loading new version', { variant: 'error' })
21 | }
22 | }}
23 | >
24 |
25 |
26 | )
27 | }
28 |
29 | const ServiceWorker = () => {
30 | const { enqueueSnackbar } = useSnackbar()
31 |
32 | useEffect(() => {
33 | serviceWorker.register({
34 | onUpdate: (reg) => {
35 | enqueueSnackbar('New version available. Click to reload.', {
36 | action: [],
37 | })
38 | },
39 | })
40 | }, [])
41 |
42 | return null
43 | }
44 |
45 | export default ServiceWorker
46 |
--------------------------------------------------------------------------------
/src/components/SettingsModal/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { withRouter } from 'react-router'
4 | import { withStyles } from '@material-ui/core/styles'
5 | import {
6 | Dialog,
7 | DialogContent,
8 | Slide,
9 | AppBar,
10 | Toolbar,
11 | Typography,
12 | } from '@material-ui/core'
13 | import IconButton from '@material-ui/core/IconButton'
14 | import CloseIcon from '@material-ui/icons/Close'
15 | import useReactRouter from 'use-react-router'
16 | import styles from './style'
17 |
18 | const Transition = React.forwardRef(function Transition(props, ref) {
19 | return
20 | })
21 |
22 | const SettingsModal = ({
23 | classes,
24 | children,
25 | singleColumn,
26 | onClose,
27 | title,
28 | contentStyle,
29 | ...dialogProps
30 | }) => {
31 | const { history } = useReactRouter()
32 | const [open, setOpen] = useState(true)
33 |
34 | const handleClose = () => {
35 | setOpen(false)
36 | if (onClose) {
37 | onClose()
38 | } else {
39 | history.push('/')
40 | }
41 | }
42 |
43 | return (
44 |
73 | )
74 | }
75 |
76 | SettingsModal.defaultProps = {
77 | singleColumn: false,
78 | }
79 |
80 | SettingsModal.propTypes = {
81 | title: PropTypes.string.isRequired,
82 | onClose: PropTypes.func,
83 | singleColumn: PropTypes.bool.isRequired,
84 | }
85 |
86 | export default withRouter(withStyles(styles)(SettingsModal))
87 |
--------------------------------------------------------------------------------
/src/components/SettingsModal/style.js:
--------------------------------------------------------------------------------
1 | export default theme => ({
2 | dialogPaper: {
3 | overflow: 'hidden',
4 | },
5 | wrapper: {
6 | position: 'relative',
7 | width: '50em',
8 | maxWidth: '100%',
9 | overflow: 'auto',
10 | },
11 | title: {
12 | flex: 1,
13 | fontWeight: 'normal',
14 | overflow: 'hidden',
15 | textOverflow: 'ellipsis',
16 | whiteSpace: 'nowrap',
17 | },
18 | singleColumn: {
19 | display: 'block',
20 | },
21 | twoColumns: {
22 | // [theme.breakpoints.up('sm')]: {
23 | // display: 'flex',
24 | // flexWrap: 'wrap',
25 | // flexDirection: 'row',
26 | // justifyContent: 'space-between',
27 | // '& > *': {
28 | // width: '48%',
29 | // },
30 | // },
31 | },
32 | })
33 |
--------------------------------------------------------------------------------
/src/components/Share/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Typography } from '@material-ui/core'
3 | import Meta from '../Meta'
4 | import Post from '../Post'
5 |
6 | const isUrl = string => {
7 | try {
8 | new URL(string)
9 | return true
10 | } catch (_) {
11 | return false
12 | }
13 | }
14 |
15 | const Share = () => {
16 | const parsedUrl = new URL(window.location)
17 | const title = parsedUrl.searchParams.get('title')
18 | const text = parsedUrl.searchParams.get('text')
19 | let url = parsedUrl.searchParams.get('url')
20 |
21 | if (!url && isUrl(title)) {
22 | url = title
23 | } else if (!url && isUrl(text)) {
24 | url = text
25 | }
26 |
27 | let cardTitle = 'Sharing'
28 | if (url) {
29 | cardTitle += ' ' + url
30 | }
31 |
32 | const post = {
33 | _id: null,
34 | _is_read: true,
35 | url: url,
36 | name: title,
37 | content: {
38 | text: text,
39 | // html: text,
40 | },
41 | }
42 |
43 | return (
44 |
45 |
46 |
47 | {cardTitle}
48 |
49 |
53 |
11 |
15 | {title}
16 |
17 |
18 |
19 | {keys.map(key => (
20 |
21 | {key.name}
22 |
23 | {key.shortcuts.map(key => (
24 |
29 | ))}
30 |
31 |
32 | ))}
33 |
34 |
35 |
77 |
78 |
79 | {!loading && res && res.items && res.items.length === 0 && (
80 |
81 | Nothing found...
82 |
83 | )}
84 | {res && res.items && (
85 |
98 | )}
99 | {loading && (
100 |
101 | )}
102 |
103 |
10 |
11 |
12 | 
13 |
14 |
15 | 
16 |
17 | 
23 |
24 |