zero-to-mastery · andrewhigton · Oct 30, 2021 · Oct 30, 2021 · Oct 30, 2021 · Oct 30, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/Routes.tsx b/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"

diff --git a/src/common/Card.tsx b/src/common/Card.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
+import { arrayOfIds } from "../features/subscriptions/types";
 import UserImage from "./UserImage";
 
 interface CardProps {
   id?: string;
   image?: string;
   username?: string;
-  followings?: string;
-  followers?: string;
+  followings?: arrayOfIds | null;
+  followers?: arrayOfIds | null;
   children: React.ReactNode;
 }
 

diff --git a/src/common/TagPairs.tsx b/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);
diff --git a/src/common/services/api.ts b/src/common/services/api.ts
@@ -17,11 +17,11 @@ export function setTokenHeader(token: string | boolean): void {
  * @param {string} path - the route path/endpoint
  * @param {object} data - (optional) data in JSON form for POST requests
  */
-export const apiCall = (
+export const apiCall = <T>(
   method: Method,
   url: string,
   data?: any
-): AxiosPromise<unknown> => {
+): AxiosPromise<T> => {
   return new Promise((resolve, reject) => {
     return axios
       .request({ method, url, data })

diff --git a/src/features/actions.ts b/src/features/actions.ts
@@ -1,12 +1,7 @@
+import { User, UserFollowers } from "./user/types";
 import { RECEIVE_ENTITIES } from "./actionTypes";
 import { Tags } from "./tags/types";
 
-export interface Users {
-  id: number;
-  username: string;
-  image: string;
-}
-
 export interface Readings {
   id: number;
   title: string;
@@ -22,7 +17,7 @@ export interface Readings {
 }
 
 export interface Entities {
-  user?: Users;
+  users?: User[];
   readings?: Readings;
   tags?: Tags;
 }
@@ -35,6 +30,8 @@ export interface ReceiveEntitiesAction {
   list: any;
   id?: any;
   user_id?: number | null;
+  users?: User[];
+  userFollowers?: UserFollowers;
 }
 
 export const receiveEntities = (

diff --git a/src/features/auth/types.ts b/src/features/auth/types.ts
@@ -1,11 +1,6 @@
 import { SET_CURRENT_USER } from "../actionTypes";
 import { AlertActionTypes } from "../alerts/types";
-
-export interface User {
-  id: number | null;
-  username: string | null;
-  image: string | null;
-}
+import { User } from "../user/types";
 
 export interface AuthState {
   isAuthenticated: boolean;

diff --git a/src/features/globalReadings/components/GlobalAside.tsx b/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),
   };
 }
 

diff --git a/src/features/globalReadings/components/GlobalReadingsList.tsx b/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} />
     );