Merge pull request #581 from WycliffeAssociates/dev

Dev
WycliffeAssociates · Oct 30, 2019 · 54f4f20 · 54f4f20
2 parents 109c355 + 1a06f64
commit 54f4f20
Show file tree

Hide file tree

Showing 19 changed files with 307 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -6,4 +6,4 @@
 # translationExchange
 Manage and review development project.  Started by the 8WoC 2017 internship team and continued by Wycliffe Associates.
 
-Translation Exchange is a system for oral translators and narrators to securely store their audio files and to invite community checking and review. Translation Exchange is designed for the realities of the developing world: It works 100% off-line via local wifi network and can be run on low-power, low-cost computing devices such as Raspberry Pi. It maintains the same design philosophy as Translation Recorder: simple use, minimal text interface, and attention to audio quality.
+BTT Exchanger is a system for oral translators and narrators to securely store their audio files and to invite community checking and review. BTT Exchanger  is designed for the realities of the developing world: It works 100% off-line via local wifi network and can be run on low-power, low-cost computing devices such as Raspberry Pi. It maintains the same design philosophy as Translation Recorder: simple use, minimal text interface, and attention to audio quality.
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "translationexchange",
-  "author": "mxaln",
-  "version": "1.1.7",
-  "description": "Translation Exchange",
+  "name": "bttexchanger",
+  "author": "WA",
+  "version": "1.1.8",
+  "description": "BTT Exchanger",
   "private": true,
   "homepage": ".",
   "main": "src/start.js",
@@ -76,7 +76,7 @@
     "redux-logger": "~3.0.6",
     "redux-mock-store": "~1.3.0",
     "redux-thunk": "~2.2.0",
-    "semantic-ui-css": "~2.2.11",
+    "semantic-ui-css-offline": "~1.0.1-2.3.2",
     "semantic-ui-react": "~0.71.0",
     "spark-md5": "~3.0.0",
     "styled-components": "~3.2.1",

diff --git a/public/index.html b/public/index.html
@@ -22,7 +22,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Translation eXchange</title>
+    <title>BTT Exchanger</title>
   </head>
   <body>
 

