feat: add data to requests page (#1786)

src/api/community-api/search.ts

@@ -24,6 +24,10 @@ export const getRecentPosts = (term: CommunityTerm) =>
     .get(`${FDK_COMMUNITY_BASE_URI}/api/recent/posts/${term}`)
     .then(({ data }) => data);
 
+export const getRequests = () =>
+  axios
+    .get(`${FDK_COMMUNITY_BASE_URI}/api/category/6`)
+    .then(({ data }) => data);
 export const extractTopicsFromSearch = (
   searchResponse: any
 ): CommunityTopic[] => {

src/components/with-community/index.tsx

@@ -4,13 +4,18 @@ import { connect } from 'react-redux';
 
 import * as actions from './redux/actions';
 
-import type { CommunityPost, CommunityTopic } from '../../types';
+import type {
+  CommunityPost,
+  CommunityRequestCategory,
+  CommunityTopic
+} from '../../types';
 
 export interface Props {
   topics: CommunityTopic[];
   multiplePages: boolean;
   posts: CommunityPost[];
   communityActions: typeof actions;
+  requests: CommunityRequestCategory;
 }
 
 const withCommunity = (Component: ComponentType<any>) => {
@@ -19,7 +24,8 @@ const withCommunity = (Component: ComponentType<any>) => {
   const mapStateToProps = (state: any) => ({
     topics: state.CommunityReducer.get('topics').toJS(),
     multiplePages: state.CommunityReducer.get('multiplePages'),
-    posts: state.CommunityReducer.get('posts').toJS()
+    posts: state.CommunityReducer.get('posts').toJS(),
+    requests: state.CommunityReducer.get('requests').toJS()
   });
 
   const mapDispatchToProps = (dispatch: Dispatch) => ({

src/components/with-community/redux/action-types.ts

@@ -8,3 +8,7 @@ export const GET_RECENT_POSTS_FAILED = 'GET_RECENT_POSTS_FAILED' as const;
 
 export const RESET_TOPICS = 'RESET_TOPICS' as const;
 export const RESET_POSTS = 'RESET_POSTS' as const;
+
+export const GET_REQUESTS = 'GET_REQUESTS' as const;
+export const GET_REQUESTS_SUCCEEDED = 'GET_REQUESTS_SUCCEEDED' as const;
+export const GET_REQUESTS_FAILED = 'GET_REQUESTS_FAILED' as const;

src/components/with-community/redux/actions.ts

@@ -6,10 +6,17 @@ import {
   GET_RECENT_POSTS_SUCCEEDED,
   GET_RECENT_POSTS_FAILED,
   RESET_TOPICS,
-  RESET_POSTS
+  RESET_POSTS,
+  GET_REQUESTS,
+  GET_REQUESTS_FAILED,
+  GET_REQUESTS_SUCCEEDED
 } from './action-types';
 
-import type { CommunityPost, CommunityTopic } from '../../../types';
+import type {
+  CommunityPost,
+  CommunityRequestCategory,
+  CommunityTopic
+} from '../../../types';
 import { CommunityTerm } from '../../../types/enums';
 
 export function searchTopicsRequested(queryTerm: string) {
@@ -69,6 +76,31 @@ export function getRecentPostsFailed(message: string) {
     }
   };
 }
+export function getCommunityRequests() {
+  return {
+    type: GET_REQUESTS
+  };
+}
+
+export function getCommunityRequestsSucceeded(
+  requests: CommunityRequestCategory
+) {
+  return {
+    type: GET_REQUESTS_SUCCEEDED,
+    payload: {
+      requests
+    }
+  };
+}
+
+export function getCommunityRequestsFailed(message: string) {
+  return {
+    type: GET_REQUESTS_FAILED,
+    payload: {
+      message
+    }
+  };
+}
 
 export function resetTopics() {
   return {

src/components/with-community/redux/reducer.ts

@@ -9,15 +9,18 @@ import {
   GET_RECENT_POSTS_SUCCEEDED,
   GET_RECENT_POSTS_FAILED,
   RESET_TOPICS,
-  RESET_POSTS
+  RESET_POSTS,
+  GET_REQUESTS,
+  GET_REQUESTS_SUCCEEDED
 } from './action-types';
 
 import type { Actions } from '../../../types';
 
 const initialState = fromJS({
   topics: [],
   multiplePages: false,
-  posts: []
+  posts: [],
+  requests: {}
 });
 
 export default function reducer(
@@ -41,6 +44,10 @@ export default function reducer(
     case GET_RECENT_POSTS_FAILED:
     case RESET_POSTS:
       return state.set('posts', fromJS([]));
+    case GET_REQUESTS:
+      return state.set('requests', fromJS([]));
+    case GET_REQUESTS_SUCCEEDED:
+      return state.set('requests', fromJS(action.payload.requests));
     default:
       return state;
   }

src/components/with-community/redux/saga.ts

@@ -2,7 +2,8 @@ import { all, call, put, takeLatest } from 'redux-saga/effects';
 
 import {
   SEARCH_TOPICS_REQUESTED,
-  GET_RECENT_POSTS_REQUESTED
+  GET_RECENT_POSTS_REQUESTED,
+  GET_REQUESTS
 } from './action-types';
 import * as actions from './actions';
 
@@ -11,10 +12,15 @@ import {
   getRecentPosts,
   getTopicById,
   pruneNodebbTemplateTags,
-  searchCommunity
+  searchCommunity,
+  getRequests
 } from '../../../api/community-api/search';
 
-import type { CommunityPost, CommunityTopic } from '../../../types';
+import type {
+  CommunityPost,
+  CommunityRequestCategory,
+  CommunityTopic
+} from '../../../types';
 
 function* searchTopicsRequested({
   payload: { queryTerm }
@@ -60,9 +66,24 @@ function* recentPostsRequested({
   }
 }
 
+function* getCommunityRequests() {
+  try {
+    const requests: CommunityRequestCategory = yield call(getRequests);
+
+    if (requests !== null && requests !== undefined) {
+      yield put(actions.getCommunityRequestsSucceeded(requests));
+    } else {
+      yield put(actions.getCommunityRequestsFailed(''));
+    }
+  } catch (e: any) {
+    yield put(actions.getCommunityRequestsFailed(e.message));
+  }
+}
+
 export default function* saga() {
   yield all([
     takeLatest(SEARCH_TOPICS_REQUESTED, searchTopicsRequested),
-    takeLatest(GET_RECENT_POSTS_REQUESTED, recentPostsRequested)
+    takeLatest(GET_RECENT_POSTS_REQUESTED, recentPostsRequested),
+    takeLatest(GET_REQUESTS, getCommunityRequests)
   ]);
 }

src/pages/requests/index.tsx

@@ -1,10 +1,45 @@
-import React from 'react';
-import Banner from '../../components/banner';
-import localization from '../../lib/localization';
-
-const RequestsPage = () => (
-  <main id='content' className='container'>
-    <Banner title={localization.page.requests} />
-  </main>
-);
-export default RequestsPage;
+import React, { FC, useEffect } from 'react';
+import withCommunity, {
+  Props as CommunityProps
+} from '../../components/with-community';
+import { compose } from 'redux';
+import withErrorBoundary from '../../components/with-error-boundary';
+import ErrorPage from '../error-page';
+import SC from './styled';
+import { formatDate } from '../../lib/date-utils';
+
+interface Props extends CommunityProps {}
+
+const RequestsPage: FC<Props> = ({
+  requests,
+  communityActions: { getCommunityRequests }
+}) => {
+  useEffect(() => {
+    getCommunityRequests();
+  }, []);
+
+  return (
+    <main id='content' className='container'>
+      <SC.RequestsTitleRow>
+        <SC.RequestTitle>Etterspørsler fra Datalandsbyen</SC.RequestTitle>
+        <SC.RequestInfo>Dato</SC.RequestInfo>
+        <SC.RequestInfo>Antall stemmer</SC.RequestInfo>
+        <SC.RequestInfo>Antall visninger</SC.RequestInfo>
+      </SC.RequestsTitleRow>
+      {requests?.topics &&
+        requests.topics.map(topic => (
+          <SC.RequestRow key={topic.cid}>
+            <SC.RequestTitle>{topic.title}</SC.RequestTitle>
+            <SC.RequestInfo>
+              {formatDate(new Date(topic.timestampISO))}
+            </SC.RequestInfo>
+            <SC.RequestInfo>{topic.upvotes}</SC.RequestInfo>
+            <SC.RequestInfo>{topic.viewcount}</SC.RequestInfo>
+          </SC.RequestRow>
+        ))}
+    </main>
+  );
+};
+
+const enhance = compose(withCommunity, withErrorBoundary(ErrorPage));
+export default enhance(RequestsPage);

src/pages/requests/styled.ts

@@ -1 +1,44 @@
-export default {};
+import styled from 'styled-components';
+
+const RequestRow = styled.div`
+  display: flex;
+  background-color: white;
+  width: 100%;
+  height: 90px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  border: solid 1px #d5d7d9;
+  padding-left: 37px;
+  padding-right: 37px;
+  align-items: center;
+  font-size: 18px;
+`;
+
+const RequestsTitleRow = styled.div`
+  background-color: #d2eafd;
+  height: 57px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  padding-left: 37px;
+  padding-right: 37px;
+  font-weight: bold;
+`;
+
+const RequestTitle = styled.div`
+  width: 50%;
+  font-weight: bold;
+`;
+
+const RequestInfo = styled.div`
+  width: 16%;
+  display: flex;
+  justify-content: center;
+`;
+
+export default {
+  RequestRow,
+  RequestsTitleRow,
+  RequestTitle,
+  RequestInfo
+};

src/types/domain.d.ts

@@ -1019,6 +1019,27 @@ export interface CommunityPost {
   multiplePages: boolean;
 }
 
+export interface CommunityRequestCategory {
+  description: string;
+  name: string;
+  post_count: number;
+  topics: CommunityRequest[];
+}
+
+export interface CommunityRequest {
+  cid: number;
+  timestamp: number;
+  lastposttime: number;
+  lastposttimeISO: Date;
+  timestampISO: Date;
+  postcount: number;
+  title: string;
+  viewcount: number;
+  postercount: number;
+  downvotes: number;
+  upvotes: number;
+}
+
 export interface CommunityTeaser {
   pid: number;
   uid: number;