From 3f808f36b965d52bf56314c6a9e3e8aa80a0f817 Mon Sep 17 00:00:00 2001 From: andrewhigton Date: Thu, 17 Feb 2022 11:00:17 +0000 Subject: [PATCH 1/2] InitialPageLoad#73 --- package-lock.json | 6 +-- src/app/Routes.tsx | 63 ++++++++++++++++++++++++++- src/features/notifications/Navbar.tsx | 4 +- 3 files changed, 67 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2344e40..9e38fe5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4852,9 +4852,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001249", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001249.tgz", - "integrity": "sha512-vcX4U8lwVXPdqzPWi6cAJ3FnQaqXbBqy/GZseKNQzRj37J7qZdGcBtxq/QLFNLLlfsoXLUdHw8Iwenri86Tagw==" + "version": "1.0.30001312", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz", + "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==" }, "capture-exit": { "version": "2.0.0", diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx index 118418e..5fe4142 100644 --- a/src/app/Routes.tsx +++ b/src/app/Routes.tsx @@ -50,6 +50,62 @@ const Routes: React.FC = ({ alerts, currentUser }) => { { + return ( + <> + {alerts.message && } + + + {currentUser.isAuthenticated ? ( + + ) : ( + + )} + + + {currentUser.isAuthenticated ? ( + + ) : ( + + )} + + + ); + }} + + // render={({ match, history }: RouteComponentProps) => { + // return ( + // <> + // {alerts.message && } + // + // + // {currentUser.isAuthenticated ? ( + // + // ) : ( + // + // )} + // + // + // + // + // + // ); + // }} + /> + { return ( <> @@ -65,7 +121,11 @@ const Routes: React.FC = ({ alerts, currentUser }) => { - + ); @@ -158,6 +218,7 @@ const Routes: React.FC = ({ alerts, currentUser }) => { ); }} /> + //not sure what this does {
@@ -192,7 +192,7 @@ class Navbar extends Component { <> Global From d50a9be37582b05918eedc55af9ea1064ff6becd Mon Sep 17 00:00:00 2001 From: andrewhigton Date: Sun, 13 Mar 2022 13:50:29 +0000 Subject: [PATCH 2/2] added pairTags drop down to globalaside --- src/app/Routes.tsx | 31 ++++++++ src/common/TagPairs.tsx | 63 ++++++++++++++++ .../globalReadings/components/GlobalAside.tsx | 72 ++++++++++-------- .../components/GlobalReadingsList.tsx | 4 +- .../globalReadings/components/ListItem.tsx | 1 + .../globalReadings/components/Tags.tsx | 6 ++ src/features/globalReadings/selectors.ts | 4 +- src/features/tags/components/TagItem.tsx | 9 ++- src/features/tags/components/TagsList.tsx | 4 +- src/features/tags/selectors.ts | 73 +++++++++++++++++++ src/infima.css | 47 ++++++++++++ 11 files changed, 276 insertions(+), 38 deletions(-) create mode 100644 src/common/TagPairs.tsx diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx index 5fe4142..b5b1a23 100644 --- a/src/app/Routes.tsx +++ b/src/app/Routes.tsx @@ -159,6 +159,37 @@ const Routes: React.FC = ({ alerts, currentUser }) => { ); }} /> + {/*//and here's where you'll find it?*/} + {/*//or use the same id and filter within the results? Probably easier*/} + {/*) => { + return ( + <> + {alerts.message && } + + + {currentUser.isAuthenticated ? ( + + ) : ( + + )} + + + + + + ); + }} + /> +*/} = ({ + 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 ( + + {tagPairs[0] ? ( +
+ +
+

Partner tags:

+ {tagPairs.map((tag, i) => { + return ( + + ); + })} +
+
+ ) : null} + + ); +}; + +function mapStateToProps(state: RootState, ownProps: TagProps) { + return { + tagPairs: getPairedTags(state, ownProps.tag_id), + tag: ownProps.tag_id, + }; +} + +const connector = connect(mapStateToProps); + +type PropsFromRedux = ConnectedProps; + +export default connector(TagPairs); diff --git a/src/features/globalReadings/components/GlobalAside.tsx b/src/features/globalReadings/components/GlobalAside.tsx index 1739e37..117b0e3 100644 --- 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 = ({ list, title, tag, + tagPairs, + tag_id, + tagTitle, }) => { let totalReadings, totalWebsites, @@ -49,36 +55,39 @@ const GlobalAside: React.FunctionComponent = ({ } } - if (!title && tag) title = `#${tag.tag_name}`; + if (!title && tagTitle) title = `#${tagTitle.tag_name}`; return ( - - - - - - - + + + + + + + + + + ); }; @@ -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 index c6dd87f..b50b24f 100644 --- a/src/features/globalReadings/components/GlobalReadingsList.tsx +++ b/src/features/globalReadings/components/GlobalReadingsList.tsx @@ -33,7 +33,9 @@ class ReadingsList extends Component { render() { const { readings, list, outdated } = this.props; - + //console.log(list); + //console.log(readings); + //ie so list is global return ( ); diff --git a/src/features/globalReadings/components/ListItem.tsx b/src/features/globalReadings/components/ListItem.tsx index 952b6c2..e362f58 100644 --- a/src/features/globalReadings/components/ListItem.tsx +++ b/src/features/globalReadings/components/ListItem.tsx @@ -107,6 +107,7 @@ const ListItem: React.FunctionComponent = ({ {reading.created_at} + {tags && }
diff --git a/src/features/globalReadings/components/Tags.tsx b/src/features/globalReadings/components/Tags.tsx index cbefe2b..92455cd 100644 --- a/src/features/globalReadings/components/Tags.tsx +++ b/src/features/globalReadings/components/Tags.tsx @@ -27,9 +27,15 @@ class Tags extends Component { 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 ( {` #${tags[tag_id].tag_name}`} diff --git a/src/features/globalReadings/selectors.ts b/src/features/globalReadings/selectors.ts index f9a452c..f9225d6 100644 --- a/src/features/globalReadings/selectors.ts +++ b/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]; } }; diff --git a/src/features/tags/components/TagItem.tsx b/src/features/tags/components/TagItem.tsx index 397472c..5a3ba09 100644 --- a/src/features/tags/components/TagItem.tsx +++ b/src/features/tags/components/TagItem.tsx @@ -9,12 +9,15 @@ type TagItemProps = PropsFromRedux & OwnProps; interface OwnProps { key: number; id: number; + tag: any; + tagCount: boolean; } class TagItem extends Component { - render() { - const { tag, key } = this.props; + state = { tagForPairing: null }; + render() { + const { tag, key, tagCount } = this.props; return (
  • { className="menu__link" > #{tag.tag_name} - {tag.count > 1 && {tag.count}} + {tagCount ? tag.count > 1 && {tag.count} : null}
    • ); diff --git a/src/features/tags/components/TagsList.tsx b/src/features/tags/components/TagsList.tsx index fb9b85b..3a47cad 100644 --- a/src/features/tags/components/TagsList.tsx +++ b/src/features/tags/components/TagsList.tsx @@ -9,12 +9,12 @@ type TagsListProps = { const TagsList: React.FC = ({ tags, isHidden }) => { let tagsList; + let tagCount = true; if (tags) { tagsList = tags.map((tag) => { - return ; + return ; }); } - return
    {tagsList}
    ; }; diff --git a/src/features/tags/selectors.ts b/src/features/tags/selectors.ts index f176943..e2979aa 100644 --- a/src/features/tags/selectors.ts +++ b/src/features/tags/selectors.ts @@ -25,6 +25,14 @@ export const getMostRecentTagIds = ( } }; +//so you pick off the pairs from state here, which has already been fetched in actions and reducer +// export const getPairedTagsIds = ( +// state: any, +// list: string +// ): number[] | undefined => { + +// } + export const getTopTagsIds = ( state: any, list: string @@ -33,6 +41,7 @@ export const getTopTagsIds = ( if (state.tagsByList[`${list}`] && state.tagsByList[`${list}`].items) { let tagIdArray = state.tagsByList[`${list}`].items.map( (id: number) => state[NAME][id] + //console.log(state[NAME][id]) ); let tagIds = tagIdArray @@ -80,3 +89,67 @@ export const getUserTopTags = ( return tagIds; } }; + +export const getPairedTags = (state: any, id: number): number[] | undefined => { + //select all readings + let globalTags = state.readings; + + //convert to array of objs + let newarr = Object.values(globalTags); + + //find matches with selected id in readings tags + let arrs: number[]; + let id_matches: number[] = []; + + for (var i = 0; i < newarr.length; i++) { + let k = Object.values(newarr[i]); + + arrs = k[10]; + if (arrs) { + for (var y = 0; y < arrs.length; y++) { + if (arrs[y] === id) { + id_matches.push(arrs); + } + } + } + } + + //flatten 2D arrays + let flattenedArray: number[] = [].concat.apply([], id_matches); + //remove the original + flattenedArray = flattenedArray.filter((number) => number !== id); + //remove repeats + let finalArray: number[] = flattenedArray.filter((item, pos) => { + return flattenedArray.indexOf(item) == pos; + }); + + return finalArray; +}; + +// console.log('flattenedArray ' + flattenedArray1); + +//convert tag numbers to tag names +// let tagNames1 = state.tags +// if(tagNames1) { +// console.log('1 ' + tagNames1); +// } + +// let tagNames2 = Object.values(tagNames1) + +// let finalArray: number[] = []; + +//get tag numbers +// console.log('1 ' + tagNames1); +// console.log('2 ' + tagNames2); +// flattenedArray1.forEach((p) => { +// for(let a = 0; a < tagNames2.length; a++) { +// let numbers = tagNames2[a].id; +// //console.log(numbers); +// // let name = tagNames2[a].tag_name + +// if(numbers == p) { +// finalArray.push(numbers); +// } +// } +// }) +// console.log('final ' + finalArray); diff --git a/src/infima.css b/src/infima.css index f4b79b7..5482143 100644 --- a/src/infima.css +++ b/src/infima.css @@ -3492,3 +3492,50 @@ body { transition: background 0.5s ease-in-out; background-color: #303846; } + +.wrapper { + margin-top: 15px; + position: absolute; + margin-left: 20px; +} + +.label { + margin-top: 10px; + margin-bottom: 5px; +} + +.dropbtn { + font-size: 16px; + border: none; + cursor: pointer; + margin-left: 190px; + outline: none; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + overflow: auto; + background-color: #f1f1f1; + box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%); + margin-top: 13px; + margin-left: -15px; + padding-right: 22px; + text-align: right; +} + +.dropdown-content li { + list-style: none; + margin-right: -10px; +} + +/* Links inside the dropdown */ +.dropdown-content a { + margin-left: 140px; + float: right; +} + +/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ +.show { + display: block; +}