diff --git a/sonar-project.properties b/sonar-project.properties
@@ -1,5 +1,5 @@
-sonar.projectKey=translationexchange
-sonar.projectName=Translation Exchange
+sonar.projectKey=bttexchanger
+sonar.projectName=BTT Exchanger
 sonar.projectVersion=1.0
 sonar.sources=src
 sonar.exclusions=src/js/*.js src/css src/config src/assets src/fonts src/languages src/views src/*.js src/*.css

diff --git a/src/App.js b/src/App.js
@@ -7,7 +7,8 @@ import {ToastContainer} from 'react-toastify';
 import NotFound from './js/pages/NotFound';
 import axios from 'axios';
 import Welcome from './js/pages/Login/LoginPage.js';
-import Download from './js/pages/Download/DownloadPage.js';
+import DownloadPage from './js/pages/Download/DownloadPage.js';
+import SettingsPage from './js/pages/Settings/SettingsPage.js';
 import AvailableUsers from './js/pages/Login/AvailableUsers.js';
 import ErrorPage from './js/pages/ErrorPage/ErrorPage';
 import CreateUserContainer from './js/pages/user/components/CreateUserContainer';
@@ -23,7 +24,11 @@ import config from './config/config';
 
 // import and configure the raven client for sentry in order to track errors
 import Raven from 'raven-js';
-Raven.config(`http://9183fe1745da4049889061d44d154a4b@${config.domain}:9000/3`).install();
+try {
+  Raven.config(`http://9183fe1745da4049889061d44d154a4b@${config.domain}:9000/3`).install();
+} catch(error) {
+  console.log("Raven is not configured!");
+}
 
 
 class App extends Component {
@@ -33,7 +38,7 @@ class App extends Component {
     //configuration for web requests
     axios.defaults.timeout = 120000;
 
-    this.state ={
+    this.state = {
       hasError: false,
     };
   }
@@ -43,8 +48,6 @@ class App extends Component {
     Raven.captureException(error, {extra: info}); //send error to raven client
   }
 
-
-
   render() {
     return (
     /*
@@ -61,7 +64,8 @@ class App extends Component {
           <Route exact path = "/users" component={AvailableUsers} />
           <Route exact path = "/users/registration" component={CreateUserContainer} />
           <Route path = "/welcome" component={Welcome} />
-          <Route path = "/download" component={Download} />
+          <Route path = "/download" component={DownloadPage} />
+          <Route path = "/settings" component={SettingsPage} />
           <Route path = "/projects" component={ProjectsPage} />
           <Route path = "/chapters" component={ChapterPage} />
           <Route path = "/progress" component={TaskProgressPage} />

diff --git a/src/__test__/unit_tests/pages/Login/LoginPage.test.js b/src/__test__/unit_tests/pages/Login/LoginPage.test.js
@@ -4,6 +4,7 @@ import {Welcome} from '../../../../js/pages/Login/LoginPage';
 import {shallow} from 'enzyme';
 
 const mockProps = {
+  history: [],
   txt: {
     loading: false,
     availableUsers: 'availableUsers',
@@ -18,12 +19,16 @@ describe('LoginPage test suite', () => {
     expect(wrapper.find('LoginPage').length).toBe(1);
     expect(wrapper.find('Language').length).toBe(1);
     expect(wrapper.find('LanguageContainer').length).toBe(1);
-
+    expect(wrapper.find('SettingsButton').length).toBe(1);
   });
 
   test('on Select function', () => {
     wrapper.instance().onSelect('language');
     expect(mockProps.updateLanguage.mock.calls.length).toEqual(1);
+  });
 
+  it('should navigate to settings', () => {
+    wrapper.instance().onSettingsClick();
+    expect(wrapper.instance().props.history.length).toEqual(1);
   });
 });
diff --git a/src/__test__/unit_tests/pages/Settings/SettingsPage.test.js b/src/__test__/unit_tests/pages/Settings/SettingsPage.test.js
@@ -0,0 +1,31 @@
+/* global it describe expect  jest*/
+import React from 'react';
+import {shallow} from 'enzyme';
+import {SettingsPage} from '../../../../js/pages/Settings/SettingsPage';
+
+const mockProps =  {
+  txt: {
+    serverName: 'Server name',
+    settings: 'settings',
+    goBack: 'go back',
+  },
+  onServerNameChange: jest.fn(),
+};
+
+describe('Settings Page test suite', () => {
+
+  const wrapper = shallow(<SettingsPage {...mockProps} />);
+
+  it('should render the component correctly', () => {
+    expect(wrapper.find('Container').length).toBe(1);
+    expect(wrapper.find('BackLink').length).toBe(1);
+    expect(wrapper.find('Header').length).toBe(1);
+    expect(wrapper.find('SettingsContainer').length).toBe(1);
+    expect(wrapper.find('ButtonsContainer').length).toBe(1);
+    expect(wrapper.find('SettingsItem').length).toBeGreaterThan(0);
+    expect(wrapper.find('SettingsTitle').length).toBeGreaterThan(0);
+    expect(wrapper.find('SettingsValue').length).toBeGreaterThan(0);
+    expect(wrapper.find('SettingsInput').length).toBeGreaterThan(0);
+  });
+
+});
diff --git a/src/config/config.js b/src/config/config.js
@@ -4,30 +4,13 @@
     Then you can access the settings as "config.apiUrl", "config.streamingUrl", etc
 */
 
-// var config = {
-//     apiUrl: "http://172.19.145.91/api/",
-//     streamingUrl: "http://172.19.145.91/"
-// };
-//
-//  var config = {
-//      apiUrl: "http://127.0.0.1:8000/api/",
-//      streamingUrl: "http://127.0.0.1/"
-// };
+const uploadServer = localStorage.getItem("uploadServer") || "opentranslationtools.org";
 
