TrackPanelBookmarks.tsx 3.73 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/**
 * See the NOTICE file distributed with this work for additional information
 * regarding copyright ownership.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

Andrey Azov's avatar
Andrey Azov committed
17
import React from 'react';
18
import { useSelector, useDispatch } from 'react-redux';
19
import upperFirst from 'lodash/upperFirst';
20
import { Link } from 'react-router-dom';
21

22
import analyticsTracking from 'src/services/analytics-service';
23 24
import * as urlFor from 'src/shared/helpers/urlHelper';
import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers';
25

26 27
import { getActiveGenomePreviouslyViewedObjects } from 'src/content/app/browser/track-panel/trackPanelSelectors';
import { closeTrackPanelModal } from '../../trackPanelActions';
28 29
import { changeDrawerViewAndOpen } from 'src/content/app/browser/drawer/drawerActions';

30 31
import TextLine from 'src/shared/components/text-line/TextLine';

32
import { DrawerView } from 'src/content/app/browser/drawer/drawerState';
33

34 35
import styles from './TrackPanelBookmarks.scss';

36 37 38
export const PreviouslyViewedLinks = () => {
  const previouslyViewedObjects = useSelector(
    getActiveGenomePreviouslyViewedObjects
39
  ).slice(0, 20);
40
  const dispatch = useDispatch();
41

42 43 44 45 46 47 48 49
  const onLinkClick = (objectType: string, index: number) => {
    analyticsTracking.trackEvent({
      category: 'recent_bookmark_link',
      label: objectType,
      action: 'clicked',
      value: index + 1
    });

50
    dispatch(closeTrackPanelModal());
51 52
  };

53
  return (
54
    <div data-test-id="previously viewed links">
55
      {previouslyViewedObjects.map((previouslyViewedObject, index) => {
Jyothish's avatar
Jyothish committed
56 57 58 59
        const path = urlFor.browser({
          genomeId: previouslyViewedObject.genome_id,
          focus: buildFocusIdForUrl(previouslyViewedObject.object_id)
        });
60

Jyothish's avatar
Jyothish committed
61 62 63 64 65 66 67 68 69
        return (
          <div
            key={previouslyViewedObject.object_id}
            className={styles.linkHolder}
          >
            <Link
              replace
              to={path}
              onClick={() => onLinkClick(previouslyViewedObject.type, index)}
Andrey Azov's avatar
Andrey Azov committed
70
            >
71 72 73 74
              <TextLine
                text={previouslyViewedObject.label}
                className={styles.label}
              />
Jyothish's avatar
Jyothish committed
75 76 77 78 79 80 81
            </Link>
            <span className={styles.type}>
              {upperFirst(previouslyViewedObject.type)}
            </span>
          </div>
        );
      })}
82 83 84 85
    </div>
  );
};

86 87 88 89 90
export const TrackPanelBookmarks = () => {
  const previouslyViewedObjects = useSelector(
    getActiveGenomePreviouslyViewedObjects
  );
  const dispatch = useDispatch();
91

Jyothish's avatar
Jyothish committed
92
  const onMoreClick = () => {
93 94 95 96 97 98 99
    analyticsTracking.trackEvent({
      category: 'drawer_open',
      label: 'recent_bookmarks',
      action: 'clicked',
      value: previouslyViewedObjects.length
    });

100
    dispatch(changeDrawerViewAndOpen(DrawerView.BOOKMARKS));
101 102
  };

Imran Salam's avatar
Imran Salam committed
103
  return (
Jyothish's avatar
Jyothish committed
104 105 106
    <section className={styles.trackPanelBookmarks}>
      <div className={styles.title}>Previously viewed</div>
      {previouslyViewedObjects.length ? (
107
        <>
108
          <PreviouslyViewedLinks />
Jyothish's avatar
Jyothish committed
109 110 111 112 113
          {previouslyViewedObjects.length > 20 && (
            <div className={styles.more}>
              <span onClick={onMoreClick}>more...</span>
            </div>
          )}
114
        </>
115
      ) : null}
Imran Salam's avatar
Imran Salam committed
116 117 118 119
    </section>
  );
};

120
export default TrackPanelBookmarks;