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

fittrackee_api/fittrackee_api/activities/utils_gpx.py

@@ -123,13 +123,20 @@ def get_gpx_info(gpx_file, update_map_data=True, update_weather_data=True):
 
 def get_gpx_segments(track_segments, segment_id=None):
     if segment_id is not None:
-        if segment_id > (len(track_segments) - 1):
+        segment_index = segment_id - 1
+        if segment_index > (len(track_segments) - 1):
             raise ActivityGPXException(
                 'not found',
                 f'No segment with id \'{segment_id}\'',
                 None
             )
-        segments = [track_segments[segment_id]]
+        if segment_index < 0:
+            raise ActivityGPXException(
+                'error',
+                'Incorrect segment id',
+                None
+            )
+        segments = [track_segments[segment_index]]
     else:
         segments = track_segments
 

fittrackee_api/fittrackee_api/tests/test_activities_api_1_post.py

@@ -275,7 +275,7 @@ def activity_assertion(app, user_1, sport_1_cycling, gpx_file, with_segments):
     assert len(data['data']['gpx']) != ''
 
     response = client.get(
-        '/api/activities/1/gpx/segment/0',
+        '/api/activities/1/gpx/segment/1',
         headers=dict(
             Authorization='Bearer ' + json.loads(
                 resp_login.data.decode()
@@ -435,7 +435,7 @@ def test_get_chart_data_activty_with_gpx(
     assert data['data']['chart_data'] != ''
 
     response = client.get(
-        '/api/activities/1/chart_data/segment/0',
+        '/api/activities/1/chart_data/segment/1',
         headers=dict(
             Authorization='Bearer ' + json.loads(
                 resp_login.data.decode()
@@ -449,6 +449,21 @@ def test_get_chart_data_activty_with_gpx(
     assert data['message'] == ''
     assert data['data']['chart_data'] != ''
 
+    response = client.get(
+        '/api/activities/1/chart_data/segment/0',
+        headers=dict(
+            Authorization='Bearer ' + json.loads(
+                resp_login.data.decode()
+            )['auth_token']
+        )
+    )
+    data = json.loads(response.data.decode())
+
+    assert response.status_code == 500
+    assert 'error' in data['status']
+    assert data['message'] == 'Incorrect segment id'
+    assert 'data' not in data
+
     response = client.get(
         '/api/activities/1/chart_data/segment/999999',
         headers=dict(

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
-                  <li key={`segment-${index}`}>
+                    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 {
+.activity-segments-list {
-  font-size: 0.85em;
+  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(