Merge pull request #124 from unfoldingWord/bugfix-klappy-issue-123

Bugfix klappy issue 123

Author: klappy

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitea-react-toolkit",
-  "version": "2.0.2-rc.13",
+  "version": "2.1.0-beta",
   "license": "MIT",
   "description": "A Gitea API React Toolkit Component Library",
   "homepage": "https://gitea-react-toolkit.netlify.com/",
@@ -15,6 +15,7 @@
     "axios-cache-adapter": "2.4.1",
     "base-64": "0.1.0",
     "deep-equal": "^2.0.5",
+    "js-base64": "^3.7.2",
     "jszip": "^3.5.0",
     "localforage": "1.7.3",
     "markdown-translatable": "1.3.1-rc.1",
@@ -86,7 +87,7 @@
     "react-docgen-typescript": "^1.16.2",
     "react-dom": "16.11.0",
     "react-scripts": "^3.4.0",
-    "react-styleguidist": "^10.6.2",
+    "react-styleguidist": "^11.1.7",
     "source-map-support": "0.5.16",
     "start-server-and-test": "1.10.6",
     "style-loader": "^1.0.0",

src/components/application-bar/ApplicationBar.js

@@ -10,19 +10,22 @@ import {
 
 import { useStyles } from './useStyles';
 import {
-  UserMenu, DrawerMenu, RepositoryMenu, FileContext,
+  UserMenu, DrawerMenu, RepositoryMenu,
 } from '..';
 
 function ApplicationBar({
   title,
   build,
   buttons,
+  filepath,
   drawerMenu,
   drawerMenuProps,
   hideRepositoryMenu,
+  auth,
+  repo,
+  file,
 }) {
   const classes = useStyles();
-  const { state: file } = useContext(FileContext)
 
   return (
     <div className={classes.root}>
@@ -31,7 +34,7 @@ function ApplicationBar({
         className={classes.appBar}>
         <Toolbar data-test="application-bar">
           <div className={classes.menuButton}>
-            <DrawerMenu {...drawerMenuProps}>
+            <DrawerMenu {...drawerMenuProps} file={file}>
               {drawerMenu}
             </DrawerMenu>
           </div>
@@ -40,12 +43,12 @@ function ApplicationBar({
             {build && <Typography variant="caption" color="inherit" > build {build}</Typography>}
           </Typography>
           <Typography variant="subtitle2" color="inherit" className={classes.grow} noWrap>
-            {file ? file.filepath : ''}
+            {filepath || ''}
           </Typography>
           <div className={classes.grow} />
           {buttons}
-          {!hideRepositoryMenu ? <RepositoryMenu /> : null}
-          <UserMenu />
+          {!hideRepositoryMenu ? <RepositoryMenu repo={repo} /> : null}
+          <UserMenu auth={auth} />
         </Toolbar>
       </AppBar>
     </div>

src/components/application-bar/ApplicationBar.md

@@ -1,3 +1,79 @@
+# Application Bar
+
+## Using Hooks
+
+```js
+import { useContext, useState } from 'react';
+import { IconButton, Badge, List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+import { Mail, Notifications, Inbox } from '@material-ui/icons';
+
+import {
+  useAuthentication,
+  useRepository,
+  useFile,
+  ApplicationBar,
+} from 'gitea-react-toolkit';
+
+const config = {
+  server: "https://bg.door43.org",
+  tokenid:"PlaygroundTesting",
+};
+
+const urls = [
+  "https://bg.door43.org/api/v1/repos/door43-catalog/en_ta",
+  "https://bg.door43.org/api/v1/repos/door43-catalog/en_tw",
+  "https://bg.door43.org/api/v1/repos/door43-catalog/en_tn",
+  "https://bg.door43.org/api/v1/repos/door43-catalog/en_obs",
+];
+
+function Component() {
+  const [authentication, setAuthentication] = useState();
+  const [repository, setRepository] = useState();
+  const [filepath, setFilepath] = useState();
+
+  const auth = useAuthentication({ config, authentication, onAuthentication: setAuthentication});
+  const repo = useRepository({ authentication, repository, config, onRepository: setRepository, urls });
+  const file = useFile({ authentication, repository, config, filepath, onFilepath: setFilepath });
+
+  const buttons = (
+    <IconButton color="inherit">
+      <Badge badgeContent={17} color="secondary">
+        <Notifications />
+      </Badge>
+    </IconButton>
+  );
+  const drawerMenu = (
+    <List>
+      {['Inbox', 'Sent'].map((text, index) => (
+        <ListItem button key={text}>
+          <ListItemIcon style={{margin:0}}>
+            {index % 2 === 0 ? <Inbox /> : <Mail />}
+          </ListItemIcon>
+          <ListItemText primary={text} />
+        </ListItem>
+      ))}
+    </List>
+  );
+
+  return (
+    <ApplicationBar
+      title='Application Title'
+      buttons={buttons}
+      drawerMenu={drawerMenu}
+      auth={auth}
+      repo={repo}
+      file={file}
+      filepath={filepath}
+    />
+  );
+};
+
+<Component />
+```
+
+
+## Using Contexts
+
 ```js
 import { useContext, useState } from 'react';
 import {
@@ -16,6 +92,8 @@ import {
 } from 'gitea-react-toolkit';
 
 function Component() {
+  const { state: file } = useContext(FileContext);
+
   const buttons = (
     <IconButton color="inherit">
       <Badge badgeContent={17} color="secondary">
@@ -41,6 +119,7 @@ function Component() {
       title='Application Title'
       buttons={buttons}
       drawerMenu={drawerMenu}
+      filepath={file && file.filepath}
     />
   );
 };

src/components/application-bar/DrawerMenu.js

@@ -17,10 +17,11 @@ function DrawerMenu({
   children,
   hideRepoContents,
   closeOnListItemsClick,
+  file: _file,
 }) {
   const classes = useStyles();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const { components } = useContext(FileContext) || {};
+  const { components } = _file || useContext(FileContext) || {};
 
   const toggleDrawer = () => {
     setOpenDrawer(!openDrawer);
@@ -29,10 +30,8 @@ function DrawerMenu({
   const drawerClasses = { paper: classes.drawerPaper };
 
   const onDrawerItemClick = () => {
-    if (closeOnListItemsClick) {
-      toggleDrawer()
-    }
-  }
+    closeOnListItemsClick && toggleDrawer();
+  };
 
   return (
     <div>
@@ -44,7 +43,8 @@ function DrawerMenu({
         variant="temporary" anchor="left"
         open={openDrawer}
         onClose={toggleDrawer}
-        classes={drawerClasses}>
+        classes={drawerClasses}
+      >
         <div className={classes.drawerHeader}>
           <IconButton data-test="drawer-menu-close-button" onClick={toggleDrawer}>
             <ChevronLeft />

src/components/application-bar/DrawerMenu.md

@@ -1,3 +1,43 @@
+# DrawerMenu
+
+## Using Hooks
+
+The `DrawerMenu` component helps display the `drawerMenu` component passed in props via a modal.
+
+```js
+import { Paper, List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+import { Mail, Inbox } from '@material-ui/icons';
+import { DrawerMenu, useRepository, useFile } from 'gitea-react-toolkit';
+
+const config = {
+  server: "https://bg.door43.org",
+  tokenid:"PlaygroundTesting",
+};
+
+const urls = [
+  "https://bg.door43.org/api/v1/repos/door43-catalog/en_ta",
+  "https://bg.door43.org/api/v1/repos/door43-catalog/en_tw",
+  "https://bg.door43.org/api/v1/repos/door43-catalog/en_tn",
+  "https://bg.door43.org/api/v1/repos/door43-catalog/en_obs",
+];
+
+const [repository, setRepository] = React.useState();
+const [filepath, setFilepath] = React.useState();
+
+const repo = useRepository({ config, urls, repository, onRepository: setRepository });
+const file = useFile({ config, repository, filepath, onFilepath: setFilepath });
+
+const children = repo.component;
+
+<Paper>
+  <DrawerMenu file={file}>
+    {children}
+  </DrawerMenu>
+</Paper>
+```
+
+## Using Contexts
+
 The `DrawerMenu` component helps display the `drawerMenu` component passed in props via a modal.
 
 ```js
@@ -33,3 +73,4 @@ const children = (
     </RepositoryContextProvider>
   </AuthenticationContextProvider>
 </Paper>
+```

src/components/application-bar/RepositoryMenu.js

@@ -16,16 +16,14 @@ import CancelIcon from '@material-ui/icons/Cancel';
 import { useStyles } from './useStyles';
 import { RepositoryContext, FileContext } from '..';
 
-function RepositoryMenu() {
+function RepositoryMenu({
+  repo,
+  file: _file,
+}) {
   const classes = useStyles();
   const [modal, setModal] = useState(false);
-  const {
-    state: repository,
-    actions,
-    component: repositoryComponent,
-  } = useContext(RepositoryContext) || {};
-  
-  const { state: file, stateValues: fileStateValues, actions: fileActions } = useContext(FileContext) || {};
+  const { state: repository, actions, component: repositoryComponent } = repo || useContext(RepositoryContext) || {};
+  const { state: file, stateValues: fileStateValues, actions: fileActions } = _file || useContext(FileContext) || {};
 
   const {
     name,

src/components/application-bar/UserMenu.js

@@ -10,18 +10,16 @@ import { AccountCircle } from '@material-ui/icons';
 import { useStyles } from './useStyles';
 import { AuthenticationContext } from '..';
 
-function UserMenu() {
+function UserMenu({ auth }) {
   const classes = useStyles();
-  const { state: authentication, component } = useContext(AuthenticationContext) || {};
+  const { state: authentication, component } = auth || useContext(AuthenticationContext) || {};
   const [modal, setModal] = useState(false);
   const closeModal = () => setModal(false);
   const openModal = () => setModal(true);
 
   useEffect(() => {
-    if (authentication && authentication.user) {
-      closeModal();
-    }
-  }, [authentication])
+    authentication?.user && closeModal();
+  }, [authentication]);
 
   const avatar = !(authentication && authentication.user) ? <AccountCircle fontSize="large" /> : (
     <Avatar data-test="user-menu-avatar" className={classes.avatar} src={authentication.user.avatar_url} />

src/components/file/File.context.js

@@ -25,7 +25,7 @@ export function FileContextProvider({
   releaseFlag,
 }) {
   const { state: contextAuthentication } = useContext(AuthenticationContext);
-  const { state: contextRepository, config: contextConfig } = useContext(RepositoryContext);
+  const { state: contextRepository, actions: { updateBranch },  config: contextConfig } = useContext(RepositoryContext);
 
   const {
     state, stateValues, actions, component, components, config,
@@ -42,6 +42,7 @@ export function FileContextProvider({
     onLoadCache,
     onSaveCache,
     releaseFlag,
+    updateBranch,
   });
 
   const context = {

src/components/file/helpers.js

@@ -21,6 +21,7 @@ export const ensureFile = async ({
     content: defaultContent, message: _message, author,
     onOpenValidation,
   });
+  
   return file;
 };