Issue #53 - Filter tags by pairs

src/app/Routes.tsx

@@ -50,6 +50,62 @@ const Routes: React.FC<RouteProps> = ({ alerts, currentUser }) => {
           <Route
             exact
             path="/"
+            render={({ match, history }: RouteComponentProps) => {
+              return (
+                <>
+                  {alerts.message && <Alert />}
+                  <Timeline>
+                    <LeftAside>
+                      {currentUser.isAuthenticated ? (
+                        <ArticleForm history={history} />
+                      ) : (
+                        <SignUpCard />
+                      )}
+                    </LeftAside>
+                    <Aside>
+                      <GlobalAside
+                        list="subscriptions"
+                        title="Friend's Readings"
+                      />
+                    </Aside>
+                    {currentUser.isAuthenticated ? (
+                      <GlobalReadingsList list="subscriptions" match={match} />
+                    ) : (
+                      <GlobalReadingsList
+                        class="global-readings-list"
+                        list="global"
+                        match={match}
+                      />
+                    )}
+                  </Timeline>
+                </>
+              );
+            }}
+
+            // render={({ match, history }: RouteComponentProps) => {
+            //   return (
+            //     <>
+            //       {alerts.message && <Alert />}
+            //       <Timeline>
+            //         <LeftAside>
+            //           {currentUser.isAuthenticated ? (
+            //             <ArticleForm history={history} />
+            //           ) : (
+            //             <SignUpCard />
+            //           )}
+            //         </LeftAside>
+            //         <Aside>
+            //           <GlobalAside list="global" title="Global Readings" />
+            //         </Aside>
+            //         <GlobalReadingsList class="global-readings-list" list="global" match={match} />
+            //       </Timeline>
+            //     </>
+            //   );
+            // }}
+          />
+          <Route
+            exact
+            path="/global"
             render={({ match, history }: RouteComponentProps) => {
               return (
                 <>
@@ -65,7 +121,11 @@ const Routes: React.FC<RouteProps> = ({ alerts, currentUser }) => {
                     <Aside>
                       <GlobalAside list="global" title="Global Readings" />
                     </Aside>
-                    <GlobalReadingsList list="global" match={match} />
+                    <GlobalReadingsList
+                      class="global-readings-list"
+                      list="global"
+                      match={match}
+                    />
                   </Timeline>
                 </>
               );
@@ -99,6 +159,37 @@ const Routes: React.FC<RouteProps> = ({ alerts, currentUser }) => {
               );
             }}
           />
+          {/*//and here's where you'll find it?*/}
+          {/*//or use the same id and filter within the results? Probably easier*/}
+          {/*<Route
+            exact
+            path="/tag/links/:id"
+            render={({ match, history }: RouteComponentProps<TParams>) => {
+              return (
+                <>
+                  {alerts.message && <Alert />}
+                  <Timeline>
+                    <LeftAside>
+                      {currentUser.isAuthenticated ? (
+                        <ArticleForm history={history} />
+                      ) : (
+                        <SignUpCard />
+                      )}
+                    </LeftAside>
+                    <Aside>
+                      <GlobalAside list="global" tag_id={match.params.id} />
+                    </Aside>
+                    <GlobalReadingsList
+                      list="global"
+                      tag_id={match.params.id}
+                      match={match}
+                    />
+                  </Timeline>
+                </>
+              );
+            }}
+          />
+*/}
           <Route
             exact
             path="/signin"
@@ -158,6 +249,7 @@ const Routes: React.FC<RouteProps> = ({ alerts, currentUser }) => {
               );
             }}
           />
+          //not sure what this does
           <Route
             exact
             path="/reset/:username/:token"

src/common/TagPairs.tsx

