Passthrough urls from backend

src/newsreader/js/pages/categories/App.js

@@ -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>
       </>

src/newsreader/js/pages/categories/components/CategoryCard.js

@@ -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>

src/newsreader/js/pages/categories/index.js

@@ -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
+  );
 }

src/newsreader/js/pages/homepage/App.js

@@ -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}
           />
         )}
       </>

src/newsreader/js/pages/homepage/components/PostModal.js

@@ -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
+    if (this.props.rule.type === SUBREDDIT) {
-    const ruleUrl =
+      ruleUrl = `${this.props.subredditUrl}/${this.props.rule.id}/`;
-      this.props.rule.type === FEED
+    } else if (this.props.rule.type === TWITTER_TIMELINE) {
-        ? `/collection/rules/${this.props.rule.id}/`
+      ruleUrl = `${this.props.timelineUrl}/${this.props.rule.id}/`;
-        : `/collection/rules/subreddits/${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"
                   >

src/newsreader/js/pages/homepage/components/postlist/PostItem.js

@@ -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 =
+    if (rule.type === SUBREDDIT) {
-      rule.type === FEED
+      ruleUrl = `${this.props.subredditUrl}/${rule.id}/`;
-        ? `/collection/rules/${rule.id}/`
+    } else if (rule.type === TWITTER_TIMELINE) {
-        : `/collection/rules/subreddits/${rule.id}/`;
+      ruleUrl = `${this.props.timelineUrl}/${rule.id}/`;
+    } else {
+      ruleUrl = `${this.props.feedUrl}/${rule.id}/`;
+    }
 
     return (
       <li className="posts__item">

src/newsreader/js/pages/homepage/components/postlist/PostList.js

@@ -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, {})) {

src/newsreader/js/pages/homepage/index.js

@@ -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
   );

src/newsreader/news/core/templates/news/core/views/categories.html

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

src/newsreader/news/core/templates/news/core/views/homepage.html

@@ -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 %}

src/newsreader/news/core/views.py

@@ -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 = {
+        return {
-            category: category.rules.order_by("-created")
+            **context,
-            for category in user.categories.order_by("name")
+            "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"