<repo_name>lukaszkania/Simple-blog.<file_sep>/frontend/gui/src/components/content/Content.js
import React from 'react';
import { Link } from 'react-router-dom';
import { API_ARTICLE_DETAIL_URL } from '../../constants/ApiUrls';
import axios from 'axios';

const Content = ({ articles }) => {

    const articlesList = articles.length ? (
        articles.map(article => {
            return (
                <div className="article-container" key={article.id} >
                    <div className="card text-center">
                        <div className="card-header">
                            Article
                        </div>
                        <div className="card-body">
                            <h5 className="card-title">{article.title}</h5>
                            <p className="card-text">{article.text.slice(0, 200) + " ..."}</p>
                            <Link to={'/' + 'article/' + article.pk} class="btn btn-primary">Read more...</Link>
                        </div>
                        <div className="card-footer text-muted">
                            {article.postedDate}
                        </div>
                    </div>
                </div>
            )
        })
    ) : (
            <p>There aren't any articles</p>
        )

    return (
        <div className="articles" >
            {console.log(articlesList)}
            {articlesList}
            {console.log(axios.get('http://127.0.0.1:8000/api/1'))}
        </div>
    );
}

export default Content;
<file_sep>/backend/blog/article/api/urls.py
from django.urls import path
from .views import ArticleListView, ArticleDetailView

app_name = 'api'
urlpatterns = [
    path('', ArticleListView.as_view(), name="list-view"),
    path('<int:pk>', ArticleDetailView.as_view(), name="detail-view"),
]
<file_sep>/backend/blog/article/urls.py
from django.contrib import admin
from django.urls import path
from article.views import ArticleListView, ArticleDetailView

app_name = 'article'
urlpatterns = [
    path("", ArticleListView.as_view(), name="article_list_view"),
    path("<int:pk>", ArticleDetailView.as_view(), name="article_detail_view"),
]
<file_sep>/backend/blog/article/views.py
from django.shortcuts import render
from django.views.generic import ListView, DetailView
from .models import Article
from django.utils import timezone
# Create your views here.


class ArticleListView(ListView):
    model = Article
    template_name = "article/ArticleListView.html"
    ordering = ['-postedDate']
    context_object_name = 'articles'


class ArticleDetailView(DetailView):
    model = Article
    template_name = "article/ArticleDetailView.html"
<file_sep>/frontend/gui/src/App.js
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import axios from 'axios';
import { API_ARTICLE_LIST_URL } from './constants/ApiUrls';
import Content from './components/content/Content';
import Navbar from "./components/navbar/Navbar";
import Footer from "./components/footer/Footer";
import DetailArticle from './components/detailArticle/DetailArticle';

class App extends Component {
  state = {
    articles: [],
    isLoading: true
  }

  componentDidMount = () => {
    this.setState({
      isLoading: true
    })
    axios.get(API_ARTICLE_LIST_URL).then(response => {
      this.setState({
        articles: response.data,
        isLoading: false
      }
      )
    })
  }

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar />
          <div className="container">
            <Route exact path="/"
              render={(props) => <Content articles={this.state.articles} />}
            />
            <Route path="/article/:slug/" component={DetailArticle} />
          </div>
          <Footer />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;<file_sep>/frontend/gui/src/components/detailArticle/DetailArticle.js
import React, { Component } from 'react';
import axios from 'axios';
import { API_ARTICLE_DETAIL_URL } from '../../constants/ApiUrls';
import { Link } from "react-router-dom";

const loadArticleFromApi = (slug) => {
    let url = API_ARTICLE_DETAIL_URL + slug;

    return axios.get(url)
}

class DetailArticle extends Component {
    state = {
        isLoading: true,
        article: {}
    }
    loadSingleArticle = (slug) => {
        this.setState({
            isLoading: true
        })
        loadArticleFromApi(slug).then((response) => {
            this.setState({
                isLoading: false,
                article: response.data[0]
            })
        })
    }


