7 |
8 | Before building the app, create your own `settings.ts` file in `src/app/` by copying `settings.sample.ts`.
9 |
10 | Build app:
11 |
12 | npm install
13 | npm run build
14 |
15 | Copy the files in `dist/` to your webspace and open index.html in your browser.
16 |
17 | ## Develop
18 |
19 | After first clone and after updating:
20 |
21 | npm install
22 |
23 | Start watcher to compile ts and run dev webserver:
24 |
25 | npm start
26 |
27 | ## License
28 |
29 | Copyright: AsamK 2016-2020
30 |
31 | Licensed under the GPLv3: http://www.gnu.org/licenses/gpl-3.0.html
32 |
--------------------------------------------------------------------------------
/img/clock.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/img/comments.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/img/down.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/img/menu.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/img/popular.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/img/up.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jodeljs",
3 | "description": "Jodel webapp",
4 | "license": "GPL-3.0",
5 | "repository": {
6 | "type": "git",
7 | "url": "git+ssh://git@github.com:AsamK/JodelJS.git"
8 | },
9 | "dependencies": {
10 | "classnames": "2.3.x",
11 | "leaflet": "1.8.x",
12 | "nprogress": "0.2.x",
13 | "react": "18.2.x",
14 | "react-document-title": "2.0.x",
15 | "react-dom": "18.2.x",
16 | "react-intl": "6.1.x",
17 | "react-redux": "8.0.x",
18 | "redux": "4.2.x",
19 | "redux-freeze": "0.1.x",
20 | "redux-thunk": "2.4.x",
21 | "reselect": "4.1.x",
22 | "tslib": "2.4.x"
23 | },
24 | "devDependencies": {
25 | "@types/leaflet": "1.8.x",
26 | "@types/nprogress": "0.2.x",
27 | "@types/react": "18.0.x",
28 | "@types/react-dom": "18.0.x",
29 | "@types/react-redux": "7.1.x",
30 | "@types/webpack-env": "1.18.x",
31 | "@typescript-eslint/eslint-plugin": "5.37.x",
32 | "@typescript-eslint/parser": "5.37.x",
33 | "autoprefixer": "10.4.11",
34 | "clean-webpack-plugin": "4.0.x",
35 | "copy-webpack-plugin": "11.0.x",
36 | "css-loader": "6.7.x",
37 | "css-minimizer-webpack-plugin": "4.1.x",
38 | "eslint": "8.23.x",
39 | "eslint-config-prettier": "8.5.x",
40 | "eslint-plugin-import": "2.26.x",
41 | "eslint-plugin-jsdoc": "39.3.x",
42 | "eslint-plugin-react-hooks": "4.6.x",
43 | "html-loader": "4.1.x",
44 | "html-webpack-plugin": "5.5.x",
45 | "mini-css-extract-plugin": "2.6.x",
46 | "normalize.css": "8.0.x",
47 | "postcss-loader": "7.0.x",
48 | "prettier": "^2.7.1",
49 | "sass": "1.54.x",
50 | "sass-loader": "13.0.x",
51 | "source-map-loader": "4.0.x",
52 | "style-loader": "3.3.x",
53 | "stylelint": "14.12.x",
54 | "stylelint-config-prettier": "^9.0.3",
55 | "stylelint-config-standard-scss": "5.0.x",
56 | "stylelint-order": "5.0.x",
57 | "stylelint-scss": "4.3.x",
58 | "terser-webpack-plugin": "5.3.x",
59 | "ts-loader": "9.3.x",
60 | "typescript": "4.8.x",
61 | "webpack": "5.74.x",
62 | "webpack-bundle-analyzer": "4.6.x",
63 | "webpack-cli": "4.10.x",
64 | "webpack-dev-server": "4.11.x",
65 | "workbox-webpack-plugin": "6.5.x"
66 | },
67 | "scripts": {
68 | "start": "webpack serve --mode=development",
69 | "build": "webpack --mode=production",
70 | "stylelint": "stylelint ./***/*.scss",
71 | "stylelint-fix": "stylelint ./***/*.scss --fix",
72 | "eslint": "eslint src",
73 | "eslint-fix": "eslint src --fix",
74 | "prettier": "prettier --check .",
75 | "prettier-fix": "prettier --write .",
76 | "lint": "npm run prettier && npm run eslint && npm run stylelint",
77 | "lint-fix": "npm run prettier-fix && npm run eslint-fix && npm run stylelint-fix",
78 | "bundle-report": "webpack --analyze"
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsamK/JodelJS/b569a23f44f4af4b5979cf2468a22c54ae9afe44/screenshot.png
--------------------------------------------------------------------------------
/src/app/mailAuth.ts:
--------------------------------------------------------------------------------
1 | import Settings from './settings';
2 |
3 | const headers = new Headers([['Content-Type', 'application/json']]);
4 |
5 | export async function requestEmailVerification(email: string) {
6 | const payload = {
7 | email,
8 | };
9 |
10 | const res = await fetch(Settings.EMAIL_REQUEST_HELPER_URL, {
11 | body: JSON.stringify(payload),
12 | headers,
13 | method: 'POST',
14 | mode: 'cors',
15 | });
16 |
17 | if (!res.ok) {
18 | throw res;
19 | }
20 | }
21 |
22 | export interface FirebaseTokenResponse {
23 | access_token: string;
24 | user_id: string;
25 | }
26 |
27 | export async function generateFirebaseToken(
28 | email: string,
29 | linkFromEmail: string,
30 | ): Promise
10 | Zurück
11 |
12 | );
13 | };
14 |
15 | export default BackButton;
16 |
--------------------------------------------------------------------------------
/src/views/BigPicture.scss:
--------------------------------------------------------------------------------
1 | @import '../../style/settings.scss';
2 |
3 | .big-picture {
4 | background-color: black;
5 | bottom: 0;
6 | left: 0;
7 | position: fixed;
8 | right: 0;
9 | top: 0;
10 | z-index: $z-index-overlay;
11 |
12 | img {
13 | height: 100%;
14 | object-fit: contain;
15 | width: 100%;
16 | }
17 |
18 | video {
19 | height: 100%;
20 | width: 100%;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/views/BigPicture.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import type { IPost } from '../interfaces/IPost';
4 | import './BigPicture.scss';
5 |
6 | export interface IBigPictureProps {
7 | post: IPost;
8 | }
9 |
10 | const BigPicture = ({ post }: IBigPictureProps) => {
11 | const imgRef = React.useRef window.history.back()} ref={imgRef}>
17 | {'video_url' in post && post.video_url ? (
18 |
19 | ) : post.image_url ? (
20 | 
21 | ) : null}
22 |
23 |
24 | );
25 | };
26 |
27 | export default BigPicture;
28 |
--------------------------------------------------------------------------------
/src/views/ChannelList.scss:
--------------------------------------------------------------------------------
1 | @import '../../style/settings.scss';
2 |
3 | .channel-list {
4 | background-color: #eee;
5 | bottom: 0;
6 | left: 0;
7 | overflow-y: scroll;
8 | position: absolute;
9 | right: 0;
10 | top: $top-bar-height;
11 | z-index: $z-index-sub-layer;
12 | }
13 |
14 | .channel-list_header {
15 | background-color: orange;
16 | color: white;
17 | letter-spacing: 0.25em;
18 | margin-bottom: 1px;
19 | padding: 1em;
20 | text-transform: uppercase;
21 | }
22 |
23 | .channel-list_filter {
24 | display: flex;
25 | flex-direction: column;
26 | }
27 |
28 | .channel-list_recommended,
29 | .channel-list_local,
30 | .channel-list_country {
31 | align-items: center;
32 | background: #ddd;
33 | color: #555;
34 | display: flex;
35 | justify-content: space-between;
36 | letter-spacing: 0.25em;
37 | margin-bottom: 1px;
38 | padding: 1em;
39 | text-transform: uppercase;
40 | }
41 |
42 | .channel-list_local,
43 | .channel-list_country {
44 | cursor: pointer;
45 |
46 | &:hover {
47 | background: #eee;
48 | }
49 | }
50 |
51 | .channel-count {
52 | font-size: 0.7rem;
53 | letter-spacing: initial;
54 | }
55 |
--------------------------------------------------------------------------------
/src/views/ChannelList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import type { IChannel } from '../interfaces/IChannel';
5 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
6 | import { switchPostSection } from '../redux/actions';
7 | import type { IJodelAppStore } from '../redux/reducers';
8 | import {
9 | countryChannelsSelector,
10 | followedChannelsSelector,
11 | localChannelsSelector,
12 | recommendedChannelsSelector,
13 | } from '../redux/selectors/channels';
14 |
15 | import './ChannelList.scss';
16 | import { ChannelListItem } from './ChannelListItem';
17 |
18 | interface IChannelListComponentProps {
19 | channels: IChannel[];
20 | recommendedChannels: IChannel[];
21 | localChannels: IChannel[];
22 | countryChannels: IChannel[];
23 | onChannelClick: (channelName: string) => void;
24 | }
25 |
26 | interface IChannelListComponentState {
27 | channelFilter: string;
28 | showLocalChannels: boolean;
29 | showCountryChannels: boolean;
30 | }
31 |
32 | export class ChannelListComponent extends React.Component<
33 | IChannelListComponentProps,
34 | IChannelListComponentState
35 | > {
36 | private static lastScrollPosition = 0;
37 |
38 | public state: IChannelListComponentState = {
39 | channelFilter: '',
40 | showCountryChannels: false,
41 | showLocalChannels: false,
42 | };
43 |
44 | private scrollable = React.createRef
79 |
119 | );
120 | }
121 |
122 | private createChannelNode(
123 | channel: IChannel,
124 | onChannelClick: (channel: string) => void,
125 | showImage: boolean,
126 | ): React.ReactElement | null {
127 | if (
128 | this.state.channelFilter &&
129 | !channel.channel.toLowerCase().includes(this.state.channelFilter.toLowerCase())
130 | ) {
131 | return null;
132 | }
133 | return (
134 | Kanäle(beta)
80 |
81 |
87 | {!this.state.channelFilter ? null : (
88 |
96 | {channelNodes}
97 | {recommendedChannelNodes.length === 0 ? null : (
98 |
99 | Vorschläge
100 |
102 | )}
103 | {recommendedChannelNodes}
104 | {localChannels.length === 0 ? null : (
105 | {recommendedChannels.length}
101 |
106 | Lokale
107 |
109 | )}
110 | {localChannelNodes}
111 | {countryChannels.length === 0 ? null : (
112 | {localChannels.length}
108 |
113 | Landesweit
114 |
116 | )}
117 | {countryChannelNodes}
118 | {countryChannels.length}
115 |
19 | {showImage && channel.image_url ? (
20 |
24 | ) : undefined}
25 |
42 | );
43 | }
44 |
45 | private onChannelClick = () => {
46 | this.props.onChannelClick(this.props.channel.channel);
47 | };
48 | }
49 |
--------------------------------------------------------------------------------
/src/views/ChannelTopBar.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames';
2 | import React from 'react';
3 | import { connect } from 'react-redux';
4 |
5 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
6 | import { followChannel } from '../redux/actions';
7 | import type { IJodelAppStore } from '../redux/reducers';
8 | import {
9 | isSelectedChannelFollowedSelector,
10 | selectedChannelFollowersCountSelector,
11 | selectedChannelNameLikeFollowedSelector,
12 | } from '../redux/selectors/channels';
13 |
14 | import BackButton from './BackButton';
15 |
16 | export interface IChannelTopBarProps {
17 | onFollowClick: (channel: string, follow: boolean) => void;
18 | channel?: string;
19 | followerCount: number;
20 | isFollowing: boolean;
21 | }
22 |
23 | const ChannelTopBar = ({
24 | onFollowClick,
25 | channel,
26 | followerCount,
27 | isFollowing,
28 | }: IChannelTopBarProps) => {
29 | return !channel ? null : (
30 | @{channel.channel}
26 |
27 | {channel.sponsored ? (
28 |
41 | (Sponsored)
29 | ) : undefined}
30 | {channel.followers ? (
31 |
32 | {channel.followers} Followers
33 |
34 | ) : undefined}
35 | {channel.country_followers ? (
36 |
37 | {channel.country_followers} Country wide
38 |
39 | ) : undefined}
40 |
31 | window.history.back()} />
32 |
41 | );
42 | };
43 |
44 | const mapStateToProps = (state: IJodelAppStore) => {
45 | return {
46 | channel: selectedChannelNameLikeFollowedSelector(state),
47 | followerCount: selectedChannelFollowersCountSelector(state),
48 | isFollowing: isSelectedChannelFollowedSelector(state),
49 | };
50 | };
51 |
52 | const mapDispatchToProps = (dispatch: JodelThunkDispatch) => {
53 | return {
54 | onFollowClick: (channel: string, follow: boolean) => {
55 | dispatch(followChannel(channel, follow));
56 | },
57 | };
58 | };
59 |
60 | export default connect(mapStateToProps, mapDispatchToProps)(ChannelTopBar);
61 |
--------------------------------------------------------------------------------
/src/views/ChildInfo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IChildInfoProps {
4 | child_count: number;
5 | }
6 |
7 | const ChildInfo = ({ child_count }: IChildInfoProps) => (
8 | @{channel}
33 |
34 | {followerCount > 0 ? followerCount : null}
35 |
40 | onFollowClick(channel, !isFollowing)}
38 | >
39 | 0 ? undefined : 'hidden' }}>
9 | {child_count} Kommentare
10 |
11 | );
12 |
13 | export default ChildInfo;
14 |
--------------------------------------------------------------------------------
/src/views/ColorPicker.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Settings from '../app/settings';
4 | import type { Color } from '../enums/Color';
5 |
6 | export interface IColorPickerProps {
7 | color?: Color;
8 | onChange: (color: Color) => void;
9 | }
10 |
11 | export default class ColorPicker extends React.PureComponent{colorNodes}
;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/views/EmailVerification.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import type { FirebaseTokenResponse } from '../app/mailAuth';
4 | import { generateFirebaseToken, requestEmailVerification } from '../app/mailAuth';
5 |
6 | export const EmailVerification: React.FC<{ onToken: (token: FirebaseTokenResponse) => void }> = ({
7 | onToken,
8 | }) => {
9 | const [email, setEmail] = React.useState('');
10 | const [emailLink, setEmailLink] = React.useState('');
11 | const [verificationRequested, setVerificationRequested] = React.useState(false);
12 | return (
13 |
14 |
15 | setEmail(e.target.value)} />
16 |
23 | {verificationRequested && (
24 | <>
25 |
26 | setEmailLink(e.target.value)}
30 | />
31 |
34 |
35 | )}
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/views/FirstStart.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FormattedMessage } from 'react-intl';
3 | import { useDispatch, useSelector } from 'react-redux';
4 |
5 | import type { FirebaseTokenResponse } from '../app/mailAuth';
6 | import Settings from '../app/settings';
7 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
8 | import {
9 | createNewAccount,
10 | setUseBrowserLocation,
11 | updateLocation,
12 | _setLocation,
13 | } from '../redux/actions';
14 | import { setDeviceUid } from '../redux/actions/api';
15 | import type { IJodelAppStore } from '../redux/reducers';
16 | import { deviceUidSelector, locationSelector } from '../redux/selectors/app';
17 |
18 | import { EmailVerification } from './EmailVerification';
19 | import { SelectDeviceUid } from './SelectDeviceUid';
20 | import { SelectLocation } from './SelectLocation';
21 |
22 | const FirstStart: React.FC = () => {
23 | const dispatch = useDispatch
39 |
40 |
45 | {firebaseToken ? (
46 | Successfully verified an email address for registration.
47 | ) : (
48 |
123 | );
124 | };
125 |
126 | export default FirstStart;
127 |
--------------------------------------------------------------------------------
/src/views/HashtagTopBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
5 | import type { IJodelAppStore } from '../redux/reducers';
6 | import { selectedHashtagNameSelector } from '../redux/selectors/view';
7 |
8 | import BackButton from './BackButton';
9 |
10 | export interface IHashtagTopBarProps {
11 | hashtag: string | undefined;
12 | }
13 |
14 | const HashtagTopBarComponent = ({ hashtag }: IHashtagTopBarProps) => {
15 | return !hashtag ? null : (
16 |
40 |
45 | {firebaseToken ? (
46 | Successfully verified an email address for registration.
47 | ) : (
48 |
17 | window.history.back()} />
18 |
20 | );
21 | };
22 |
23 | const mapStateToProps = (state: IJodelAppStore) => {
24 | return {
25 | hashtag: selectedHashtagNameSelector(state),
26 | };
27 | };
28 |
29 | const mapDispatchToProps = (_dispatch: JodelThunkDispatch) => {
30 | return {};
31 | };
32 |
33 | export const HashtagTopBar = connect(mapStateToProps, mapDispatchToProps)(HashtagTopBarComponent);
34 |
--------------------------------------------------------------------------------
/src/views/Jodel.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import type { IPost } from '../interfaces/IPost';
5 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
6 | import { fetchPostsIfNeeded } from '../redux/actions';
7 | import { getNotificationsIfAvailable } from '../redux/actions/api';
8 | import type { IJodelAppStore } from '../redux/reducers';
9 | import {
10 | deviceUidSelector,
11 | isConfigAvailableSelector,
12 | isRegisteredSelector,
13 | } from '../redux/selectors/app';
14 | import { selectedPicturePostSelector, selectedPostIdSelector } from '../redux/selectors/posts';
15 | import {
16 | addPostVisibleSelector,
17 | channelListVisibleSelector,
18 | notificationsVisibleSelector,
19 | searchVisibleSelector,
20 | settingsVisibleSelector,
21 | } from '../redux/selectors/view';
22 |
23 | import BigPicture from './BigPicture';
24 | import ChannelTopBar from './ChannelTopBar';
25 | import FirstStart from './FirstStart';
26 | import { HashtagTopBar } from './HashtagTopBar';
27 | import PostDetails from './PostDetails';
28 | import { PostListContainer } from './PostListContainer';
29 | import { PostTopBar } from './PostTopBar';
30 | import Progress from './Progress';
31 | import ShareLink from './ShareLink';
32 | import { ToastContainer } from './ToastContainer';
33 | import { TopBar } from './TopBar';
34 |
35 | const LazyAddPost = React.lazy(() => import('./AddPost'));
36 | const LazyNotificationList = React.lazy(() => import('./NotificationList'));
37 | const LazySearch = React.lazy(() => import('./Search'));
38 | const LazyAppSettings = React.lazy(() => import('./AppSettings'));
39 | const LazyChannelList = React.lazy(() => import('./ChannelList'));
40 |
41 | export interface IJodelProps {
42 | addPostVisible: boolean;
43 | selectedPostId: string | null;
44 | selectedPicturePost: IPost | null;
45 | settingsVisible: boolean;
46 | deviceUid: string | null;
47 | isRegistered: boolean;
48 | channelListVisible: boolean;
49 | notificationsVisible: boolean;
50 | searchVisible: boolean;
51 | isConfigAvailable: boolean;
52 | refresh: () => void;
53 | }
54 |
55 | class JodelComponent extends React.Component#{hashtag}
19 |
72 |
75 | );
76 | } else if (!this.props.isConfigAvailable) {
77 | return null;
78 | }
79 |
80 | let content = null;
81 |
82 | if (this.props.addPostVisible) {
83 | content =
95 |
98 | );
99 | } else {
100 | content = (
101 |
102 |
106 | );
107 | }
108 | let overlay = null;
109 | if (this.props.selectedPicturePost) {
110 | overlay =
115 | ...
}>{content}
118 | {overlay}
119 |
15 |
18 | );
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/views/Menu.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:math';
2 |
3 | @import '../../style/settings.scss';
4 |
5 | .menu {
6 | cursor: pointer;
7 | flex: none;
8 | height: math.div($top-bar-height, 3);
9 | padding: math.div($top-bar-height, 3) 0.6em;
10 |
11 | &::before {
12 | background: url('../../img/menu.svg') no-repeat center;
13 | content: ' ';
14 | display: block;
15 | height: math.div($top-bar-height, 3);
16 | width: $top-bar-height * 0.5;
17 | }
18 | }
19 |
20 | .menu_new-notifications::after {
21 | background-color: blue;
22 | border-radius: 10px;
23 | content: ' ';
24 | height: 10px;
25 | left: $top-bar-height * 0.5;
26 | position: absolute;
27 | top: $top-bar-height * 0.25;
28 | width: 10px;
29 | }
30 |
31 | .menu_content {
32 | background-color: #eee;
33 | box-shadow: $menu-shadow;
34 | left: 0;
35 | list-style-type: none;
36 | padding: 0;
37 | position: absolute;
38 | z-index: $z-index-menu-layer;
39 | }
40 |
41 | .menu_entry {
42 | > * {
43 | height: 2em;
44 | padding: 1em 1.3em 1em 1em;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/views/Menu.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames';
2 | import React from 'react';
3 | import { FormattedMessage, FormattedNumber } from 'react-intl';
4 | import { connect } from 'react-redux';
5 |
6 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
7 | import { showNotifications, showSearch, showSettings } from '../redux/actions';
8 | import { showPictureOfDay } from '../redux/actions/api';
9 | import type { IJodelAppStore } from '../redux/reducers';
10 | import { unreadNotificationsCountSelector } from '../redux/selectors/notifications';
11 |
12 | import './Menu.scss';
13 | import { SectionLink } from './SectionLink';
14 |
15 | interface IMenuComponentProps {
16 | showSettingsCallback: () => void;
17 | showNotificationsCallback: () => void;
18 | showSearchCallback: () => void;
19 | showPictureOfDayCallback: () => void;
20 | unreadNotifications: number;
21 | }
22 |
23 | interface IMenuComponentState {
24 | menuOpen: boolean;
25 | }
26 |
27 | class MenuComponent extends React.Component{distance}km weg
16 | {location}
17 | 0,
47 | })}
48 | tabIndex={99999999}
49 | onClick={() => this.setState({ menuOpen: !this.state.menuOpen })}
50 | >
51 | {!this.state.menuOpen ? (
52 | ''
53 | ) : (
54 |
104 | );
105 | }
106 | }
107 |
108 | const mapStateToProps = (state: IJodelAppStore) => {
109 | return {
110 | unreadNotifications: unreadNotificationsCountSelector(state),
111 | };
112 | };
113 |
114 | const mapDispatchToProps = (dispatch: JodelThunkDispatch) => {
115 | return {
116 | showNotificationsCallback: () => dispatch(showNotifications(true)),
117 | showPictureOfDayCallback: () => dispatch(showPictureOfDay()),
118 | showSearchCallback: () => dispatch(showSearch(true)),
119 | showSettingsCallback: () => dispatch(showSettings(true)),
120 | };
121 | };
122 |
123 | export const Menu = connect(mapStateToProps, mapDispatchToProps)(MenuComponent);
124 |
--------------------------------------------------------------------------------
/src/views/Message.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IMessageProps {
4 | message: string;
5 | link?: { url: string; title?: string };
6 | onAtClick: (e: React.MouseEvent-
55 |
-
56 | 57 |62 |
61 |
63 | -
64 |
65 |
66 | -
67 |
68 |
69 | -
70 |
71 |
72 | -
73 |
74 |
75 | -
76 | 77 |90 |
81 | {unreadNotifications === 0 ? ( 82 | '' 83 | ) : ( 84 | <> 85 | ( 86 | ) 87 | 88 | )} 89 |
91 | -
92 | 93 |95 |
94 |
96 | -
97 | 98 |100 |
99 |
101 |
69 | {messageParts}
70 | {link ? (
71 |
76 | );
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/views/NotificationList.scss:
--------------------------------------------------------------------------------
1 | @import '../../style/settings.scss';
2 |
3 | .notification-list {
4 | background-color: #eee;
5 | bottom: 0;
6 | left: 0;
7 | overflow-y: scroll;
8 | position: absolute;
9 | right: 0;
10 | top: $top-bar-height;
11 | z-index: $z-index-sub-layer;
12 | }
13 |
--------------------------------------------------------------------------------
/src/views/NotificationList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import type { INotification } from '../interfaces/INotification';
5 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
6 | import { selectPostFromNotification } from '../redux/actions';
7 | import type { IJodelAppStore } from '../redux/reducers';
8 | import { notificationsSelector } from '../redux/selectors/notifications';
9 |
10 | import './NotificationList.scss';
11 | import { NotificationListItem } from './NotificationListItem';
12 |
13 | export interface INotificationListComponentProps {
14 | notifications: readonly INotification[];
15 | selectPost: (postId: string) => void;
16 | }
17 |
18 | class NotificationListComponent extends React.PureComponent
72 | {link.title}: {link.url}
73 |
74 | ) : null}
75 |
27 | {notifications.length === 0
28 | ? 'Noch keine Benachrichtigungen vorhanden'
29 | : notifications.map(n => (
30 |
36 | );
37 | }
38 | }
39 |
40 | const mapStateToProps = (state: IJodelAppStore) => {
41 | return {
42 | notifications: notificationsSelector(state),
43 | };
44 | };
45 |
46 | const mapDispatchToProps = (dispatch: JodelThunkDispatch) => {
47 | return {
48 | selectPost: (postId: string) => dispatch(selectPostFromNotification(postId)),
49 | };
50 | };
51 |
52 | export default connect(mapStateToProps, mapDispatchToProps)(NotificationListComponent);
53 |
--------------------------------------------------------------------------------
/src/views/NotificationListItem.scss:
--------------------------------------------------------------------------------
1 | .notification-list-item {
2 | background-color: white;
3 | cursor: pointer;
4 | display: flex;
5 | margin-bottom: 1px;
6 | padding: 10px 0;
7 |
8 | &.unread .details {
9 | font-weight: bolder;
10 | }
11 |
12 | .type {
13 | flex: none;
14 | font-size: 0.6em;
15 | overflow: hidden;
16 | width: 40px;
17 | }
18 |
19 | .details {
20 | display: flex;
21 | flex: 1 1;
22 | flex-direction: column;
23 | margin: 0 10px;
24 | overflow: hidden;
25 |
26 | .info-text {
27 | font-size: 0.8em;
28 | }
29 |
30 | .message,
31 | .info-text {
32 | flex: auto;
33 | overflow: hidden;
34 | text-overflow: ellipsis;
35 | white-space: nowrap;
36 | }
37 | }
38 |
39 | .time {
40 | flex: none;
41 | font-size: 0.8em;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/views/NotificationListItem.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames';
2 | import React from 'react';
3 |
4 | import type { INotification } from '../interfaces/INotification';
5 | import { getNotificationDescription } from '../utils/notification.utils';
6 |
7 | import './NotificationListItem.scss';
8 | import { Time } from './Time';
9 |
10 | interface INotificationListItemProps {
11 | notification: INotification;
12 | selectPost: (postId: string) => void;
13 | }
14 |
15 | export const NotificationListItem = ({ notification, selectPost }: INotificationListItemProps) => {
16 | return (
17 | {
21 | selectPost(notification.post_id);
22 | }}
23 | >
24 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/views/PostDetails.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import type { IPost } from '../interfaces/IPost';
5 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
6 | import { fetchMoreComments, showAddPost } from '../redux/actions';
7 | import type { IJodelAppStore } from '../redux/reducers';
8 | import { isLocationKnownSelector } from '../redux/selectors/app';
9 | import { selectedPostChildrenSelector, selectedPostSelector } from '../redux/selectors/posts';
10 |
11 | import AddButton from './AddButton';
12 | import { Post } from './Post';
13 | import PostList from './PostList';
14 | import ScrollToBottomButton from './ScrollToBottomButton';
15 |
16 | interface IPostDetailsPropsComponent {
17 | post: IPost | null;
18 | postChildren: IPost[] | null;
19 | locationKnown: boolean;
20 | onAddClick: (e: React.MouseEvent{notification.type}
25 |
26 |
29 |
30 | {getNotificationDescription(notification)}
27 | {notification.message}
28 |
67 |
72 | );
73 | }
74 |
75 | private onScroll = () => {
76 | const element = this.scrollable.current;
77 | if (!element || !this.props.onLoadMore) {
78 | return;
79 | }
80 | const isNearBottom =
81 | element.scrollTop > 0 &&
82 | element.scrollTop + element.clientHeight >= element.scrollHeight - 500;
83 | if (isNearBottom && this.scrollAtBottom !== isNearBottom) {
84 | this.scrollAtBottom = isNearBottom;
85 | this.props.onLoadMore();
86 | } else {
87 | this.scrollAtBottom = isNearBottom;
88 | }
89 | };
90 |
91 | private scrollToBottom = () => {
92 | if (this.scrollable.current) {
93 | this.scrollable.current.scrollTop = this.scrollable.current.scrollHeight;
94 | }
95 | };
96 |
97 | private onPostClick = () => {
98 | // Do nothing
99 | };
100 | }
101 |
102 | const mapStateToProps = (state: IJodelAppStore) => {
103 | return {
104 | locationKnown: isLocationKnownSelector(state),
105 | post: selectedPostSelector(state),
106 | postChildren: selectedPostChildrenSelector(state),
107 | };
108 | };
109 |
110 | const mapDispatchToProps = (dispatch: JodelThunkDispatch) => {
111 | return {
112 | onAddClick(): void {
113 | dispatch(showAddPost(true));
114 | },
115 | onLoadMore(): void {
116 | dispatch(fetchMoreComments());
117 | },
118 | };
119 | };
120 |
121 | export default connect(mapStateToProps, mapDispatchToProps)(PostDetailsComponent);
122 |
--------------------------------------------------------------------------------
/src/views/PostList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import type { IPost } from '../interfaces/IPost';
4 |
5 | import { PostListItem } from './PostListItem';
6 |
7 | export interface IPostListProps {
8 | posts: IPost[];
9 | sortType?: string;
10 | section?: string;
11 | lastUpdated?: number;
12 | parentPost?: IPost;
13 | onPostClick: (post: IPost) => void;
14 | onLoadMore?: () => void;
15 | connectScrollTarget?: (element: HTMLElement) => void;
16 | }
17 |
18 | export default class PostList extends React.PureComponent
67 | {postNodes}
68 |
69 | );
70 | }
71 |
72 | private onScroll = () => {
73 | const element = this.scrollable.current;
74 | if (!element || !this.props.onLoadMore) {
75 | return;
76 | }
77 | const newFlag =
78 | element.scrollTop > 0 &&
79 | element.scrollTop + element.clientHeight >= element.scrollHeight - 500;
80 | if (this.scrollAtBottom !== newFlag && newFlag) {
81 | this.scrollAtBottom = newFlag;
82 | this.props.onLoadMore();
83 | } else {
84 | this.scrollAtBottom = newFlag;
85 | }
86 | };
87 | }
88 |
--------------------------------------------------------------------------------
/src/views/PostListContainer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import { PostListSortType } from '../enums/PostListSortType';
5 | import type { IPost } from '../interfaces/IPost';
6 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
7 | import { fetchMorePosts, selectPost, showAddPost, updatePosts } from '../redux/actions';
8 | import type { IJodelAppStore } from '../redux/reducers';
9 | import { isLocationKnownSelector } from '../redux/selectors/app';
10 | import {
11 | selectedSectionLastUpdatedSelector,
12 | selectedSectionSortPostsSelector,
13 | } from '../redux/selectors/posts';
14 | import { selectedSectionSelector, selectedSortTypeSelector } from '../redux/selectors/view';
15 |
16 | import AddButton from './AddButton';
17 | import PostList from './PostList';
18 | import { SortTypeLink } from './SortTypeLink';
19 | import { StickyList } from './StickyList';
20 |
21 | export interface IPostListContainerProps {}
22 |
23 | export interface IPostListContainerComponentProps extends IPostListContainerProps {
24 | section: string;
25 | sortType: PostListSortType;
26 | lastUpdated?: number;
27 | posts: IPost[];
28 | locationKnown: boolean;
29 | onPostClick: (post: IPost) => void;
30 | onLoadMore?: () => void;
31 | onAddClick: (e: React.MouseEvent
65 | {section !== 'location' ? null :
82 | );
83 | }
84 |
85 | private connectScrollTarget = (target: HTMLElement) => {
86 | this.scrollable = target;
87 | if (!target) {
88 | return;
89 | }
90 | if (
91 | PostListContainerComponent.lastScrollSection ===
92 | this.props.section + this.props.sortType
93 | ) {
94 | target.scrollTop = PostListContainerComponent.lastScrollPosition;
95 | } else {
96 | PostListContainerComponent.lastScrollPosition = 0;
97 | }
98 | };
99 | }
100 |
101 | const mapStateToProps = (state: IJodelAppStore) => {
102 | return {
103 | lastUpdated: selectedSectionLastUpdatedSelector(state) || undefined,
104 | locationKnown: isLocationKnownSelector(state),
105 | posts: selectedSectionSortPostsSelector(state),
106 | section: selectedSectionSelector(state),
107 | sortType: selectedSortTypeSelector(state),
108 | };
109 | };
110 |
111 | const mapDispatchToProps = (dispatch: JodelThunkDispatch) => {
112 | return {
113 | onAddClick(): void {
114 | dispatch(showAddPost(true));
115 | },
116 | onLoadMore(): void {
117 | dispatch(fetchMorePosts());
118 | },
119 | onPostClick(post: IPost): void {
120 | dispatch(selectPost(post != null ? post.post_id : null));
121 | },
122 | onRefresh(): void {
123 | dispatch(updatePosts());
124 | },
125 | };
126 | };
127 |
128 | export const PostListContainer = connect(
129 | mapStateToProps,
130 | mapDispatchToProps,
131 | )(PostListContainerComponent);
132 |
--------------------------------------------------------------------------------
/src/views/PostListItem.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { UserHandle } from '../enums/UserHandle';
4 | import type { IPost } from '../interfaces/IPost';
5 |
6 | import { Post } from './Post';
7 |
8 | export class PostListItem extends React.PureComponent<{
9 | post: IPost;
10 | parentPostId?: string;
11 | onPostClick: (post: IPost) => void;
12 | }> {
13 | public render(): React.ReactElement | null {
14 | const { post, parentPostId } = this.props;
15 |
16 | const author =
17 | parentPostId == null
18 | ? post.badge
19 | : post.user_handle === UserHandle.OJ
20 | ? 'OJ'
21 | : post.replier
22 | ? `C${post.replier}`
23 | : undefined;
24 |
25 | return (
26 |
77 |
81 |
36 |
63 | );
64 | };
65 |
66 | const mapStateToProps = (state: IJodelAppStore) => {
67 | return {
68 | post: selectedPostSelector(state),
69 | };
70 | };
71 |
72 | const mapDispatchToProps = (dispatch: JodelThunkDispatch, ownProps: IPostTopBarStateProps) => {
73 | return {
74 | onBackClick: () => {
75 | window.history.back();
76 | },
77 | onOjFilterClick: () => {
78 | if (!ownProps.post) {
79 | return;
80 | }
81 | dispatch(ojFilterPost(ownProps.post.post_id, !ownProps.post.oj_filtered));
82 | },
83 | onPinClick: () => {
84 | if (!ownProps.post) {
85 | return;
86 | }
87 | const isPinned = ownProps.post.pinned && ownProps.post.pinned;
88 | dispatch(pin(ownProps.post.post_id, !isPinned));
89 | },
90 | onShareClick: () => {
91 | if (!ownProps.post) {
92 | return;
93 | }
94 | dispatch(sharePost(ownProps.post.post_id));
95 | },
96 | };
97 | };
98 |
99 | export const PostTopBar = connect(mapStateToProps)(
100 | connect(() => ({}), mapDispatchToProps)(PostTopBarComponent),
101 | );
102 |
--------------------------------------------------------------------------------
/src/views/Progress.tsx:
--------------------------------------------------------------------------------
1 | import NProgress from 'nprogress';
2 | import 'nprogress/nprogress.css';
3 | import React from 'react';
4 | import { connect } from 'react-redux';
5 |
6 | import type { IJodelAppStore } from '../redux/reducers';
7 | import { isSelectedSectionFetchingSelector } from '../redux/selectors/posts';
8 |
9 | interface IProgressProps {
10 | isFetching: boolean;
11 | }
12 |
13 | class Progress extends React.PureComponent
38 | {post.shareable && post.shareable ? (
39 |
62 |
40 | {post.share_count && post.share_count > 0 ? post.share_count : ''}
41 |
42 |
43 | ) : (
44 | ''
45 | )}
46 |
47 |
53 |
54 |
55 | {post.pin_count && post.pin_count > 0 ? post.pin_count : ''}
56 |
60 |
61 |
28 |
42 |
43 |
49 | );
50 | }
51 | }
52 |
53 | const mapStateToProps = (state: IJodelAppStore) => {
54 | return {
55 | suggestedHashtags: state.account.suggestedHashtags,
56 | };
57 | };
58 |
59 | const mapDispatchToProps = (dispatch: JodelThunkDispatch) => {
60 | return {
61 | searchPosts: (message: string, suggested: boolean) =>
62 | dispatch(searchPosts(message, suggested)),
63 | };
64 | };
65 |
66 | export default connect(mapStateToProps, mapDispatchToProps)(SearchComponent);
67 |
--------------------------------------------------------------------------------
/src/views/SectionLink.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames';
2 | import React from 'react';
3 | import { FormattedMessage } from 'react-intl';
4 | import { connect } from 'react-redux';
5 |
6 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
7 | import { switchPostSection } from '../redux/actions';
8 | import type { IJodelAppStore } from '../redux/reducers';
9 | import { selectedSectionSelector } from '../redux/selectors/view';
10 |
11 | interface ISectionLinkProps {
12 | section: string;
13 | }
14 |
15 | interface ISectionLinkComponentProps extends ISectionLinkProps {
16 | active?: boolean;
17 | onClick?: () => void;
18 | }
19 |
20 | const SectionLinkComponent = ({ section, active, onClick }: ISectionLinkComponentProps) => {
21 | let name;
22 | switch (section) {
23 | case 'location':
24 | name =
44 | {this.props.suggestedHashtags.map(hashtag => (
45 |
48 | #{hashtag}
46 | ))}
47 |
44 | {name}
45 |
46 | );
47 | };
48 |
49 | const mapStateToProps = (state: IJodelAppStore, ownProps: ISectionLinkProps) => {
50 | return {
51 | active: ownProps.section === selectedSectionSelector(state),
52 | };
53 | };
54 |
55 | const mapDispatchToProps = (dispatch: JodelThunkDispatch, ownProps: ISectionLinkProps) => {
56 | return {
57 | onClick: () => {
58 | dispatch(switchPostSection(ownProps.section));
59 | },
60 | };
61 | };
62 |
63 | export const SectionLink = connect(mapStateToProps, mapDispatchToProps)(SectionLinkComponent);
64 |
--------------------------------------------------------------------------------
/src/views/SelectDeviceUid.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FormattedMessage } from 'react-intl';
3 |
4 | const CREATE_NEW = 'CREATE_NEW';
5 | const USE_EXISTING = 'USE_EXISTING';
6 |
7 | export interface ISelectDeviceUidProps {
8 | deviceUid: string | null;
9 | setDeviceUid: (deviceUid: string | null) => void;
10 | }
11 |
12 | export interface ISelectDeviceUidState {
13 | deviceUid: string;
14 | radioState: string;
15 | }
16 |
17 | export class SelectDeviceUid extends React.PureComponent<
18 | ISelectDeviceUidProps,
19 | ISelectDeviceUidState
20 | > {
21 | constructor(props: ISelectDeviceUidProps) {
22 | super(props);
23 | this.state = {
24 | deviceUid: !props.deviceUid ? '' : props.deviceUid,
25 | radioState: CREATE_NEW,
26 | };
27 | }
28 |
29 | public render(): React.ReactElement | null {
30 | return (
31 |
32 |
44 |
56 | {this.state.radioState === USE_EXISTING ? (
57 |
77 | ) : (
78 | ''
79 | )}
80 |
81 | );
82 | }
83 |
84 | private handleChangeText = (event: React.ChangeEvent
28 |
109 | )}
110 |
111 | );
112 | }
113 |
114 | private handleChangeLocation = (location: IGeoCoordinates) => {
115 | this.props.onChange(this.props.useBrowserLocation, location);
116 | };
117 |
118 | private handleChangeLatitude = (event: React.ChangeEvent
29 |
41 |
53 |
54 | {useBrowserLocation ? (
55 |
56 |
78 | ) : (
79 |
57 |
80 | ...
}>
81 |
28 |
38 | );
39 | }
40 |
41 | const mapStateToProps = (state: IJodelAppStore) => {
42 | return {
43 | link: shareLinkSelector(state),
44 | };
45 | };
46 |
47 | export default connect(mapStateToProps)(ShareLink);
48 |
--------------------------------------------------------------------------------
/src/views/SortTypeLink.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames';
2 | import React from 'react';
3 | import { connect } from 'react-redux';
4 |
5 | import { PostListSortType } from '../enums/PostListSortType';
6 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
7 | import { switchPostListSortType } from '../redux/actions';
8 | import type { IJodelAppStore } from '../redux/reducers';
9 | import { selectedSortTypeSelector } from '../redux/selectors/view';
10 |
11 | interface ISortTypeLinkProps {
12 | sortType: PostListSortType;
13 | }
14 |
15 | interface ISortTypeLinkComponentProps extends ISortTypeLinkProps {
16 | active: boolean;
17 | sortType: PostListSortType;
18 | onClick: () => void;
19 | }
20 |
21 | const SortTypeLinkComponent = ({ sortType, active, onClick }: ISortTypeLinkComponentProps) => (
22 |
33 | );
34 |
35 | const mapStateToProps = (state: IJodelAppStore, ownProps: ISortTypeLinkProps) => {
36 | return {
37 | active: ownProps.sortType === selectedSortTypeSelector(state),
38 | };
39 | };
40 |
41 | const mapDispatchToProps = (dispatch: JodelThunkDispatch, ownProps: ISortTypeLinkProps) => {
42 | return {
43 | onClick: () => {
44 | dispatch(switchPostListSortType(ownProps.sortType));
45 | },
46 | };
47 | };
48 |
49 | export const SortTypeLink = connect(mapStateToProps, mapDispatchToProps)(SortTypeLinkComponent);
50 |
--------------------------------------------------------------------------------
/src/views/Sticky.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import type { IApiSticky } from '../interfaces/IApiSticky';
4 |
5 | import Message from './Message';
6 |
7 | export interface IStickyProps {
8 | sticky: IApiSticky;
9 | onCloseClick: () => void;
10 | onLinkClick: (link: string) => void;
11 | onButtonClick: (title: string) => void;
12 | switchToHashtag: (hashtag: string) => void;
13 | switchToChannel: (channel: string) => void;
14 | }
15 |
16 | export class Sticky extends React.PureComponent
29 |
30 | {!('share' in navigator) ? null : (
31 |
34 | )}
35 |
36 |
37 |
34 |
37 | {
40 | e.stopPropagation();
41 | switchToChannel(channel);
42 | }}
43 | onHashtagClick={(e, hashtag) => {
44 | e.stopPropagation();
45 | switchToHashtag(hashtag);
46 | }}
47 | />
48 | {stickyLink ? (
49 | onLinkClick(stickyLink)}>
50 | Linked Post
51 |
52 | ) : undefined}
53 | {stickyButtons ? (
54 |
68 | );
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/views/StickyList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import type { IApiSticky } from '../interfaces/IApiSticky';
5 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
6 | import { selectPost, switchPostSection } from '../redux/actions';
7 | import { closeSticky } from '../redux/actions/api';
8 | import type { IJodelAppStore } from '../redux/reducers';
9 | import { stickiesSelector } from '../redux/selectors/posts';
10 |
11 | import { Sticky } from './Sticky';
12 |
13 | export interface IStickyListProps {
14 | stickies: readonly IApiSticky[];
15 | clickStickyClose: (sticky: string) => void;
16 | clickStickyLink: (postId: string) => void;
17 | clickStickyButton: (postId: string, buttonTitle: string) => void;
18 | switchToHashtag: (hashtag: string) => void;
19 | switchToChannel: (channel: string) => void;
20 | }
21 |
22 | class StickyListComponent extends React.Component
55 | {stickyButtons.map((button, index) => (
56 |
63 | ))}
64 |
65 | ) : undefined}
66 | {sticky.location_name}
67 | {stickyNodes}
;
50 | }
51 | }
52 |
53 | const mapStateToProps = (state: IJodelAppStore) => {
54 | return {
55 | stickies: stickiesSelector(state),
56 | };
57 | };
58 |
59 | const mapDispatchToProps = (dispatch: JodelThunkDispatch) => {
60 | return {
61 | clickStickyButton: (_postId: string, _buttonTitle: string) => {
62 | /* TODO implement */
63 | },
64 | clickStickyClose: (stickyId: string) => dispatch(closeSticky(stickyId)),
65 | clickStickyLink: (postId: string) => dispatch(selectPost(postId)),
66 | switchToChannel: (channel: string) => dispatch(switchPostSection('channel:' + channel)),
67 | switchToHashtag: (hashtag: string) => dispatch(switchPostSection('hashtag:' + hashtag)),
68 | };
69 | };
70 |
71 | export const StickyList = connect(mapStateToProps, mapDispatchToProps)(StickyListComponent);
72 |
--------------------------------------------------------------------------------
/src/views/Time.scss:
--------------------------------------------------------------------------------
1 | .post-time {
2 | color: rgba(255, 255, 255, 0.5);
3 | float: left;
4 | font-size: 0.8em;
5 | width: 30%;
6 | }
7 |
--------------------------------------------------------------------------------
/src/views/Time.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './Time.scss';
4 |
5 | export interface ITimeProps {
6 | time: string;
7 | }
8 |
9 | export class Time extends React.Component
55 | {age}
56 |
57 | );
58 | }
59 |
60 | private tick = () => {
61 | this.forceUpdate();
62 | };
63 | }
64 |
--------------------------------------------------------------------------------
/src/views/Toast.scss:
--------------------------------------------------------------------------------
1 | @import '../../style/settings.scss';
2 |
3 | .toast {
4 | box-shadow: $toast-shadow;
5 | cursor: pointer;
6 | left: 0;
7 | margin: 10px 20px;
8 | position: absolute;
9 | right: 0;
10 | top: 0;
11 |
12 | &-message {
13 | padding: 10px;
14 | }
15 |
16 | &-error {
17 | background-color: red;
18 | }
19 |
20 | &-warning {
21 | background-color: orange;
22 | }
23 |
24 | &-info {
25 | background-color: white;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/views/Toast.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames';
2 | import React from 'react';
3 |
4 | import { ToastType } from '../enums/ToastType';
5 | import type { IToast } from '../interfaces/IToast';
6 | import './Toast.scss';
7 |
8 | export interface IToastProps {
9 | toast: IToast;
10 | onClick: (toastId: number) => void;
11 | }
12 |
13 | export const Toast = ({ toast, onClick }: IToastProps) => {
14 | return (
15 | onClick(toast.id)}
22 | >
23 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/views/ToastContainer.scss:
--------------------------------------------------------------------------------
1 | @import '../../style/settings.scss';
2 |
3 | .toast-container {
4 | position: relative;
5 | z-index: $z-index-toast-layer;
6 | }
7 |
--------------------------------------------------------------------------------
/src/views/ToastContainer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import type { IToast } from '../interfaces/IToast';
5 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
6 | import { hideToast } from '../redux/actions/toasts.actions';
7 | import type { IJodelAppStore } from '../redux/reducers';
8 | import { toastsSelector } from '../redux/selectors/app';
9 |
10 | import { Toast } from './Toast';
11 | import './ToastContainer.scss';
12 |
13 | interface IToastContainerComponentProps {
14 | toasts: readonly IToast[];
15 | onToastClick: (toastId: number) => void;
16 | }
17 |
18 | const ToastContainerComponent = ({ toasts, onToastClick }: IToastContainerComponentProps) => {
19 | return (
20 | {toast.message}
24 |
21 | {toasts.map(toast => (
22 |
25 | );
26 | };
27 |
28 | const mapStateToProps = (state: IJodelAppStore) => {
29 | return {
30 | toasts: toastsSelector(state),
31 | };
32 | };
33 |
34 | const mapDispatchToProps = (dispatch: JodelThunkDispatch) => {
35 | return {
36 | onToastClick: (toastId: number) => {
37 | dispatch(hideToast(toastId));
38 | },
39 | };
40 | };
41 |
42 | export const ToastContainer = connect(mapStateToProps, mapDispatchToProps)(ToastContainerComponent);
43 |
--------------------------------------------------------------------------------
/src/views/TopBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FormattedMessage, FormattedNumber } from 'react-intl';
3 | import { connect } from 'react-redux';
4 |
5 | import type { JodelThunkDispatch } from '../interfaces/JodelThunkAction';
6 | import { showChannelList, showSettings } from '../redux/actions';
7 | import type { IJodelAppStore } from '../redux/reducers';
8 | import { karmaSelector } from '../redux/selectors/app';
9 |
10 | import { Menu } from './Menu';
11 | import { SectionLink } from './SectionLink';
12 |
13 | interface ITopBarComponentProps {
14 | karma: number;
15 | onKarmaClick: () => void;
16 | onChannelsClick: () => void;
17 | }
18 |
19 | function TopBarComponent({
20 | karma,
21 | onKarmaClick,
22 | onChannelsClick,
23 | }: ITopBarComponentProps): React.ReactElement | null {
24 | return (
25 |
26 |
27 |
41 | );
42 | }
43 |
44 | const mapStateToProps = (state: IJodelAppStore) => {
45 | return {
46 | karma: karmaSelector(state),
47 | };
48 | };
49 |
50 | const mapDispatchToProps = (dispatch: JodelThunkDispatch) => {
51 | return {
52 | onKarmaClick(): void {
53 | dispatch(showSettings(true));
54 | },
55 | onChannelsClick(): void {
56 | dispatch(showChannelList(true));
57 | },
58 | };
59 | };
60 |
61 | export const TopBar = connect(mapStateToProps, mapDispatchToProps)(TopBarComponent);
62 |
--------------------------------------------------------------------------------
/src/views/Vote.scss:
--------------------------------------------------------------------------------
1 | .post-vote {
2 | float: left;
3 | text-align: center;
4 | width: 10%;
5 |
6 | &_up-vote {
7 | cursor: pointer;
8 | padding-bottom: 0.5em;
9 | padding-top: 0.5em;
10 | width: 3em;
11 |
12 | &::before {
13 | background: url('../../img/up.svg') no-repeat;
14 | background-size: 1.5em auto;
15 | content: '';
16 | display: block;
17 | height: 1em;
18 | margin-left: 0.75em;
19 | }
20 |
21 | &.post-vote_down {
22 | visibility: hidden;
23 | }
24 |
25 | &.post-vote_up {
26 | cursor: inherit;
27 | opacity: 0.5;
28 | }
29 | }
30 |
31 | &_count {
32 | width: 3em;
33 | }
34 |
35 | &_down-vote {
36 | cursor: pointer;
37 | padding-bottom: 0.5em;
38 | padding-top: 0.5em;
39 | width: 3em;
40 |
41 | &::before {
42 | background: url('../../img/down.svg') no-repeat;
43 | background-size: 1.5em auto;
44 | content: '';
45 | display: block;
46 | height: 1em;
47 | margin-left: 0.75em;
48 | }
49 |
50 | &.post-vote_up {
51 | visibility: hidden;
52 | }
53 |
54 | &.post-vote_down {
55 | cursor: inherit;
56 | opacity: 0.5;
57 | }
58 | }
59 |
60 | &_just-voted {
61 | animation: 400ms voting;
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/views/Vote.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames';
2 | import React from 'react';
3 |
4 | import type { VoteType } from '../enums/VoteType';
5 | import './Vote.scss';
6 |
7 | export interface IVoteProps {
8 | vote_count: number;
9 | voted: VoteType;
10 | upvote: (e: React.MouseEvent
28 |
33 |
30 |
32 |
34 | {karma > 0 ? '+' : ''}
35 |
40 |
37 |
39 |
30 |
{
36 | this.setState({ justUpVoted: true });
37 | upvote(e);
38 | }}
39 | />
40 | {
20 | public state: IMapComponentState = {
21 | map: undefined,
22 | };
23 |
24 | private mapElement = React.createRef();
25 |
26 | public componentDidMount(): void {
27 | const leafletMap = map(this.mapElement.current!);
28 | if (this.props.location) {
29 | leafletMap.setView(
30 | {
31 | lat: this.props.location.latitude,
32 | lng: this.props.location.longitude,
33 | },
34 | 13,
35 | );
36 | }
37 |
38 | const tiles = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
39 | attribution:
40 | '\xa9 OpenStreetMap' +
41 | ' contributors',
42 | maxZoom: 18,
43 | });
44 | tiles.addTo(leafletMap);
45 |
46 | this.setState({
47 | map: leafletMap,
48 | });
49 | }
50 |
51 | public render(): React.ReactElement | null {
52 | return (
53 | {
16 | private circleShape: Circle | undefined;
17 |
18 | public componentDidMount(): void {
19 | const { location, radius } = this.props;
20 | this.circleShape = circle(
21 | {
22 | lat: location.latitude,
23 | lng: location.longitude,
24 | },
25 | {
26 | radius,
27 | },
28 | );
29 | this.circleShape.addTo(this.props.map);
30 | }
31 |
32 | public componentDidUpdate(): void {
33 | const { location, radius } = this.props;
34 | this.circleShape!.setLatLng({
35 | lat: location.latitude,
36 | lng: location.longitude,
37 | });
38 | this.circleShape!.setRadius(radius);
39 | }
40 |
41 | public componentWillUnmount(): void {
42 | this.circleShape!.remove();
43 | }
44 |
45 | public render(): React.ReactElement | null {
46 | return null;
47 | }
48 | }
49 |
50 | export default withLeafletMap()(MapCircleComponent);
51 |
--------------------------------------------------------------------------------
/src/views/map/MapMarker.scss:
--------------------------------------------------------------------------------
1 | .map-marker-icon {
2 | background-image: url('../../../node_modules/leaflet/dist/images/marker-icon.png');
3 | width: 25px;
4 | height: 41px;
5 | }
6 |
--------------------------------------------------------------------------------
/src/views/map/MapMarker.tsx:
--------------------------------------------------------------------------------
1 | import type { Map as LeafletMap, Marker } from 'leaflet';
2 | import { divIcon, marker } from 'leaflet';
3 | import React from 'react';
4 |
5 | import type { IGeoCoordinates } from '../../interfaces/ILocation';
6 |
7 | import { withLeafletMap } from './map-utils';
8 | import './MapMarker.scss';
9 |
10 | interface IMapMarkerProps {
11 | map: LeafletMap;
12 | location: IGeoCoordinates;
13 | onMarkerMoved: (location: IGeoCoordinates) => void;
14 | }
15 |
16 | class MapMarkerComponent extends React.PureComponent {
17 | private locationMarker: Marker | undefined;
18 |
19 | public componentDidMount(): void {
20 | this.locationMarker = marker(
21 | {
22 | lat: this.props.location.latitude,
23 | lng: this.props.location.longitude,
24 | },
25 | {
26 | draggable: true,
27 | icon: divIcon({
28 | className: 'map-marker-icon',
29 | iconAnchor: [12, 41],
30 | iconSize: [25, 41],
31 | popupAnchor: [1, -34],
32 | shadowSize: [41, 41],
33 | tooltipAnchor: [16, -28],
34 | }),
35 | },
36 | );
37 | this.locationMarker.on('dragend', () => {
38 | const loc = this.locationMarker!.getLatLng();
39 | this.props.onMarkerMoved({ latitude: loc.lat, longitude: loc.lng });
40 | });
41 | this.locationMarker.addTo(this.props.map);
42 | }
43 |
44 | public componentDidUpdate(): void {
45 | this.locationMarker!.setLatLng({
46 | lat: this.props.location.latitude,
47 | lng: this.props.location.longitude,
48 | });
49 | }
50 |
51 | public componentWillUnmount(): void {
52 | this.locationMarker!.remove();
53 | }
54 |
55 | public render(): React.ReactElement | null {
56 | return null;
57 | }
58 | }
59 |
60 | export default withLeafletMap()(MapMarkerComponent);
61 |
--------------------------------------------------------------------------------
/src/views/map/map-utils.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unsafe-return */
2 | /* eslint-disable @typescript-eslint/no-explicit-any */
3 | /* eslint-disable @typescript-eslint/no-unsafe-assignment */
4 | /* eslint-disable @typescript-eslint/no-explicit-any */
5 | import type { Map as LeafletMap } from 'leaflet';
6 | import React from 'react';
7 |
8 | export const LeafletMapContext = React.createContext(undefined);
9 |
10 | interface IWithMapProps {
11 | map: LeafletMap;
12 | }
13 |
14 | /** Exclude from object O all keys that are also in object E
15 | */
16 | type ObjectExclude = { [K in Exclude]: O[K] };
17 |
18 | type BaseComponentWrappedProps = IWithMapProps & React.ClassAttributes;
19 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
20 | type OuterComponentProps = ObjectExclude;
21 |
22 | export const withLeafletMap =
23 | () =>
24 |
{vote_count}
41 | {
47 | this.setState({ justDownVoted: true });
48 | downvote(e);
49 | }}
50 | />
51 |
52 | );
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/views/map/Map.scss:
--------------------------------------------------------------------------------
1 | .map-root {
2 | height: 200px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/views/map/Map.tsx:
--------------------------------------------------------------------------------
1 | import type { Map as LeafletMap } from 'leaflet';
2 | import { map, tileLayer } from 'leaflet';
3 | import 'leaflet/dist/leaflet.css';
4 | import React from 'react';
5 |
6 | import type { IGeoCoordinates } from '../../interfaces/ILocation';
7 |
8 | import { LeafletMapContext } from './map-utils';
9 | import './Map.scss';
10 |
11 | interface IMapComponentProps extends React.PropsWithChildren {
12 | location: IGeoCoordinates | null;
13 | }
14 |
15 | interface IMapComponentState {
16 | map: LeafletMap | undefined;
17 | }
18 |
19 | export default class MapComponent extends React.Component
54 |
55 | {this.props.children}
56 |
57 |
58 | );
59 | }
60 |
61 | public componentDidUpdate(): void {
62 | const leafletMap = this.state.map;
63 | if (leafletMap && this.props.location) {
64 | leafletMap.panTo({
65 | lat: this.props.location.latitude,
66 | lng: this.props.location.longitude,
67 | });
68 | }
69 | }
70 |
71 | public componentWillUnmount(): void {
72 | const leafletMap = this.state.map;
73 | if (leafletMap) {
74 | leafletMap.remove();
75 | }
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/views/map/MapCircle.tsx:
--------------------------------------------------------------------------------
1 | import type { Circle, Map as LeafletMap } from 'leaflet';
2 | import { circle } from 'leaflet';
3 | import React from 'react';
4 |
5 | import type { IGeoCoordinates } from '../../interfaces/ILocation';
6 |
7 | import { withLeafletMap } from './map-utils';
8 |
9 | interface IMapCircleProps {
10 | map: LeafletMap;
11 | location: IGeoCoordinates;
12 | radius: number;
13 | }
14 |
15 | class MapCircleComponent extends React.PureComponent( 25 | Component: React.ComponentType
,
26 | ): React.ComponentType<
27 | React.ClassAttributes