Skip to content

Commit

Permalink
Refactor RecentListens - Remove recommendations code (#1146)
Browse files Browse the repository at this point in the history 
* refactor recentListens

* fix indentation

* remove unused const
  • Loading branch information
@vansika
vansika committed Oct 19, 2020
1 parent dd7c379 commit 4540fa8
Show file tree
Hide file tree
Showing 10 changed files with 116 additions and 433 deletions.
107 changes: 1 addition & 106 deletions listenbrainz/webserver/static/js/src/RecentListens.tsx
View file
Expand Up @@ -51,8 +51,6 @@ export interface RecentListensState {
previousListenTs?: number;
saveUrl: string;
recordingFeedbackMap: RecordingFeedbackMap;
currRecPage?: number;
totalRecPages: number;
}

export default class RecentListens extends React.Component<
Expand All @@ -68,16 +66,11 @@ export default class RecentListens extends React.Component<

private expectedListensPerPage = 25;

private expectedRecommendationsPerPage = 25;

constructor(props: RecentListensProps) {
super(props);
this.state = {
alerts: [],
listens:
props.mode === "cf_recs"
? props.listens?.slice(0, this.expectedRecommendationsPerPage) || []
: props.listens || [],
listens: props.listens || [],
mode: props.mode,
followList: props.followList || [],
playingNowByUser: {},
Expand All @@ -90,10 +83,6 @@ export default class RecentListens extends React.Component<
previousListenTs: props.listens?.[0]?.listened_at,
direction: "down",
recordingFeedbackMap: {},
currRecPage: 1,
totalRecPages: props.listens
? Math.ceil(props.listens.length / this.expectedRecommendationsPerPage)
: 0,
};

this.APIService = new APIService(
Expand Down Expand Up @@ -597,91 +586,6 @@ export default class RecentListens extends React.Component<
}
};

handleClickPreviousRecommendations = () => {
const { listens } = this.props;
const { currRecPage } = this.state;

if (currRecPage && currRecPage > 1) {
this.setState({ loading: true });
const offset = (currRecPage - 1) * this.expectedRecommendationsPerPage;
this.setState(
{
listens:
listens?.slice(
offset - this.expectedRecommendationsPerPage,
offset
) || [],
currRecPage: currRecPage - 1,
},
this.afterRecommendationsDisplay
);
window.history.pushState(null, "", `?page=${currRecPage}`);
}
};

handleClickNextRecommendations = () => {
const { listens } = this.props;
const { currRecPage, totalRecPages } = this.state;

if (currRecPage && currRecPage < totalRecPages) {
this.setState({ loading: true });
const offset = currRecPage * this.expectedRecommendationsPerPage;
this.setState(
{
listens:
listens?.slice(
offset,
offset + this.expectedRecommendationsPerPage
) || [],
currRecPage: currRecPage + 1,
},
this.afterRecommendationsDisplay
);
window.history.pushState(null, "", `?page=${currRecPage}`);
}
};

recommendationPaginationControl = () => {
const { currRecPage, totalRecPages } = this.state;
return (
<ul className="pager" style={{ display: "flex" }}>
<li
className={`previous ${
currRecPage && currRecPage <= 1 ? "hidden" : ""
}`}
>
<a
role="button"
onClick={this.handleClickPreviousRecommendations}
onKeyDown={(e) => {
if (e.key === "Enter") this.handleClickPreviousRecommendations();
}}
tabIndex={0}
>
&larr; Previous
</a>
</li>
<li
className={`next ${
currRecPage && currRecPage >= totalRecPages ? "hidden" : ""
}`}
style={{ marginLeft: "auto" }}
>
<a
role="button"
onClick={this.handleClickNextRecommendations}
onKeyDown={(e) => {
if (e.key === "Enter") this.handleClickNextRecommendations();
}}
tabIndex={0}
>
Next &rarr;
</a>
</li>
</ul>
);
};

afterListensFetch() {
this.checkListensRange();
if (this.listensTable?.current) {
Expand All @@ -690,13 +594,6 @@ export default class RecentListens extends React.Component<
this.setState({ loading: false });
}

afterRecommendationsDisplay() {
if (this.listensTable?.current) {
this.listensTable.current.scrollIntoView({ behavior: "smooth" });
}
this.setState({ loading: false });
}

render() {
const {
alerts,
Expand Down Expand Up @@ -902,8 +799,6 @@ export default class RecentListens extends React.Component<
</li>
</ul>
)}

{mode === "cf_recs" && this.recommendationPaginationControl()}
</div>
)}
<br />
Expand Down
73 changes: 0 additions & 73 deletions listenbrainz/webserver/static/js/src/RecentListensControls.test.tsx
View file
Expand Up @@ -246,76 +246,3 @@ describe("removeListenFromListenList", () => {
expect(wrapper.state("listens")).toMatchObject([]);
});
});