@@ -0,0 +1,63 @@
+import React, { Fragment } from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { getPairedTags } from "../features/tags/selectors";
+import TagItem from "../features/tags/components/TagItem";
+
+interface TagProps {
+  tagPairs: number[];
+  tag_id: number;
+}
+
+type GlobalTagProps = PropsFromRedux & TagProps;
+
+const TagPairs: React.FunctionComponent<GlobalTagProps> = ({
+  tagPairs,
+  tag_id,
+}) => {
+  let tagCount = false;
+
+  function toggle(el) {
+    let tag = document.getElementById(el);
+    if (tag) {
+      tag.style.display = tag.style.display === "block" ? "none" : "block";
+    }
+  }
+
+  return (
+    <Fragment>
+      {tagPairs[0] ? (
+        <div className="wrapper">
+          <select
+            onClick={() => {
+              toggle("pairs-dropdown");
+            }}
+            className="dropbtn"
+          >
+            Tag Pairs
+          </select>
+          <div id="pairs-dropdown" className="dropdown-content">
+            <p className="label">Partner tags:</p>
+            {tagPairs.map((tag, i) => {
+              return (
+                <TagItem id={tag} tag={tag} key={tag} tagCount={tagCount} />
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </Fragment>
+  );
+};
+
+function mapStateToProps(state: RootState, ownProps: TagProps) {
+  return {
+    tagPairs: getPairedTags(state, ownProps.tag_id),
+    tag: ownProps.tag_id,
+  };
+}
+
+const connector = connect(mapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export default connector(TagPairs);

src/features/globalReadings/components/GlobalAside.tsx

@@ -1,10 +1,11 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { getReadings, getWebsites } from "../selectors";
 import Card from "../../../common/Card";
+import TagPairs from "../../../common/TagPairs";
 import ReadingStats from "../../../common/ReadingsStats";
 import { TagsAside } from "../../tags";
-import { getTagById } from "../../tags/selectors";
+import { getTagById, getPairedTags } from "../../tags/selectors";
 import { RootState } from "../../rootReducer";
 
 type OwnProps = {
@@ -13,6 +14,8 @@ type OwnProps = {
   fav?: any;
   outdated?: any;
   tag_id?: any;
+  tagPairs: number[];
+  tagTitle: string;
 };
 
 type GlobalAsideProps = PropsFromRedux & OwnProps;
@@ -24,6 +27,9 @@ const GlobalAside: React.FunctionComponent<GlobalAsideProps> = ({
   list,
   title,
   tag,
+  tagPairs,
+  tag_id,
+  tagTitle,
 }) => {
   let totalReadings,
     totalWebsites,
@@ -49,36 +55,39 @@ const GlobalAside: React.FunctionComponent<GlobalAsideProps> = ({
     }
   }
 
-  if (!title && tag) title = `#${tag.tag_name}`;
+  if (!title && tagTitle) title = `#${tagTitle.tag_name}`;
 
   return (
-    <Card username={title}>
-      <ReadingStats
-        loading={loading}
-        loading_id={list}
-        statName="Readings"
-        stat={totalReadings}
-      />
-      <ReadingStats
-        loading={loading}
-        loading_id={list}
-        statName="Websites Read From"
-        stat={totalWebsites}
-      />
-      <ReadingStats
-        loading={loading}
-        loading_id={list}
-        statName="Most Read Website"
-        stat={topWebsite}
-      />
-      <ReadingStats
-        loading={loading}
-        loading_id={list}
-        statName="Loaves"
-        stat={totalBooks}
-      />
-      <TagsAside list={list} />
-    </Card>
+    <Fragment>
+      <TagPairs tag_id={tag} tagPairs={tagPairs} />
+      <Card username={title}>
+        <ReadingStats
+          loading={loading}
+          loading_id={list}
+          statName="Readings"
+          stat={totalReadings}
+        />
+        <ReadingStats
+          loading={loading}
+          loading_id={list}
+          statName="Websites Read From"
+          stat={totalWebsites}
+        />
+        <ReadingStats
+          loading={loading}
+          loading_id={list}
+          statName="Most Read Website"
+          stat={topWebsite}
+        />
+        <ReadingStats
+          loading={loading}
+          loading_id={list}
+          statName="Loaves"
+          stat={totalBooks}
+        />
+        <TagsAside list={list} />
+      </Card>
+    </Fragment>
   );
 };
 
@@ -93,7 +102,8 @@ function mapStateToProps(state: RootState, ownProps: OwnProps) {
     ),
     websites: getWebsites(state, ownProps.list, ownProps.tag_id),
     loading: state.loading,
-    tag: getTagById(state, ownProps.tag_id),
+    tag: ownProps.tag_id,
+    tagTitle: getTagById(state, ownProps.tag_id),
   };
 }
 

src/features/globalReadings/components/GlobalReadingsList.tsx

@@ -33,7 +33,9 @@ class ReadingsList extends Component<ReadingsListProps> {
 
   render() {
     const { readings, list, outdated } = this.props;
-
+    //console.log(list);
+    //console.log(readings);
+    //ie so list is global
     return (
       <VirtualizedList readings={readings} list={list} outdated={outdated} />
     );

src/features/globalReadings/components/ListItem.tsx

@@ -107,6 +107,7 @@ const ListItem: React.FunctionComponent<ListItemProps> = ({
                       {reading.created_at}
                     </Moment>
                     <span> </span>
+
                     {tags && <Tags reading={reading} tags={tags} list={list} />}
                   </small>
                 </div>

src/features/globalReadings/components/Tags.tsx

@@ -27,9 +27,15 @@ class Tags extends Component<TagsProps> {
 
     let tag_links;
     if (reading.tags && tags) {
+      //console.log('raeding ' + reading.tags)
+      //console.log('raeding ' + reading)
+
       tag_links = reading.tags.map(
         (tag_id: number): React.ReactNode | string => {
+          //so you get tags from here, joint tags, where does it pick them up from? the fact there are two, say?
+          //from reading. trace this back.
           if (tags[tag_id]) {
+            // console.log('tags ' + tags[tag_id])
             return (
               <Link to={`/tag/${tags[tag_id].id}`} key={tag_id}>
                 {` #${tags[tag_id].tag_name}`}

src/features/globalReadings/selectors.ts

@@ -36,6 +36,7 @@ export const getReadings = (
     if (fav) return getFavoriteReadings(readings);
     if (outdated) return getUserReadingsInNeedOfUpdate(state, list);
     if (tag_id) return getTagReadings(readings, tag_id);
+    //console.log('readings ' + readings)
     return readings;
   }
 };
@@ -45,7 +46,8 @@ export const getReadings = (
  */
 export const getReadingById = (state: any, list: string, id: number): any => {
   if (state.readingsByList[`${list}`]) {
-    // give time for readingsByList to load
+    // console.log(state)
+    //console.log(state[NAME][id]['tags'])// give time for readingsByList to load
     return state[NAME][id];
   }
 };

src/features/notifications/Navbar.tsx

@@ -113,7 +113,7 @@ class Navbar extends Component<NotificationProps, NotificationState> {
             <div className="navbar__items navbar__items--right">
               <NavLink
                 exact
-                to="/"
+                to="/global"
                 activeClassName="navbar__item--active navbar__link"
                 className="navbar__item navbar__link"
               >
@@ -192,7 +192,7 @@ class Navbar extends Component<NotificationProps, NotificationState> {
                   <>
                     <NavLink
                       exact
-                      to="/"
+                      to="/global"
                       className="menu__list-item menu__link"
                     >
                       Global