-
-
-
-// const config = {                                                        // local development
-//   apiUrl: 'http://localhost/api/',
-//   streamingUrl: 'http://localhost/',
-//   redirectUri: 'http://localhost:3000',
-// };
-
-const config = {                                                        //production
-  apiUrl: 'http://opentranslationtools.org/api/',
-  streamingUrl: 'http://opentranslationtools.org/',
-  redirectUri: 'http://opentranslationtools.org/',
-  domain: 'opentranslationtools.org'
+const config = {
+  apiUrl: 'http://' + uploadServer + '/api/',
+  streamingUrl: 'http://' + uploadServer + '/',
+  redirectUri: 'http://' + uploadServer + '/',
+  domain: '' + uploadServer + ''
 };
 
 export default config;
diff --git a/src/index.js b/src/index.js
@@ -8,7 +8,7 @@ import ReactDOM from 'react-dom';
 import { HashRouter } from 'react-router-dom';
 
 import App from './App';
-import 'semantic-ui-css/semantic.min.css';
+import 'semantic-ui-css-offline/semantic.min.css';
 import './index.css';
 import { Provider } from 'react-redux';
 import store from './js/store';

diff --git a/src/js/actions/ProjectsPageActions.js b/src/js/actions/ProjectsPageActions.js
@@ -15,9 +15,10 @@ export const fetchAllProjects = (query, redirect) => {
         dispatch(dispatchAllProjectsFailed(err));
         localStorage.removeItem('token');
 
-        if(err.response.status == 401) {
+        if(err.response != undefined && err.response.status == 401) {
           redirect.push('/welcome');
         } else {
+          console.log("ERROR: ", config.apiUrl, query);
           redirect.push('/errorPage');
         }
       });

diff --git a/src/js/actions/UserActions.js b/src/js/actions/UserActions.js
@@ -10,7 +10,7 @@ return (dispatch) => {
         dispatch(fetchUserSuccess(response.data));
       })
       .catch(error => {
-        console.log(error); //TODO handle error
+        console.log("ERROR: ", config.apiUrl); //TODO handle error
         redirect.push('./ErrorPage');
       });
   };