describe("handleClickPreviousRecommendations", () => {
it("don't do anything if already on first page", async () => {
const extraProps = { ...props, mode: "cf_recs" as ListensListMode };
const wrapper = shallow<RecentListens>(<RecentListens {...extraProps} />);
const instance = wrapper.instance();
instance.afterRecommendationsDisplay = jest.fn();

await instance.handleClickPreviousRecommendations();

expect(wrapper.state("currRecPage")).toEqual(1);
expect(wrapper.state("totalRecPages")).toEqual(3);
expect(wrapper.state("listens").length).toEqual(25);
expect(instance.afterRecommendationsDisplay).toHaveBeenCalledTimes(0);
});

it("go to the previous page if not on first page", async () => {
const extraProps = { ...props, mode: "cf_recs" as ListensListMode };
const wrapper = shallow<RecentListens>(<RecentListens {...extraProps} />);
const instance = wrapper.instance();
instance.afterRecommendationsDisplay = jest.fn();

wrapper.setState({
currRecPage: 3,
listens: recentListensProps.listens.slice(50, 52),
});

await instance.handleClickPreviousRecommendations();

expect(wrapper.state("currRecPage")).toEqual(2);
expect(wrapper.state("listens").length).toEqual(25);
expect(instance.afterRecommendationsDisplay).toHaveBeenCalledTimes(1);
});
});

describe("handleClickNextRecommendations", () => {
it("don't do anything if already on last page", async () => {
const extraProps = { ...props, mode: "cf_recs" as ListensListMode };
const wrapper = shallow<RecentListens>(<RecentListens {...extraProps} />);
const instance = wrapper.instance();
instance.afterRecommendationsDisplay = jest.fn();

wrapper.setState({
currRecPage: 3,
listens: recentListensProps.listens.slice(50, 52),
});

await instance.handleClickNextRecommendations();

expect(wrapper.state("currRecPage")).toEqual(3);
expect(wrapper.state("totalRecPages")).toEqual(3);
expect(wrapper.state("listens").length).toEqual(2);
expect(instance.afterRecommendationsDisplay).toHaveBeenCalledTimes(0);
});

it("go to the next page if not on last page", async () => {
const extraProps = { ...props, mode: "cf_recs" as ListensListMode };
const wrapper = shallow<RecentListens>(<RecentListens {...extraProps} />);
const instance = wrapper.instance();
instance.afterRecommendationsDisplay = jest.fn();

wrapper.setState({
currRecPage: 2,
listens: recentListensProps.listens.slice(25, 50),
});

await instance.handleClickNextRecommendations();

expect(wrapper.state("currRecPage")).toEqual(3);
expect(wrapper.state("listens").length).toEqual(2);
expect(instance.afterRecommendationsDisplay).toHaveBeenCalledTimes(1);
});
});
9 changes: 0 additions & 9 deletions listenbrainz/webserver/static/js/src/listens/ListenCard.test.tsx
View file
Expand Up @@ -21,7 +21,6 @@ const listen: Listen = {
recording_msid: "bar",
},
},
score: 2.3,
};

const props: ListenCardProps = {
Expand Down Expand Up @@ -60,14 +59,6 @@ describe("ListenCard", () => {
expect(wrapper).toMatchSnapshot();
});

it("renders correctly for mode = 'cf_recs'", () => {
const wrapper = mount<ListenCard>(
<ListenCard {...{ ...props, mode: "cf_recs" }} />
);

expect(wrapper).toMatchSnapshot();
});

it("renders correctly for playing_now listen", () => {
const playingNowListen: Listen = { playing_now: true, ...listen };
const wrapper = mount<ListenCard>(
Expand Down

0 comments on commit 4540fa8

Please sign in to comment.