Skip to content

Commit

Permalink
OCLOMRS-1044:Bug Fix: Pick Concepts from Source and Dictionaries
Browse files Browse the repository at this point in the history
  • Loading branch information
@jwamalwa
jwamalwa committed Oct 28, 2021
1 parent 7eca218 commit 835272c
Showing 1 changed file with 43 additions and 56 deletions.
99 changes: 43 additions & 56 deletions src/apps/concepts/components/ViewConceptsHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ import {
import { APIDictionary } from "../../dictionaries/types";
import { VerifiedSource } from "../../../components/VerifiedSource";
import InfiniteScroll from "react-infinite-scroll-component";

interface Props {
containerType: string;
containerUrl?: string;
Expand All @@ -46,7 +45,6 @@ interface Props {
initialSearch: string;
pathUrl: Function;
}

const useStyles = makeStyles((theme: Theme) =>
createStyles({
lightColour: {
Expand All @@ -56,6 +54,9 @@ const useStyles = makeStyles((theme: Theme) =>
padding: "0.2rem 1rem",
cursor: "none"
},
sourcesDropdownHeader: {
padding: "0.5rem 1rem"
},
input: {
cursor: "pointer",
borderBottom: "1px dotted black",
Expand All @@ -79,7 +80,6 @@ const useStyles = makeStyles((theme: Theme) =>
}
})
);

const ViewConceptsHeader: React.FC<Props> = ({
containerType,
containerUrl,
Expand All @@ -92,44 +92,36 @@ const ViewConceptsHeader: React.FC<Props> = ({
initialSearch,
pathUrl
}) => {
const [showSources, setShowSources] = useState(false);
const [q, setQ] = useState(initialSearch);
const [preferredSources, setPreferredSources] = useState<
const [showAllSources, setShowAllSources] = useState(false);
const [queryString, setQueryString] = useState(initialSearch);
const [currentSources, setCurrentSources] = useState<
{ name: string; url: string }[]
>();
useEffect(() => {
const defaultSources = Object.entries(
PREFERRED_SOURCES_VIEW_ONLY
).map(([key, value]) => ({ name: key, url: value }));
if (showSources) {
if (showAllSources) {
const allSources = defaultSources
.concat(sources.map(s => ({ name: s.name, url: s.url })))
.concat(dictionaries.map(d => ({ name: d.name, url: d.url })));
setPreferredSources(allSources);
setCurrentSources(allSources);
console.log(allSources);
} else setPreferredSources(defaultSources);
}, [showSources, sources, dictionaries, initialSearch]);

} else setCurrentSources(defaultSources);
}, [showAllSources, sources, dictionaries, initialSearch]);
// TODO - Check if this is correct
const fetchMoreData = () => {
setTimeout(() => {
const previousSources = preferredSources
const previousSources = currentSources
?.filter(Boolean)
.concat(preferredSources.slice(11));
setPreferredSources(previousSources);
.concat(currentSources.slice(11));
setCurrentSources(previousSources);
}, 1000);
};

const handleSearch = (q: string) => goTo(pathUrl({ q }));

const handleShowSources = (event: React.ChangeEvent<HTMLInputElement>) => {
setShowSources(event.target.checked);
setShowAllSources(event.target.checked);
};

// const handleSearch = (value:String) => {
// const filteredSources=preferredSources?.filter(Boolean).filter(source => source.name===value)
// setPreferredSources(filteredSources)
// }

const classes = useStyles();
const isSourceContainer = containerType === SOURCE_CONTAINER;
const isAddToDictionary = isSourceContainer && !!addConceptToDictionary;
Expand All @@ -145,7 +137,6 @@ const ViewConceptsHeader: React.FC<Props> = ({
containerType === DICTIONARY_VERSION_CONTAINER ? "v" : ""
}${getContainerIdFromUrl(containerUrl)}`;
};

const showSwitchSourceBasedOnContainerType = () => {
return !isAddToDictionary ? null : (
<>
Expand All @@ -168,59 +159,57 @@ const ViewConceptsHeader: React.FC<Props> = ({
}}
anchorEl={switchSourceAnchor}
keepMounted
open={Boolean(switchSourceAnchor)}
open={!!switchSourceAnchor}
onClose={handleSwitchSourceClose}
>
<Grid container direction="column">
<form
<Grid container direction="column" className={classes.sourcesDropdownHeader}>
<FormControlLabel
control={
<Switch
checked={showAllSources}
onChange={handleShowSources}
color="primary"
name="displayVerified"
/>
}
label={
showAllSources
? `Showing all Sources`
: `Show all Sources`
}
/>
{showAllSources && <form
onSubmit={(e: React.SyntheticEvent) => {
e.preventDefault();
handleSearch(q);
handleSearch(queryString);
}}
>
<Input
color="primary"
type="search"
fullWidth
placeholder={"Select an alternative source"}
value={q}
onChange={e => setQ(e.target.value)}
value={queryString}
onChange={e => setQueryString(e.target.value)}
endAdornment={
<InputAdornment position="end">
<IconButton onClick={() => handleSearch(q)}>
<SearchIcon />
<IconButton onClick={() => handleSearch(queryString)}>
<SearchIcon/>
</IconButton>
</InputAdornment>
}
/>
</form>

<FormControlLabel
control={
<Switch
checkedIcon={<VerifiedSource />}
checked={showSources}
onChange={handleShowSources}
color="primary"
name="displayVerified"
/>
}
label={
showSources
? `Showing verified Sources only`
: `Show verified Sources only`
}
/>
</form>}
</Grid>
{showSources ? (
{showAllSources ? (
<InfiniteScroll
dataLength={preferredSources ? preferredSources?.length : 0}
dataLength={currentSources ? currentSources.length : 0}
next={fetchMoreData}
hasMore={true}
loader={<h4>Loading...</h4>}
endMessage={<h4>end</h4>}
>
{preferredSources?.filter(Boolean).map(({ name, url }) => (
{currentSources?.map(({ name, url }) => (
<MenuItem
// replace because we want to keep the back button useful
replace
Expand All @@ -239,7 +228,7 @@ const ViewConceptsHeader: React.FC<Props> = ({
))}
</InfiniteScroll>
) : (
preferredSources?.filter(Boolean).map(({ name, url }) => (
currentSources?.map(({ name, url }) => (
<MenuItem
// replace because we want to keep the back button useful
replace
Expand All @@ -262,7 +251,6 @@ const ViewConceptsHeader: React.FC<Props> = ({
</>
);
};

return (
<Header
title={getTitleBasedOnContainerType()}
Expand All @@ -280,5 +268,4 @@ const ViewConceptsHeader: React.FC<Props> = ({
</Header>
);
};

export default ViewConceptsHeader;

0 comments on commit 835272c

Please sign in to comment.