diff --git a/assets/src/Context.js b/assets/src/Context.js
index fbaa2793..40cf9472 100644
--- a/assets/src/Context.js
+++ b/assets/src/Context.js
@@ -1,132 +1,134 @@
 import React, {useCallback, useState, useEffect} from "react"
 import { getListOfInstitution } from './services/requests/Institution'
 import { getListOfJournal } from "./services/requests/Journal"
 import { getListOfFunder } from "./services/requests/Funder"
 
 
 const Context = React.createContext()
 
 function ContextProvider ({children}) {
 //call the custom hook for listing field with api
 const [institList, setInstitList] = useState([]);
 const [journalList, setJournalList] = useState([]);
 const [funderList, setFunderList] = useState([]);
 
 const [institId, setInstitId] = React.useState('');
 const [institName, setInstitName] = React.useState('');
 
 const [journalId, setJournalId] = React.useState('');
 const [journalName, setJournalName] = React.useState('');
 
 const [funderId, setFunderId] = React.useState('');
 const [funderName, setFunderName] = React.useState('');
-
+const [url, setUrl] = React.useState('');
 const getInstitListFromApi = useCallback(async () => {
     try {
       const response = await getListOfInstitution()
       setInstitList(response.data)
     } catch (error) {
       console.log(`error 700 from Get Institution- ${error.message}`)
     }
   }, [])
 
   const getJournalListFromApi = useCallback(async () => {
     try {
       const response = await getListOfJournal()
       setJournalList(response.data)
     } catch (error) {
       console.log(`error 700 from Get Institution- ${error.message}`)
     }
   }, [])
 
   const getFunderListFromApi = useCallback(async () => {
     try {
       const response = await getListOfFunder()
       setFunderList(response.data)
     } catch (error) {
       console.log(`error 700 from Get Funder- ${error.message}`)
     }
   }, [])
 
   useEffect(() => {
     getInstitListFromApi(),
     getJournalListFromApi(),
     getFunderListFromApi()
   }, [])
   //get the institution Id and update request array
   function getSelectedInstitId (name) {
      const updateArr = institList.map(item => {
        if(item.name === name) {
          console.log(item.id, item.name)
 
          const newItem = item.id
           const newItemName = item.name
           setInstitId(newItem)
           setInstitName(newItemName)
          return newItem
 
        }
        
       //  return 
      })
      
     //  return
    }
    //get the journal Id and update request array
   function getSelectedJournalId (name) {
     const updateArr = journalList.map(item => {
       if(item.name === name) {
         console.log(item.id, item.name)
         
         const newItem = item.id
         const newItemName = item.name
         setJournalId(newItem)
         setJournalName(newItemName)
         return
       }
       return
     })
     return
   }
   //get the funder Id and update request array
   function getSelectedFunderId (name) {
     const updateArr = funderList.map(item => {
       if(item.name === name) {
         console.log(item.id, item.name)
         
         const newItem = item.id
         const newItemName = item.name
         setFunderId(newItem)
         setFunderName(newItemName)
         return
       }
       return
     })
     return
   }
     return (
         <Context.Provider value={{institList, 
                                   journalList,
                                   funderList,
                                   getSelectedInstitId, 
                                   getSelectedJournalId, 
                                   getSelectedFunderId,
                                   institId, 
                                   setInstitId, 
                                   journalId, 
                                   setJournalId,
                                   funderId,
                                   setFunderId,
                                   institName,
                                   setInstitName,
                                   journalName,
                                   funderName,
                                   setFunderName,
-                                  setJournalName
+                                  setJournalName,
+                                  setUrl,
+                                  url
                                   }}>
             {children}
         </Context.Provider>
     )
 }
 
 export {ContextProvider, Context}
\ No newline at end of file
diff --git a/assets/src/components/DetailCard.js b/assets/src/components/DetailCard.js
index e1dde466..d0e44a7a 100644
--- a/assets/src/components/DetailCard.js
+++ b/assets/src/components/DetailCard.js
@@ -1,359 +1,356 @@
-import React, {useContext} from "react"
-
+import React, {useContext,useEffect} from "react"
+import {Context} from "../Context"
 import { makeStyles } from '@material-ui/core/styles';
 import "./detailscard.css"
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import { HiLink } from "react-icons/hi";
 import DoneIcon from '@material-ui/icons/Done';
 import WarningIcon from '@material-ui/icons/Warning';
 import "./termcard.css"
 import { BsUnlock } from "react-icons/bs";
 import { GrDiamond } from "react-icons/gr";
 import Chip from '@material-ui/core/Chip';
 import ClearSharpIcon from '@material-ui/icons/ClearSharp';
