section extension languages

webUI/react/src/components/ExtensionCard.tsx

@@ -40,6 +40,7 @@ const useStyles = makeStyles((theme) => ({
 
 interface IProps {
     extension: IExtension
+    notifyInstall: () => void
 }
 
 export default function ExtensionCard(props: IProps) {
@@ -47,6 +48,7 @@ export default function ExtensionCard(props: IProps) {
         extension: {
             name, lang, versionName, installed, apkName, iconUrl,
         },
+        notifyInstall,
     } = props;
     const [installedState, setInstalledState] = useState<string>((installed ? 'uninstall' : 'install'));
 
@@ -60,6 +62,7 @@ export default function ExtensionCard(props: IProps) {
         client.get(`/api/v1/extension/install/${apkName}`)
             .then(() => {
                 setInstalledState('uninstall');
+                notifyInstall();
             });
     }
 
@@ -67,7 +70,8 @@ export default function ExtensionCard(props: IProps) {
         setInstalledState('uninstalling');
         client.get(`/api/v1/extension/uninstall/${apkName}`)
             .then(() => {
-                setInstalledState('install');
+                // setInstalledState('install');
+                notifyInstall();
             });
     }
 

webUI/react/src/components/ExtensionLangSelect.tsx

@@ -0,0 +1,103 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import React, { useState } from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Dialog from '@material-ui/core/Dialog';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import IconButton from '@material-ui/core/IconButton';
+import FilterListIcon from '@material-ui/icons/FilterList';
+
+const useStyles = makeStyles(() => createStyles({
+    paper: {
+        maxHeight: 435,
+        width: '80%',
+    },
+}));
+
+interface IProps {
+    shownLangs: string[]
+    setShownLangs: (arg0: string[]) => void
+    allLangs: string[]
+}
+
+export default function ExtensionLangSelect(props: IProps) {
+    const { shownLangs, setShownLangs, allLangs } = props;
+    // hold a copy and only sate state on parent when OK pressed, improves performance
+    const [mShownLangs, setMShownLangs] = useState(shownLangs);
+    const classes = useStyles();
+    const [open, setOpen] = useState<boolean>(false);
+
+    const handleCancel = () => {
+        setOpen(false);
+    };
+
+    const handleOk = () => {
+        setOpen(false);
+        setShownLangs(mShownLangs);
+    };
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>, lang: string) => {
+        const { checked } = event.target as HTMLInputElement;
+
+        if (checked) {
+            setMShownLangs([...mShownLangs, lang]);
+        } else {
+            const clone = JSON.parse(JSON.stringify(mShownLangs));
+            clone.splice(clone.indexOf(lang), 1);
+            setMShownLangs(clone);
+        }
+    };
+
+    return (
+        <>
+            <IconButton
+                onClick={() => setOpen(true)}
+                aria-label="display more actions"
+                edge="end"
+                color="inherit"
+            >
+                <FilterListIcon />
+            </IconButton>
+            <Dialog
+                classes={classes}
+                maxWidth="xs"
+                open={open}
+            >
+                <DialogTitle>Enabled Languages</DialogTitle>
+                <DialogContent dividers>
+                    <FormGroup>
+                        {allLangs.map((lang) => (
+                            <FormControlLabel
+                                control={(
+                                    <Checkbox
+                                        checked={mShownLangs.indexOf(lang) !== -1}
+                                        onChange={(e) => handleChange(e, lang)}
+                                        color="default"
+                                    />
+                                )}
+                                label={lang}
+                            />
+                        ))}
+                    </FormGroup>
+
+                </DialogContent>
+                <DialogActions>
+                    <Button autoFocus onClick={handleCancel} color="primary">
+                        Cancel
+                    </Button>
+                    <Button onClick={handleOk} color="primary">
+                        Ok
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

webUI/react/src/components/NavBar.tsx

@@ -16,7 +16,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
 
 import TemporaryDrawer from './TemporaryDrawer';
-import NavBarTitle from '../context/NavbarTitle';
+import NavBarContext from '../context/NavbarContext';
 import DarkTheme from '../context/DarkTheme';
 
 const useStyles = makeStyles((theme) => ({
@@ -44,7 +44,7 @@ export default function NavBar() {
     const classes = useStyles();
     const [drawerOpen, setDrawerOpen] = useState(false);
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const { title } = useContext(NavBarTitle);
+    const { title, action } = useContext(NavBarContext);
     const open = Boolean(anchorEl);
 
     const { darkTheme } = useContext(DarkTheme);
@@ -74,13 +74,14 @@ export default function NavBar() {
                     <Typography variant="h6" className={classes.title}>
                         {title}
                     </Typography>
+                    {action}
                     {/* <IconButton
                         onClick={handleMenu}
                         aria-label="display more actions"
                         edge="end"
                         color="inherit"
                     >
-                        <MoreIcon />
+                        <FilterListIcon />
                     </IconButton> */}
                     {/* <Menu
                         id="menu-appbar"