sonny/newsreader
1
0
Fork 0
Code Issues 13 Pull requests 2 Projects Releases 58 Packages Wiki Activity Actions

Passthrough urls from backend

Browse source
This commit is contained in:
Sonny Bakker 2020-09-20 20:36:10 +02:00
parent abb5328feb
commit 431827986e
11 changed files with 109 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/newsreader/js/pages/categories/App.js
View file

@ -69,6 +69,7 @@ class App extends React.Component {
key={category.pk}
category={category}
showDialog={this.selectCategory}
updateUrl={this.props.updateUrl}
/>
);
});
@ -80,7 +81,7 @@ class App extends React.Component {
const pageHeader = (
<>
<h1 className="h1">Categories</h1>
<a className="link button button--confirm" href="/core/categories/create/">
<a className="link button button--confirm" href={`${this.props.createUrl}/`}>
Create category
</a>
</>

2
src/newsreader/js/pages/categories/components/CategoryCard.js
View file

@ -33,7 +33,7 @@ const CategoryCard = props => {
<>
<a
className="link button button--primary"
href={`/core/categories/${category.pk}/`}
href={`${props.updateUrl}/${category.pk}/`}
>
Edit
</a>

12
src/newsreader/js/pages/categories/index.js
View file

@ -9,5 +9,15 @@ if (page) {
const dataScript = document.getElementById('categories-data');
const categories = JSON.parse(dataScript.textContent);
ReactDOM.render(<App categories={categories} />, page);
let createUrl = document.getElementById('createUrl').textContent;
let updateUrl = document.getElementById('updateUrl').textContent;
ReactDOM.render(
<App
categories={categories}
createUrl={createUrl.substring(1, createUrl.length - 2)}
updateUrl={updateUrl.substring(1, updateUrl.length - 4)}
/>,
page
);
}

10
src/newsreader/js/pages/homepage/App.js
View file

@ -19,7 +19,11 @@ class App extends React.Component {
return (
<>
<Sidebar />
<PostList />
<PostList
feedUrl={this.props.feedUrl}
subredditUrl={this.props.subredditUrl}
timelineUrl={this.props.timelineUrl}
/>
{this.props.error && (
<Messages messages={[{ type: 'error', text: this.props.error.message }]} />
@ -30,6 +34,10 @@ class App extends React.Component {
post={this.props.post}
rule={this.props.rule}
category={this.props.category}
feedUrl={this.props.feedUrl}
subredditUrl={this.props.subredditUrl}
timelineUrl={this.props.timelineUrl}
categoriesUrl={this.props.categoriesUrl}
/>
)}
</>

23
src/newsreader/js/pages/homepage/components/PostModal.js
View file

@ -3,7 +3,13 @@ import { connect } from 'react-redux';
import Cookies from 'js-cookie';
import { unSelectPost, markPostRead } from '../actions/posts.js';
import { CATEGORY_TYPE, RULE_TYPE, FEED, SUBREDDIT } from '../constants.js';
import {
CATEGORY_TYPE,
RULE_TYPE,
FEED,
SUBREDDIT,
TWITTER_TIMELINE,
} from '../constants.js';
import { formatDatetime } from '../../../utils.js';
class PostModal extends React.Component {
@ -44,12 +50,15 @@ class PostModal extends React.Component {
const post = this.props.post;
const publicationDate = formatDatetime(post.publicationDate);
const titleClassName = post.read ? 'post__title post__title--read' : 'post__title';
let ruleUrl = '';
// TODO add mapping & get urls from backend
const ruleUrl =
this.props.rule.type === FEED
? `/collection/rules/${this.props.rule.id}/`
: `/collection/rules/subreddits/${this.props.rule.id}/`;
if (this.props.rule.type === SUBREDDIT) {
ruleUrl = `${this.props.subredditUrl}/${this.props.rule.id}/`;
} else if (this.props.rule.type === TWITTER_TIMELINE) {
ruleUrl = `${this.props.timelineUrl}/${this.props.rule.id}/`;
} else {
ruleUrl = `${this.props.feedUrl}/${this.props.rule.id}/`;
}
return (
<div className="modal post-modal">
@ -68,7 +77,7 @@ class PostModal extends React.Component {
{this.props.category && (
<span className="badge post__category" title={this.props.category.name}>
<a
href={`/core/categories/${this.props.category.id}/`}
href={`${this.props.categoriesUrl}/${this.props.category.id}/`}
target="_blank"
rel="noopener noreferrer"
>

20
src/newsreader/js/pages/homepage/components/postlist/PostItem.js
View file

@ -1,7 +1,13 @@
import React from 'react';
import { connect } from 'react-redux';
import { CATEGORY_TYPE, RULE_TYPE, FEED, SUBREDDIT } from '../../constants.js';
import {
CATEGORY_TYPE,
RULE_TYPE,
FEED,
SUBREDDIT,
TWITTER_TIMELINE,
} from '../../constants.js';
import { selectPost } from '../../actions/posts.js';
import { formatDatetime } from '../../../../utils.js';
@ -13,11 +19,15 @@ class PostItem extends React.Component {
const titleClassName = post.read
? 'posts__header posts__header--read'
: 'posts__header';
let ruleUrl = '';
const ruleUrl =
rule.type === FEED
? `/collection/rules/${rule.id}/`
: `/collection/rules/subreddits/${rule.id}/`;
if (rule.type === SUBREDDIT) {
ruleUrl = `${this.props.subredditUrl}/${rule.id}/`;
} else if (rule.type === TWITTER_TIMELINE) {
ruleUrl = `${this.props.timelineUrl}/${rule.id}/`;
} else {
ruleUrl = `${this.props.feedUrl}/${rule.id}/`;
}
return (
<li className="posts__item">

11
src/newsreader/js/pages/homepage/components/postlist/PostList.js
View file

@ -38,7 +38,16 @@ class PostList extends React.Component {
render() {
const postItems = this.props.postsBySection.map((item, index) => {
return <PostItem key={index} post={item} selected={this.props.selected} />;
return (
<PostItem
key={index}
post={item}
selected={this.props.selected}
feedUrl={this.props.feedUrl}
subredditUrl={this.props.subredditUrl}
timelineUrl={this.props.timelineUrl}
/>
);
});
if (isEqual(this.props.selected, {})) {

12
src/newsreader/js/pages/homepage/index.js
View file

@ -11,9 +11,19 @@ const page = document.getElementById('homepage--page');
if (page) {
const store = configureStore();
let feedUrl = document.getElementById('feedUrl').textContent;
let subredditUrl = document.getElementById('subredditUrl').textContent;
let timelineUrl = document.getElementById('timelineUrl').textContent;
let categoriesUrl = document.getElementById('categoriesUrl').textContent;
ReactDOM.render(
<Provider store={store}>
<App />
<App
feedUrl={feedUrl.substring(1, feedUrl.length - 4)}
subredditUrl={subredditUrl.substring(1, subredditUrl.length - 4)}
timelineUrl={timelineUrl.substring(1, timelineUrl.length - 4)}
categoriesUrl={categoriesUrl.substring(1, categoriesUrl.length - 4)}
/>
</Provider>,
page
);

3
src/newsreader/news/core/templates/news/core/views/categories.html
View file

@ -30,5 +30,8 @@
]
</script>
{{ categories_update_url|json_script:"updateUrl" }}
{{ categories_create_url|json_script:"createUrl" }}
{{ block.super }}
{% endblock %}

11
src/newsreader/news/core/templates/news/core/views/homepage.html
View file

@ -3,4 +3,13 @@
{% block content %}
<main id="homepage--page" class="main"></main>
{% endblock %}
{% endblock content %}
{% block scripts %}
{{ feed_url|json_script:"feedUrl" }}
{{ subreddit_url|json_script:"subredditUrl" }}
{{ twitter_timeline_url|json_script:"timelineUrl" }}
{{ categories_url|json_script:"categoriesUrl" }}
{{ block.super }}
{% endblock scripts %}

34
src/newsreader/news/core/views.py
View file

@ -11,24 +11,21 @@ from newsreader.news.core.models import Category
class NewsView(TemplateView):
template_name = "news/core/views/homepage.html"
# TODO serialize objects to show filled main page
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
user = self.request.user
categories = {
category: category.rules.order_by("-created")
for category in user.categories.order_by("name")
return {
**context,
"feed_url": reverse_lazy("news:collection:feed-update", args=(0,)),
"subreddit_url": reverse_lazy(
"news:collection:subreddit-update", args=(0,)
),
"twitter_timeline_url": reverse_lazy(
"news:collection:twitter-timeline-update", args=(0,)
),
"categories_url": reverse_lazy("news:core:category-update", args=(0,)),
}
rules = {
rule: rule.posts.order_by("-publication_date")[:30]
for rule in user.rules.order_by("-created")
}
context.update(categories=categories, rules=rules)
return context
class CategoryViewMixin:
queryset = Category.objects.prefetch_related("rules").order_by("name")
@ -58,6 +55,17 @@ class CategoryListView(CategoryViewMixin, ListView):
template_name = "news/core/views/categories.html"
context_object_name = "categories"
def get_context_data(self, *args, **kwargs):
context = super().get_context_data(*args, **kwargs)
return {
**context,
"categories_create_url": reverse_lazy("news:core:category-create"),
"categories_update_url": (
reverse_lazy("news:core:category-update", args=(0,))
),
}
class CategoryUpdateView(CategoryViewMixin, CategoryDetailMixin, UpdateView):
template_name = "news/core/views/category-update.html"