    componentDidMount = () => {
        let slug = this.props.match.params.slug;
        this.loadSingleArticle(slug)
    }

    render() {
        return (
            <div className='article-detail'>
                <div className="card" style="width: 18rem;">
                    {/* <img src={"https://picsum.photos/" + '1' + "/237/200/300"} class="card-img-top" alt="Article image" /> */}
                    <div className="card-body">
                        <h5 className="card-title">article.title</h5>
                        <p className="card-text">article.text</p>
                        <Link to="/" className="btn btn-primary">Back to Home page</Link>
                    </div>
                </div>
            </div>
        );
    }
}

export default DetailArticle;<file_sep>/frontend/gui/src/constants/ApiUrls.js
export const API_ARTICLE_LIST_URL = "http://1172.16.31.10:8000/api"
export const API_ARTICLE_DETAIL_URL = "http://127.0.0.1:8000/api/"<file_sep>/backend/blog/article/api/ArticleSerializers.py
from rest_framework import serializers
from article.models import Article


class ArticleListSerializer(serializers.ModelSerializer):
    class Meta:
        model = Article
        fields = ('pk', 'title', 'text', 'postedDate')


class ArticleDetailSerializer(serializers.ModelSerializer):
    class Meta:
        model = Article
        fields = ('pk', 'title', 'text', 'postedDate')
<file_sep>/backend/blog/article/tests.py
from django.test import TestCase
from django.urls import reverse
from .models import Article
from django.utils import timezone
# Create your tests here.

# *****************************************************************************************ARTICLE*************************************


class HomePageTests(TestCase):
    def test_home_page_status_code_by_adress(self):
        response = self.client.get('/')
        self.assertEquals(response.status_code, 200)

    def test_home_page_status_code_by_view_name(self):
        response = self.client.get(reverse('article:article_list_view'))
        self.assertEquals(response.status_code, 200)


class DetailPageTests(TestCase):
    def setUp(self):
        self.article = Article.objects.create(
            title="Testing article title",
            text="Testing article text",
            postedDate=timezone.now()
        )

    def test_detail_article_page_status_code_by_adress(self):
        response = self.client.get('/' + str(self.article.id))
        self.assertEquals(response.status_code, 200)

    def test_detail_article_page_status_code_by_view_name(self):
        response = self.client.get(
            reverse('article:article_detail_view', kwargs={"pk": self.article.pk}))
        self.assertEquals(response.status_code, 200)

# *****************************************************************************************API*************************************


class ApiListPageTests(TestCase):
    def test_list_of_articles_api_page_status_code_by_adress(self):
        response = self.client.get('/api/')
        self.assertEquals(response.status_code, 200)

    def test_list_of_articles_api_page_status_code_by_viewname(self):
        response = self.client.get(reverse('api:list-view'))
        self.assertEquals(response.status_code, 200)


class ApiDetailPageTests(TestCase):
    def setUp(self):
        self.article = Article.objects.create(
            title="Testing article title",
            text="Testing article text",
            postedDate=timezone.now()
        )

    def test_details_of_article_api_page_status_code_by_adress(self):
        response = self.client.get("/api/" + str(self.article.pk))
        self.assertEquals(response.status_code, 200)

    def test_details_of_article_api_page_status_code_by_view_name(self):
        response = self.client.get(
            reverse("api:detail-view", kwargs={"pk": self.article.pk}))
        self.assertEquals(response.status_code, 200)
<file_sep>/backend/blog/article/api/views.py
from rest_framework.generics import ListAPIView, RetrieveAPIView
from article.models import Article
from article.api.ArticleSerializers import ArticleListSerializer, ArticleDetailSerializer
from django.utils import timezone


class ArticleListView(ListAPIView):
    queryset = Article.objects.all().order_by('-postedDate', "-pk")
    serializer_class = ArticleListSerializer


class ArticleDetailView(RetrieveAPIView):
    queryset = Article.objects.all()
    serializer_class = ArticleDetailSerializer
