API & Client: use segment index on API only - fix #14

fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCardHeader.jsx

@@ -15,13 +15,13 @@ export default function ActivityCardHeader(props) {
       )
     : null
 
-  const previousUrl = dataType === 'segment' && segmentId !== 0
+  const previousUrl = dataType === 'segment' && segmentId !== 1
     ? `/activities/${activity.id}/segment/${segmentId - 1}`
     : dataType === 'activity' && activity.previous_activity
       ? `/activities/${activity.previous_activity}`
       : null
     const nextUrl =
-      dataType === 'segment' && segmentId < activity.segments.length - 1
+      dataType === 'segment' && segmentId < activity.segments.length
     ? `/activities/${activity.id}/segment/${segmentId + 1}`
     : dataType === 'activity' && activity.next_activity
       ? `/activities/${activity.next_activity}`
@@ -85,7 +85,7 @@ export default function ActivityCardHeader(props) {
               >
                 {title}
               </Link>{' '}
-              - segment {segmentId + 1}
+              - segment {segmentId}
             </>
           )}
           <br />

fittrackee_client/src/components/Activity/ActivityDisplay/ActivitySegments.jsx

@@ -12,11 +12,14 @@ export default function ActivitySegments(props) {
             <div className="activity-segments">
               <ul>
                 {segments.map((segment, index) => (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <li key={`segment-${index}`}>
+                  <li
+                    className="activity-segments-list"
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={`segment-${index}`}
+                  >
                     <Link
                       to={`/activities/${
-                        segment.activity_id}/segment/${index}`}
+                        segment.activity_id}/segment/${index + 1}`}
                     >
                       segment {index + 1}
                     </Link>{' '}

fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx

@@ -124,7 +124,7 @@ class ActivityDisplay extends React.Component {
                             <ActivityDetails
                               activity={dataType === 'activity'
                                 ? activity
-                                : activity.segments[segmentId]}
+                                : activity.segments[segmentId - 1]}
                             />
                           </div>
                         </div>

fittrackee_client/src/components/App.css

@@ -64,6 +64,10 @@ label {
   width: 100%;
 }
 
+.activities-result {
+  font-size: 0.85em;
+}
+
 .activity-card {
   margin-bottom: 15px;
 }
@@ -113,8 +117,8 @@ label {
   margin-top: 20px;
 }
 
-.activities-result {
-  font-size: 0.85em;
+.activity-segments-list {
+  list-style: square;
 }
 
 .activity-sport {

fittrackee_client/src/index.js

@@ -14,6 +14,10 @@ import { loadProfile } from './actions/user'
 
 export const history = createBrowserHistory()
 
+history.listen(() => {
+    window.scrollTo(0, 0)
+})
+
 export const rootNode = document.getElementById('root')
 
 export const store = createStore(