diff --git a/src/js/components/NavBar.js b/src/js/components/NavBar.js
@@ -53,6 +53,9 @@ class NavBar extends Component {
     if (key === '2') {
       this.props.history.push('./download');
     }
+    if (key === '3') {
+      this.props.history.push('./settings');
+    }
   }
 
   onSelect({key, item}) {
@@ -91,6 +94,7 @@ class NavBar extends Component {
         <MenuItem  style={{cursor: 'pointer', color: '#fff', backgroundColor: '#000' }} key={0}>{txt.logOut}</MenuItem>
         <MenuItem  style={{cursor: 'pointer', color: '#fff', backgroundColor: '#000' }} key={1}>{txt.progressPage}</MenuItem>
         <MenuItem  style={{cursor: 'pointer', color: '#fff', backgroundColor: '#000' }} key={2}>{txt.downloadClients}</MenuItem>
+        <MenuItem  style={{cursor: 'pointer', color: '#fff', backgroundColor: '#000' }} key={3}>{txt.settings}</MenuItem>
       </Menu>
     );
 
@@ -139,7 +143,7 @@ class NavBar extends Component {
     return (
       <Container>
         <TextContainer>
-          <Title>Translation Exchange </Title>
+          <Title>BTT Exchanger</Title>
         </TextContainer>
 
         <IconsContainer>

diff --git a/src/js/pages/Login/AvailableUsers.js b/src/js/pages/Login/AvailableUsers.js
@@ -13,6 +13,7 @@ export class AvailableUsers extends React.Component {
   constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
+    this.sortedUsers = this.sortedUsers.bind(this);
   }
 
   handleClick(clickSrc) {
@@ -30,12 +31,28 @@ export class AvailableUsers extends React.Component {
     if (language) {
       updateLanguage(language);
     }
+  }
 
+  sortedUsers() {
+    const {users} = this.props;
+
+    users.forEach((element) => {
+      element["timestamp"] = localStorage.getItem("login:" + element.icon_hash);
+    });
+
+    users.sort((a, b) => {
+      if(a.timestamp == null) return 1;
+      if(b.timestamp == null) return -1;
+
+      return b.timestamp - a.timestamp;
+    });
+
+    return users;
   }
 
   render() {
 
-    const {users, txt} = this.props;
+    const {txt} = this.props;
 
     return (
       <Container className="pageBackground">
@@ -60,13 +77,13 @@ export class AvailableUsers extends React.Component {
               </Grid.Column >
 
               {
-                users.length>0? users.map((user,index)  => {
+                this.sortedUsers().length > 0? this.sortedUsers().map((user,index)  => {
                   return (
                     user.is_social? '' :
                       <Grid.Column width={3} key={user.id}>
-                        <UserCard   id={index} user={user} {...this.props} />
+                        <UserCard id={index} user={user} {...this.props} />
                       </Grid.Column>
-                  );}) :   ''
+                  );}) : ''
 
               }
             </Grid>

diff --git a/src/js/pages/Login/LoginPage.js b/src/js/pages/Login/LoginPage.js
@@ -26,23 +26,35 @@ export class Welcome extends React.Component {
   }
 
   onSelect({key}) {
-    const language =key;
+    const language = key;
     this.props.updateLanguage(language);
     localStorage.setItem('language', language);
+  }
 
+  onSettingsClick() {
+    this.props.history.push ({
+      pathname: '/settings',
+    });
   }
 
 
   render() {
     const menu = (
       <Menu onSelect={ ky=> this.onSelect(ky)}>
-        {Object.keys(Languages).map(lng => <MenuItem style={{cursor: 'pointer', color: '#fff', backgroundColor: '#000' }} key={lng}> {lng} </MenuItem> )}
+        {Object.keys(Languages).map(lng => 
+          <MenuItem style={{cursor: 'pointer', color: '#fff', backgroundColor: '#000' }} key={lng}>
+             {lng} 
+          </MenuItem> 
+        )}
       </Menu>
     );
 
     return (
       <LoginPage className="pageBackground">
         <LanguageContainer>
+          <SettingsButton onClick={this.onSettingsClick.bind(this)}>
+            {this.props.txt.settings} <i className="material-icons">settings</i>
+          </SettingsButton>
           <Dropdown
             trigger={['click']}
             overlay={menu}
@@ -81,6 +93,16 @@ const LanguageContainer = styled.div`
 `;
 LanguageContainer.displayName = 'LanguageContainer';
 
+const SettingsButton = styled.a`
+  margin-right: 1vh;
+  color: white;
+  cursor: pointer;
+
+  :hover {
+    color: white;
+  }
+`;
+SettingsButton.displayName = 'SettingsButton';
 
 const mapDispatchToProps = dispatch => {
   return bindActionCreators(

diff --git a/src/js/pages/Login/components/UserCard.js b/src/js/pages/Login/components/UserCard.js
@@ -23,7 +23,10 @@ export default class UserCard extends React.Component {
   }
 
   identLogin(hash) {
-    this.props.identiconLogin(hash, ()=>this.props.history.push('/projects'));
+    this.props.identiconLogin(hash, ()=>{
+      localStorage.setItem("login:" + hash, Date.now());
+      this.props.history.push('/projects');
+    });
   }
 
   play() {

diff --git a/src/js/pages/Login/components/WelcomeComponent.js b/src/js/pages/Login/components/WelcomeComponent.js
@@ -55,7 +55,7 @@ export default class WelcomeComponent extends React.Component {
 
       <WelcomePage>
 
-        <h2 className="welcomeh2"> translation Exchange  </h2>
+        <h2 className="welcomeh2"> BTT Exchanger </h2>
         <Icon src={welcomeImg} />
 
         <ButtonsContainer>