sessions history page wip

jam-ui/cypress/e2e/sessions/session-history-page.cy.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+
+import makeFakeUser from '../../factories/user';
+
+describe('Session History', () => {
+  const currentUser = makeFakeUser();
+  beforeEach(() => {
+    cy.stubAuthenticate({ id: currentUser.id });
+  });
+
+  describe('When user has no sessions', () => {
+    it('should show no sessions message', () => {
+      cy.intercept('GET', /\S+\/api\/sessions\/history/, {
+        body: []
+      }).as('fetchAllSessions')
+      cy.visit('/sessions/history');
+      cy.wait('@fetchAllSessions');
+      cy.contains('No Records!');
+    });
+  });
+});

jam-ui/src/components/page/JKMusicSessionsHistory.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import { Alert, Col, Row, Card, CardBody } from 'reactstrap';
+import FalconCardHeader from '../common/FalconCardHeader';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import Loader from '../common/Loader';
+import { isIterableArray } from '../../helpers/utils';
+import { useResponsive } from '@farfetch/react-context-responsive';
+import { fetchSessionsHistory } from '../../store/features/sessionsHistorySlice';
+import JKSessionsHistoryList from '../sessions/JKSessionsHistoryList';
+
+const JKMusicSessionsHistory = () => {
+  const { t } = useTranslation();
+  const { greaterThan } = useResponsive();
+  const dispatch = useDispatch();
+  const sessions = useSelector(state => state.sessionsHistory.sessions);
+  const loadingStatus = useSelector(state => state.sessionsHistory.status);
+  const [offset, setOffset] = useState(0);
+  const LIMIT = 10;
+
+  useEffect(() => {
+    const options = {
+      offset,
+      limit: LIMIT
+    };
+    dispatch(fetchSessionsHistory(options));
+  }, [offset]);
+
+  return (
+    <Card>
+      <FalconCardHeader title={t('history.page_title', { ns: 'sessions' })} titleClass="font-weight-bold" />
+      <CardBody className="pt-0">
+        {loadingStatus === 'loading' && sessions.length === 0 ? (
+          <Loader />
+        ) : isIterableArray(sessions) ? (
+          <>
+            {greaterThan.sm ? (
+              <Row className="mb-3 justify-content-between d-none d-md-block">
+                <div className="table-responsive-xl px-2">
+                  <JKSessionsHistoryList sessions={sessions} />
+                </div>
+              </Row>
+            ) : (
+              <Row className="swiper-container d-block d-md-none" data-testid="sessionsSwiper">
+                {/* <JKSessionSwiper sessions={sessions} /> */}
+              </Row>
+            )}
+          </>
+        ) : (
+          <Row className="p-card">
+            <Col>
+              <Alert color="info" className="mb-0">
+                {t('no_records', { ns: 'common' })}
+              </Alert>
+            </Col>
+          </Row>
+        )}
+      </CardBody>
+    </Card>
+  );
+};
+
+export default JKMusicSessionsHistory;

jam-ui/src/components/sessions/JKSessionsHistoryList.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const JKSessionsHistoryList = ({sessions}) => {
+  return (
+    <div>
+      <h1>JKSessionsHistoryList</h1>
+      <pre>{JSON.stringify(sessions, null, 2)}</pre>
+    </div>
+  )
+}
+
+export default JKSessionsHistoryList

jam-ui/src/store/features/sessionsHistorySlice.js

@@ -0,0 +1,46 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { getSessionsHistory } from '../../helpers/rest'
+
+const initialState = {
+  sessions: [],
+  status: 'idel',
+  error: null,
+}
+
+export const fetchSessionsHistory = createAsyncThunk(
+  "sessionsHistory/fetchHistory", 
+  async (options, thunkAPI) => {
+    const response = await getSessionsHistory(options);
+    return response.json();
+  }
+)
+
+export const SessionsHistorySlice = createSlice({
+  name: "sessionsHistory",
+  initialState,
+  reducers: {
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchSessionsHistory.pending, (state, action) => {
+        state.status = "loading";
+      })
+      .addCase(fetchSessionsHistory.fulfilled, (state, action) => {
+        console.log(action.payload);
+        // state.status = "succeeded";
+        // state.sessions = action.payload;
+
+        const records = new Set([...state.sessions, ...action.payload]);
+        const unique = [];
+        records.map(x => unique.filter(a => a.id === x.id).length > 0 ? null : unique.push(x))
+        state.sessions = unique
+        state.status = 'succeeded'
+      })
+      .addCase(fetchSessionsHistory.rejected, (state, action) => {
+        state.status = 'failed'
+        state.error  = action.error.message
+      })
+  }
+})
+
+export default SessionsHistorySlice.reducer