-import {Context} from "../Context"
-
 
-// import {
-//   useHistory
-// } from "react-router-dom";
 
 const useStyles = makeStyles((theme) => ({
   root: {
     '& > *': {
 
       margin: theme.spacing(1),
       display: 'grid',
     },
     flexGrow: 1,
   },
 
   formControl: {
     margin: theme.spacing(1),
     width: 200,
   },
   selectEmpty: {
     marginTop: theme.spacing(1),
   },
 
 chip: {
   margin: 0.5,
   
 },
 
 heading: {
   fontSize: theme.typography.pxToRem(15),
   fontWeight: theme.typography.fontWeightRegular,
 },
 
 }));
 
+
 function DetailsCard({details}) {
+  
   const { getSelectedInstitId,
-    setFunderName,
-    setJournalName,
-    setInstitName,
+    setUrl,
+    url
   } 
     = useContext(Context)
- 
 
   
     const classes = useStyles();
 
-
+    useEffect(() => {
+      setUrl(window.location.href)
+    },)
   
 
   
  
 if (details !== 'null') {
 
   
 
   // // setInstitName(details.name)
   
 
   return (
 
 <div id={details.id}>
 
     <Card className="detail-Card">
       <CardContent>
       {details.end_year && 
       <Typography className={classes.title} color="textSecondary" gutterBottom
       style={{backgroundColor:"lightgrey", text:"white"}}
       >
             <WarningIcon /> Inactive!
 
             {details.starting_year && 
             <div>
               <p>From {details.starting_year} to {details.end_year}</p>
               </div>
             }
             </Typography>
       }
         <Typography className={classes.title} color="textSecondary" gutterBottom>
         <h4>{details.name}</h4>
         <Typography variant="body2" component="p"
         style={{ textAlign: "left"}}
         >
         <ul>
         {details.issn && details.issn.map(item => {
          return (
         
         item.issn_type === "1" ?
       
         <li>Print ISSN: {item.issn}</li>
       
         : item.issn_type === "2" ?
         <li>Electronic ISSN: {item.issn}</li>
         
         : item.issn_type === "3" ?
         <li>Other ISSN: {item.issn}</li>
 
         :null
          )
         })}
         </ul>
         </Typography>
         {details.publisher && details.publisher.map(item => {
         return <div key={item.id}> <div > 
         <Button href={item.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Publisher: {item.name}</Button>
         <Button href={item.oa_policies} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Publisher policies</Button>
       </div></div>
         })}
         </Typography>
         <Typography variant="h5" component="h2">
        
           
         </Typography>
         <Typography className={classes.pos} color="textSecondary">
         
         {details.country && details.country.map(item => {
         return <div key={item.id}>{item.name}</div>;
         })}
         
         {!details.end_year &&
         <div>
           Since {details.starting_year}
         </div>
 
         }
        
         </Typography>
         
         <Typography variant="body2" component="p"
         style={{ textAlign: "left"}}
         >
         {details.oa_status ?
         <div>
           {details.oa_status.status !== "UNKNOWN" ? 
           <div>
             { 
               details.oa_status.status === "Gold" ?
                   <p>
                   <abbr title={details.oa_status.description}>
                    
                    Open Acces Status: 
                             <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                                 <Chip
                                       size="small"
                                       avatar={ <BsUnlock />}
                                       label={details.oa_status.status}
                                       className={classes.chip}
                                       style={{ background: "#FFD700", textAlign: "left"}}
                                       // title="Licence Information"
                                   />
                               </Button>
                   </abbr>
                   </p>
               : details.oa_status.status === "Diamond" ?
                   <>
 
 
                   <abbr title={details.oa_status.description}>
                   Open Acces Status: 
                       <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                           <Chip
                                 size="small"
                                 avatar={ <GrDiamond />}
                                 label={details.oa_status.status}
                                 className={classes.chip}
                                 style={{ background: "#B9F2FF", textAlign: "left"}}
                                 // title="Licence Information"
                             />
                         </Button>
                   
                   {/* {details.oa_status.status}  */}
                   
                   </abbr>
                   </>
               :details.oa_status.status === "Full" ?
                   <p>
                   <abbr title={details.oa_status.description}>
                   Open Acces Status: 
                             <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                                 <Chip
                                       size="small"
                                       avatar={ <BsUnlock />}
                                       label={details.oa_status.status}
                                       className={classes.chip}
                                       style={{ background: "#ADD8E6", textAlign: "left"}}
                                       // title="Licence Information"
                                   />
                               </Button>
                   </abbr>
                   </p>
               :details.oa_status.status === "hybrid" ?
                   <p>
                   <abbr title={details.oa_status.description}>
                   Open Acces Status: 
                             <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                                 <Chip
                                       size="small"
                                       avatar={ <BsUnlock />}
                                       label={details.oa_status.status}
                                       className={classes.chip}
                                       style={{ background: "#cfcdaa", textAlign: "left"}}
                                       // title="Licence Information"
                                   />
                               </Button>
                   </abbr>
                   </p>
               :details.oa_status.status === "Green" ?
                   <p>
                   <abbr title={details.oa_status.description}>
                   Open Acces Status: 
                             <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                                 <Chip
                                       size="small"
                                       avatar={ <BsUnlock />}
                                       label={details.oa_status.status}
                                       className={classes.chip}
                                       style={{ background: "#DAF7A6", textAlign: "left"}}
                                       // title="Licence Information"
                                   />
                               </Button>
                   </abbr>
                   </p>
               :details.oa_status.status === "none" ?
                   <p>
                   <abbr title={details.oa_status.description}>
                   Open Acces Status:
                   <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                                 <Chip
                                       size="small"
                                       avatar={ <ClearSharpIcon />}
                                       label={details.oa_status.status}
                                       className={classes.chip}
                                       style={{ background: "#FF7F7F", textAlign: "left"}}
                                       // title="Licence Information"
                                   />
                               </Button>
                   </abbr>
                   </p>
               :null
 
             }
           </div>
           
           :null}
         </div>
         :null}
         
         </Typography>
         {details.language && 
           details.language.map(item =>(
 
               <Typography variant="body2" component="p"
               style={{ textAlign: "left"}}
               >
               
               <p><small>Language: {item.name}</small></p>
               </Typography>
 
 
             ))
           
        
         }
 
 
 
         <Typography variant="body2" component="p"
         style={{ textAlign: "left"}}
         >
         {details.doaj_seal && 
         <div >
         <Button href="https://doaj.org/apply/seal/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/> DOAJ seal</Button>
         </div>
         }
         {details.doaj_status && 
         
         <div > 
           <Button 
           href="https://doaj.org/search/journals?source=%7B%22query%22%3A%7B%22match_all%22%3A%7B%7D%7D%2C%22size%22%3A50%2C%22sort%22%3A%5B%7B%22created_date%22%3A%7B%22order%22%3A%22desc%22%7D%7D%5D%7D" 
           target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Listed on DOAJ</Button>
           </div>
         }
         {details.lockss &&
         <div > 
           <Button href="https://www.lockss.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with LOCKSS</Button>
         </div>
         }
         {details.portico && 
         <div > 
         <Button href="https://www.portico.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with Portico</Button>
       </div>
         }
         
         {details.nlch && 
          <div > 
          <Button href="https://consortium.ch/nationallizenzen/?lang=en" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Swiss National licences</Button>
        </div>
         }
         {details.qoam_av_score && 
         <div > 
         <Button href="https://www.qoam.eu/" target="blank" rel="noopener noreferrer" size="small"><HiLink/>QOAM score : {details.qoam_av_score}</Button>
       </div>
         }
 
         </Typography>
          
       </CardContent>
       <CardActions>
       {details.website ?
         <Button href={details.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/> Website </Button>
       :null}
         {details.oa_options ? 
           <Button href={details.oa_options} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Open Access Infos</Button>
         :null}
         {details.ror ? 
           <Button href='https://ror.org/details.ror' target="blank" rel="noopener noreferrer" size="small"><HiLink/>Ror ID: {details.ror}</Button>
         :null}
         {details.fundref ? 
           <Button href="https://search.crossref.org/funding?q=details.fundref" target="blank" rel="noopener noreferrer" size="small"><HiLink/>Fundref Id: {details.fundref}</Button>
         :null}
       </CardActions>
     </Card>
   
   
     
     
 </div>
       )
       
     }
 
     else {
       return null
     }
 
     
 }
 
 export default DetailsCard
\ No newline at end of file
diff --git a/assets/src/pages/SearchFilterFields.js b/assets/src/pages/SearchFilterFields.js
index c3e5b060..003b1d1e 100644
--- a/assets/src/pages/SearchFilterFields.js
+++ b/assets/src/pages/SearchFilterFields.js
@@ -1,1116 +1,1183 @@
 import React, {useContext, useState, useEffect} from 'react';
 import "./SearchFilterFields.css"
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import FormControl from '@material-ui/core/FormControl';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { searchCondi, searchorganizationonly, searchjournalonly, searchInstitFunder, searchCondi3 } from '../services/requests/Condition'
 import {getJournal} from '../services/requests/Journal'
 import {getFunder} from '../services/requests/Funder'
 import {getInstitution} from '../services/requests/Institution'
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Typography from '@material-ui/core/Typography';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import Grid from '@material-ui/core/Grid'
 import Box from '@material-ui/core/Box'
 import Container from '@material-ui/core/Container';
 
 import {Context} from "../Context"
 
 
 import ResultCard from  "../components/ResultCard"
 import DetailCard from  "../components/DetailCard"
 
 
 import CircularProgress from '@material-ui/core/CircularProgress'
+import Fab from '@material-ui/core/Fab'
+import ShareIcon from '@material-ui/icons/Share'
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Slide from '@material-ui/core/Slide';
+
+
+
 
 import {
   useHistory,useLocation
 } from "react-router-dom";
 
 function useQuery() {
   return new URLSearchParams(useLocation().search);
 }
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
 
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
   },
   // selectEmpty: {
   //   marginTop: theme.spacing(2),
   // },
 
 //   card: {
 //     width: '100%',
 //     marginTop: "1rem",
     
     
 // },
 
 chip: {
   margin: 0.5,
   
 },
 
 // heading: {
 //   fontSize: theme.typography.pxToRem(15),
 //   fontWeight: theme.typography.fontWeightRegular,
 // },
 
 }));
 
 export default function SearchFilterFields() {
 
   const history = useHistory();
+  // const location = useLocation()
+
   console.log(history)
   let query = useQuery();
 
+  const [open, setOpen] = React.useState(false);
+ 
  
   const classes = useStyles();
 
   //call the custom hook for listing field with api
 
   const { getSelectedInstitId,
           getSelectedJournalId,
           getSelectedFunderId,
           institList, 
           journalList,
           funderList,
           institId,
           journalId,
           funderId,
           setInstitId, 
           setJournalId,
           setFunderId,
           institName,
           journalName,
           funderName,
+          setFunderName,
+          setJournalName,
+          setInstitName,
+          setUrl,
+          url
         } 
           = useContext(Context)
   
 
   //responses
   const [conditions, setConditions] = useState([]);
   const [details, setDetails] = useState([]);
   const [result, updateResult] = useState([]);
   const [loading, setLoading] = useState(false);
+  // const [url, setUrl] = useState(window.location.href);
   
   useEffect(() => {
   
    setDetails('null')
 
    //handle Url param
 
   console.log(history)
   if (history.location.pathname === "/check") {
     console.log("this an url to check")
     setDetails('fromUrl')
     // alert(query.get("institution"))
   
   
               if (query.get("institution") && !query.get("funder") && !query.get("journal")){
                 //get organizations conditions
                 // alert(`get api organization Condition only: ${institId}`)
                 //condtion type is not journal only = 1
                 // Get the user
                 
                   const sendSearchInstitOnly =
                   async () => {
                     
                         try {
                           
                           
                             const resp = await searchorganizationonly(query.get("institution"),1)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                             
                             
                             
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   
                         
                   }
                   
                   console.log(details)
                   
                   const sendGetrequest =
                   async () => {
                         try {
                             const resp = await getInstitution(query.get("institution"))
-                            console.log(resp.data)
+                            // console.log(`instit name from api: ${resp.data.name}`)
+                            // setInstitName(resp.data.name)
                             updateResult(arr => [...arr, resp.data])
                             // if (details === "null") {
                             //   setDetails(resp.data)
                             // }
                             // else {
                             //   setDetails(prevArray => [...prevArray, resp.data])
                             // }
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         
                   }
                     sendSearchInstitOnly().then(
                       sendGetrequest()
                     )
                     history.push({pathname:`check`, search:`institution=${query.get("institution")}`})
                 }
 
                 else if (!query.get("institution") && !query.get("journal") && query.get("funder")){
                   //get funder conditions
                
                   // alert(`get api funder Condition only: ${funderId}`)
                   //condtion type is not journal only = 1
               
                   const sendSearchOrgaOnly =
                   async () => {
                         try {
                             const resp = await searchorganizationonly(query.get("funder"),1)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                   
                   const sendGetrequest =
                   async () => {
                         try {
                             const resp = await getFunder(query.get("funder"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                 
                 sendSearchOrgaOnly().then(
                   sendGetrequest()
                 )
                 history.push({pathname:`check`, search:`funder=${query.get("funder")}`})
                 }
 
                 else if (!query.get("funder") && !query.get("institution") && query.get("journal")){
                   
                   //get journals conditions
                   // alert(`get api journal Condition only: ${journalId}`)
                   //condtion type is not institution only = 2
                   //get journal detail
               
                   const sendSearchJournalOnly =
                   async () => {
                         try {
                             const resp = await searchjournalonly(query.get("journal"),2)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                             // setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
               
                   }
                   
                   const sendGetrequest =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         
                   }
               
                 sendSearchJournalOnly().then(
                   sendGetrequest()
                 )
                 history.push({pathname:`check`, search:`journal=${query.get("journal")}`})
                 }
                 else if (query.get("institution") && query.get("funder") && !query.get("journal")) {
                    
                   //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
                   //condtion type journal/condition = 3
                   const sendSearchCondi =
                   async () => {
                         try {
                             const resp = await searchInstitFunder(query.get("institution"), query.get("funder"), 1)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                  
                   const sendGetInstit =
                   async () => {
                         try {
                             const resp = await getInstitution(query.get("institution"))
                             console.log(resp.data)
                             // detailArray.push(resp.data)
                             // setDetails(detailArray)
                             updateResult(arr => [...arr, resp.data])
                            
                             
                             
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                   const sendGetFunder =
                     async () => {
                       try {
                           const resp = await getFunder(query.get("funder"))
                           console.log(resp.data)
                           
                           updateResult(arr => [...arr, resp.data])
                           
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                       
                     }
                   sendSearchCondi().then(
                     sendGetInstit().then(sendGetFunder())
                   )
               
                   history.push({pathname:`check`, search: `institution=${query.get("institution")}&funder=${query.get("funder")}`})
                 }
 
                 else if (query.get("institution") && query.get("journal") && !query.get("funder")) {
                    
                   //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
                   //condtion type journal/condition = 3
                   const sendSearchCondi =
                   async () => {
                         try {
                             const resp = await searchCondi(query.get("journal"),query.get("institution"))
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                   const sendGetInstit =
                   async () => {
                     try {
                         const resp = await getInstitution(query.get("institution"))
                         console.log(resp.data)
                         
                         updateResult(arr => [...arr, resp.data])
                         
                     } catch (err) {
                         // Handle Error Here
                         console.error(err);
                     }
                     
                   }
                   const sendGetJournal =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             // detailArray.push(resp.data)
                             // setDetails(detailArray)
                             updateResult(arr => [...arr, resp.data])
                            
                             
                             
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                   
                   sendSearchCondi().then(
                     sendGetInstit().then(sendGetJournal)
                   )
               
                   history.push({pathname:`check`, search: `institution=${query.get("institution")}&journal=${query.get("journal")}`})
                 }
 
                 else if (!query.get("institution") && query.get("journal") && query.get("funder")) {
                    
                   // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
                   //condtion type journal/institution/funder conditions = 3
               
                   const sendGetCondi =
                   async () => {
                         try {
                             const resp = await searchCondi(query.get("journal"),query.get("funder"))
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
               
                   const sendGetFunder =
                     async () => {
                       try {
                           const resp = await getFunder(query.get("funder"))
                           console.log(resp.data)
                           updateResult(arr => [...arr, resp.data])
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                     }
 
                   const sendGetJournal =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                   
                   
                   
                   sendGetCondi().then(
                     sendGetFunder().then(
                       sendGetJournal()
                     )
                   )
                   history.push({pathname:`check`, search: `funder=${query.get("funder")}&journal=${query.get("journal")}`})
                 }
 
                 else if (query.get("institution") && query.get("journal") && query.get("funder")) {
                  
                   // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
                   //condtion type journal/institution/funder conditions = 3
                   console.log("main check !")
                   //(institution + journal)
                   const detailArray = []
               
                   const sendGetCondi =
                   async () => {
                         try {
                             const resp = await searchCondi3(query.get("institution"),query.get("journal"),query.get("funder"))
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                   const sendGetInstit =
                     async () => {
                       try {
                           const resp = await getInstitution(query.get("institution"))
                           console.log(resp.data)
                           detailArray.push(resp.data)
                           updateResult(arr => [...arr, resp.data])
                           
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                     }
 
                     const sendGetFunder =
                     async () => {
                       try {
                           const resp = await getFunder(query.get("funder"))
                           console.log(resp.data)
                           updateResult(arr => [...arr, resp.data])
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                     }
                   const sendGetJournal =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
 
               
                   //order requests
                   sendGetCondi()
                   sendGetInstit().then(
                       sendGetFunder()
                       ).then(
                         sendGetJournal()
                     )
                     history.push({pathname:`check`, search: `institution=${query.get("institution")}&funder=${query.get("funder")}&journal=${query.get("journal")}`})
                     
                    
                 }
                 
                   
 
   }
   //set institution name
-  
+
   
   }, [])
   //set institution name
  
   // clear teh usestate
   // const clear = () => {
   //   setState((prev) => new Map(prev.clear()));
   // }
- 
-
+ function handlShare(e) {
+  
+  setOpen(true)
+  navigator.clipboard.writeText(url)
+  
+}
+const handleClose = () => {
+  setOpen(false);
+};
   
   function handleInstit(e, newInputValue) { 
-  console.log(`handle instit ${institName}`)
+
    if (newInputValue){
     getSelectedInstitId(newInputValue)
     return
 
    }
+
+  //  if (institName){
+  //   getSelectedInstitId(institName)
+  //   return
+
+  //  }
+   
    setInstitId("")
 
   }
   
   function handleFunder(e, newInputValue) {
     console.log(newInputValue)
     if (newInputValue){
     getSelectedFunderId(newInputValue)
     return
     }
     setFunderId("")
   }
 
   function handleJournal(e, newInputValue) {
     
     if (newInputValue){
       getSelectedJournalId(newInputValue)
       return
      }
      setJournalId("")     
   }
 
 function handleSubmit(e) {
   setLoading(true)
   e.preventDefault()
   
   //reset precedent results
   setConditions([])
   setDetails([])
   updateResult([])
 
 
   if (!institId && !journalId && !funderId){
     setLoading(false)
     
   }
 
   if (institId && !journalId && !funderId){
   //get organizations conditions
   // alert(`get api organization Condition only: ${institId}`)
   //condtion type is not journal only = 1
   // Get the user
   
     const sendSearchInstitOnly =
     async () => {
       
           try {
             
             
               const resp = await searchorganizationonly(institId,1)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
               
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     
           
     }
     
     console.log(details)
 
     const sendGetrequest =
     async () => {
           try {
               const resp = await getInstitution(institId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
               // if (details === "null") {
               //   setDetails(resp.data)
               // }
               // else {
               //   setDetails(prevArray => [...prevArray, resp.data])
               // }
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           
     }
       sendSearchInstitOnly().then(
         sendGetrequest()
       )
       history.push({pathname:`check`, search:`institution=${institId}`})
+      
   }
-
+  
   else if (!institId && !journalId && funderId){
     //get funder conditions
     // alert(`get api funder Condition only: ${funderId}`)
     //condtion type is not journal only = 1
 
     const sendSearchOrgaOnly =
     async () => {
           try {
               const resp = await searchorganizationonly(funderId,1)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     
     const sendGetrequest =
     async () => {
           try {
               const resp = await getFunder(funderId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
   
   sendSearchOrgaOnly().then(
     sendGetrequest()
   )
   history.push({pathname:`check`, search:`funder=${funderId}`})
   }
   else if (!funderId && !institId && journalId){
     //get journals conditions
     // alert(`get api journal Condition only: ${journalId}`)
     //condtion type is not institution only = 2
     //get journal detail
 
     const sendSearchJournalOnly =
     async () => {
           try {
               const resp = await searchjournalonly(journalId,2)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
               // setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
 
     }
     
     const sendGetrequest =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           
     }
 
   sendSearchJournalOnly().then(
     sendGetrequest()
   )
   history.push({pathname:`check`, search:`journal=${journalId}`})
   }
   
   else if (institId && funderId && !journalId) {
     //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
     //condtion type journal/condition = 3
     const sendSearchCondi =
     async () => {
           try {
               const resp = await searchInstitFunder(institId, funderId, 1)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
    
     const sendGetInstit =
     async () => {
           try {
               const resp = await getInstitution(institId)
               console.log(resp.data)
               //manage the order output
               // detailArray.push(resp.data)
               // setDetails(detailArray)
               updateResult(arr => [...arr, resp.data])
               
             
              
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             
             updateResult(arr => [...arr, resp.data])
             
             
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
         
       }
     sendSearchCondi().then(
       sendGetInstit().then(sendGetFunder())
     )
 
     history.push({pathname:`check`, search: `institution=${institId}&funder=${funderId}`})
   }
   else if (institId && journalId && !funderId) {
     //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
     //condtion type journal/condition = 3
     const sendSearchCondi =
     async () => {
           try {
               const resp = await searchCondi(journalId,institId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     const sendGetInstit =
     async () => {
       try {
           const resp = await getInstitution(institId)
           console.log(resp.data)
           
           updateResult(arr => [...arr, resp.data])
         
       } catch (err) {
           // Handle Error Here
           console.error(err);
       }
       
     }
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               // detailArray.push(resp.data)
               // setDetails(detailArray)
               updateResult(arr => [...arr, resp.data])
            
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     
     sendSearchCondi().then(
       sendGetInstit().then(sendGetJournal)
     )
 
     history.push({pathname:`check`, search: `institution=${institId}&journal=${journalId}`})
   }
   else if (!institId && journalId && funderId) {
     // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
     //condtion type journal/institution/funder conditions = 3
 
     const sendGetCondi =
     async () => {
           try {
               const resp = await searchCondi(journalId,funderId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
 
 
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     
     
     
     sendGetCondi().then(
       sendGetJournal().then(
         sendGetFunder()
       )
     )
     history.push({pathname:`check`, search: `funder=${funderId}&journal=${journalId}`})
   }
   else if (institId && journalId && funderId) {
     // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
     //condtion type journal/institution/funder conditions = 3
     console.log("main check !")
     //(institution + journal)
     const detailArray = []
 
     const sendGetCondi =
     async () => {
           try {
               const resp = await searchCondi3(institId,journalId,funderId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
 
     const sendGetInstit =
       async () => {
         try {
             const resp = await getInstitution(institId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
             
             
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
 
       const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
 
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     
     //order the request
     sendGetCondi()
     sendGetInstit().then(
         sendGetFunder()
         ).then(
           sendGetJournal()
       )
       history.push({pathname:`check`, search: `institution=${institId}&funder=${funderId}&journal=${journalId}`})
+      
   }
   
 }
 
 console.log(`all conditions SET: ${conditions}`)
 console.log(details)
 
 console.log(`Selected Institution ID: ${institId} , Selected Funder: ${funderId}, Selected Journal ID: ${journalId}`)
 
 
 
 function detailsResult() {
 
 console.log(details)
 console.log(result)
 
 if (details !== 'null') {
   
 
   return (
     
 
     <div className={classes.root} >
       
  
 
-                  <Accordion style={{ marginBottom: "2rem"}}>
+                  <Accordion style={{ marginBottom: "2rem"}} defaultExpanded="true">
                   <AccordionSummary
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel1a-content"
                     id="panel1a-header"
                   >
                  
                     <Typography className={classes.heading}>
                       
                     <p>Selected option(s)</p>
                     
                     </Typography>
                   
                    
                   </AccordionSummary>
                   <Container maxWidth="xl" >
                   <Grid container spacing={0.5} direction="row">
        
                   
                   {result?.map(i => (
                   
                   <Grid key={i.id} item>
                  
                    <AccordionDetails>
                   
 
                   <DetailCard  details={i}/>
                   
                  
                  
                   </AccordionDetails>
                
                   </Grid>
     
                   ))}
                   </Grid>
                   </Container>
               
                 
                   </Accordion>
         
           
   </div>
   )
   }
 }
 
 function conditionResults () {
 
   return (
     <div className={classes.root} >
     {conditions?.map(i=> (
 
     
      <ResultCard  result={i}/>
    
     ))}
     </div>
   )
 
 }
 
 
   return (
     <Box>
     <div className={classes.root}>
     <Container maxWidth="xl" >
     <Grid container spacing={1} direction="row">
       
         <form className={classes.root} style={{ marginTop: "8rem"}}  noValidate autoComplete="on" onSubmit={handleSubmit} color="inherit">
         
         
             <FormControl  className="form-input" style={{ width: 340}}>
               <Autocomplete
                   freeSolo
                   autoSelect
                   selectOnFocus
                   clearOnBlur 
                   id="institution"
                   options={institList.map((option) => option.name)}
                   renderOption={(params) => (
                     <a style={{ textAlign: "left"}}>{params}</a>
                   )}
                   
                   // getOptionLabel={(option) => option.name}
                   // filterOptions={filterOptions}
-                  inputValue={institName}
                   onInputChange={handleInstit}
+                  // inputValue={institName}
                   renderInput={(params) => (
                     <TextField
                         {...params}
                         label="Swiss Institutions"
                         // margin="normal"
                         value={institId}
                         variant="outlined"
                         
                     />
                     )}
                     
               />
             </FormControl>
           
          
 
          
            
             <FormControl className="form-input" style={{ width: 340}}>
               <Autocomplete
                 freeSolo
                 id="funder"
                 options={funderList.map((option) => option.name)}
                 renderOption={(params) => (
                   <a style={{ textAlign: "left"}}>{params}</a>
                 )}
                 onInputChange={handleFunder}
                 renderInput={(params) => (
                   <TextField
                       {...params}
                       label="Funder"
                       // margin="normal"
                       value={funderId}
                       variant="outlined"
                   />
                   )}
                 />
               </FormControl>
               
          
         
 
          
          
             <FormControl className="form-input" style={{ width: 340}}>
             
               <Autocomplete
                 freeSolo
                 id="journal"
                 options={journalList.map((option) => option.name)}
                 renderOption={(params) => (
                   <a style={{ textAlign: "left"}}>{params}</a>
                 )}
                 onInputChange={handleJournal}
                 renderInput={(params) => (
                   <TextField
                       {...params}
                       label="Journal"
                       // margin="normal"
                       value={journalId}
                       variant="outlined"
                   />
                   )}
                 />
               </FormControl>
         
             
            
             <FormControl className="form-input" style={{ width: 340}}>
             
                         {!loading && 
                       
                       
                             <Button
                             className="App-btn"
                             variant="contained" 
                             type="submit"
                             >
                                     Check
                               </Button>
                           }
                         {loading && 
                       <Button
                       className="App-btn"
                       variant="contained" 
                       type="submit"
                       disabled
                       
                       >
                         < CircularProgress 
                         color="white"
                         />
                               Checking...
                         </Button>
                     }
             </FormControl>
           
            
           
           </form>
           </Grid>
           </Container>
         
       <Container maxWidth="xl" >
             
               {detailsResult()}
       
               {conditionResults()}
-             
+        {  history.location.pathname === "/check" &&
+        <Fab onClick={handlShare} color="primary" aria-label="add">
+        <ShareIcon />
+      </Fab>
       
+        }
+        <Dialog
+        open={open}
+        TransitionComponent={Transition}
+        keepMounted
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-slide-title"
+        aria-describedby="alert-dialog-slide-description"
+      >
+        <DialogTitle id="alert-dialog-slide-title">{"Share your Result!"}</DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-slide-description">
+          
+         {url}
+            
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Copy to clipboard!
+          </Button>
+        </DialogActions>
+      </Dialog>
       </Container>
     
    </div>
    </Box>
   );
 }
\ No newline at end of file