Skip to content
This repository has been archived by the owner. It is now read-only.

/ browser-ios Archived

Lumen search #394

Merged
merged 4 commits into from Jul 19, 2019
+529 −74
Merged

Lumen search #394

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8fbfa7f
Implement Search with onboarding on lumen
Jul 17, 2019
8243c63
adding missing file
Jul 18, 2019
24fd973
search engine icons and working cliqz integration
chrmod Jul 18, 2019
8d000a1
translations
Jul 19, 2019
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Next

Implement Search with onboarding on lumen

  • Loading branch information
Khaled Tantawy @chrmod
Khaled Tantawy authored and chrmod committed Jul 19, 2019
commit 8fbfa7f0bc1577bc7aa61794677d9dd6dea71170
8 Client.xcodeproj/project.pbxproj
View file
Open in desktop
@@ -212,6 +212,8 @@
28F596A11ACA13CA0071DDCC /* InfoTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 28F596A01ACA13CA0071DDCC /* InfoTests.swift */; };
28F657EA1ABFCA7A00A608BD /* LiveAccountTest.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2FA4363B1ABB8448008031D1 /* LiveAccountTest.swift */; };
28FDFF0C1C1F725800840F86 /* SeparatorTableCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 28FDFF0B1C1F725800840F86 /* SeparatorTableCell.swift */; };
2979623922DF695E00604955 /* Onboarding.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2979623822DF695E00604955 /* Onboarding.swift */; };
2979624322DF697900604955 /* OnboardingBridge.m in Sources */ = {isa = PBXBuildFile; fileRef = 2979624222DF697900604955 /* OnboardingBridge.m */; };
2C28F96C201B2D4C00ABA8A5 /* MailAppSettingsTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2C28F96B201B2D4C00ABA8A5 /* MailAppSettingsTests.swift */; };
2C2A5EF41E68469500F02659 /* PrivateBrowsingTest.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2C2A5EF31E68469500F02659 /* PrivateBrowsingTest.swift */; };
2C2A91291FA2410D002E36BD /* HistoryTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2C2A91281FA2410D002E36BD /* HistoryTests.swift */; };
@@ -1668,6 +1670,8 @@
28ED02281B262E0A003948B2 /* IndependentRecordSynchronizer.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; name = IndependentRecordSynchronizer.swift; path = Synchronizers/IndependentRecordSynchronizer.swift; sourceTree = "<group>"; };
28F596A01ACA13CA0071DDCC /* InfoTests.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; name = InfoTests.swift; path = SyncTests/InfoTests.swift; sourceTree = "<group>"; };
28FDFF0B1C1F725800840F86 /* SeparatorTableCell.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SeparatorTableCell.swift; sourceTree = "<group>"; };
2979623822DF695E00604955 /* Onboarding.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Onboarding.swift; sourceTree = "<group>"; };
2979624222DF697900604955 /* OnboardingBridge.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = OnboardingBridge.m; sourceTree = "<group>"; };
2C28F96B201B2D4C00ABA8A5 /* MailAppSettingsTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MailAppSettingsTests.swift; sourceTree = "<group>"; };
2C2A5EF31E68469500F02659 /* PrivateBrowsingTest.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = PrivateBrowsingTest.swift; sourceTree = "<group>"; };
2C2A91281FA2410D002E36BD /* HistoryTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HistoryTests.swift; sourceTree = "<group>"; };
@@ -3518,6 +3522,8 @@
children = (
4F30F4F42051670C0049E4F6 /* AutoCompletion.swift */,
4F30F4F52051670C0049E4F6 /* AutoCompletionBridge.m */,
2979623822DF695E00604955 /* Onboarding.swift */,
2979624222DF697900604955 /* OnboardingBridge.m */,
4F30F4F62051670C0049E4F6 /* BrowserActions.swift */,
4F30F4F72051670C0049E4F6 /* BrowserActionsBridge.m */,
4F30F4F82051670C0049E4F6 /* Crypto.swift */,
E68AEDB01B18F81A00133D99 /* SwipeAnimator.swift in Sources */,
AFA1DE0C2088BE0500B27B8A /* BlockListFileManager.swift in Sources */,
1E23E61D22258D0B0004FAAF /* LegacyTelemetryHelper.swift in Sources */,
2979624322DF697900604955 /* OnboardingBridge.m in Sources */,
4F30F50A2051670C0049E4F6 /* BrowserActions.swift in Sources */,
1E2C435C21F89E8100891FB2 /* LumenDarkTheme.swift in Sources */,
3BF56D271CDBBE1F00AC4D75 /* SimpleToast.swift in Sources */,
4FE43F5B221EE96D00045527 /* WelcomeView.swift in Sources */,
1E3CBC152057D83700898B05 /* CliqzAppSettingsTableViewController.swift in Sources */,
D04CD718215EBD85004FF5B0 /* SettingsLoadingView.swift in Sources */,
2979623922DF695E00604955 /* Onboarding.swift in Sources */,
D04CD74C216CF86B004FF5B0 /* InstructionsViewController.swift in Sources */,
E49943F51AE6879C00BF9DE4 /* IntroViewController.swift in Sources */,
);
2 Cliqz/React Components/Engine.swift
View file
Open in desktop
@@ -31,7 +31,7 @@ open class Engine {
let jsCodeLocation = Bundle.main.url(forResource: "jsengine.bundle", withExtension: "js")
#endif

rootView = RCTRootView( bundleURL: jsCodeLocation, moduleName: "ExtensionApp", initialProperties: nil, launchOptions: nil )
rootView = RCTRootView( bundleURL: jsCodeLocation, moduleName: "ExtensionApp", initialProperties: ["showSearchOnboarding": true], launchOptions: nil )
bridge = rootView.bridge
//ConnectManager.sharedInstance.refresh()
}
5 Cliqz/React Components/Modules/JSBridge.swift
View file
Open in desktop
@@ -59,7 +59,8 @@ class JSBridge : RCTEventEmitter {
}

override open func supportedEvents() -> [String]! {
return ["callAction", "publishEvent"]
// TODO chrmod: clean native bridge
return ["action", "callAction", "publishEvent"]
}

override open func constantsToExport() -> [AnyHashable : Any]! {
@@ -118,7 +119,7 @@ class JSBridge : RCTEventEmitter {
self.eventCallbacks[actionId] = callback
}
// only send event - callback is handled in action reply
self.sendEvent(withName: "callAction", body: ["id": actionId, "action": functionName, "args": args])
self.sendEvent(withName: "action", body: ["id": actionId, "action": functionName, "args": args])

}

27 Cliqz/React Components/Modules/Onboarding.swift
View file
Open in desktop
@@ -0,0 +1,27 @@
//
// Onboarding.swift
// Client
//
// Created by Khaled Tantawy on 17.07.19.
// Copyright © 2019 Cliqz. All rights reserved.
//
import React

@objc(Onboarding)
class Onboarding: RCTEventEmitter {

override static func requiresMainQueueSetup() -> Bool {
return false
}

@objc(tryLumenSearch:)
func tryLumenSearch(accepted: Bool) {
debugPrint("tryLumenSearch -- \(accepted)")
if accepted {
// TODO: PK this is try now case. Change Lumen to default search engine. UI will be handled by extenstion
} else {
// TODO: PK close cliqz search and open queary with default search engine
}
}
}
15 Cliqz/React Components/Modules/OnboardingBridge.m
View file
Open in desktop
@@ -0,0 +1,15 @@
//
// OnboardingBridge.m
// Client
//
// Created by Khaled Tantawy on 17.07.19.
// Copyright © 2019 Cliqz. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface RCT_EXTERN_MODULE(Onboarding, NSObject)
RCT_EXTERN_METHOD(tryLumenSearch:(BOOL) accepted)
@end


150 lumen.js
View file
Open in desktop
@@ -2,7 +2,7 @@ import 'react-native/Libraries/Core/InitializeCore';
import './setup';
import 'process-nextick-args';
import React from 'react';
import { AppRegistry, StyleSheet, View, AsyncStorage } from 'react-native';
import { AppRegistry, StyleSheet, View, Text, ScrollView, NativeModules, Image, NativeEventEmitter } from 'react-native';
import { startup } from 'browser-core-lumen-ios';
import Cliqz from './cliqzWrapper';
import { setDefaultSearchEngine } from 'browser-core-lumen-ios/build/modules/core/search-engines';
@@ -13,10 +13,15 @@ import SearchUI from 'browser-core-lumen-ios/build/modules/mobile-cards/SearchUI
import SearchUIVertical from 'browser-core-lumen-ios/build/modules/mobile-cards-vertical/SearchUI';
import { Provider as CliqzProvider } from 'browser-core-lumen-ios/build/modules/mobile-cards/cliqz';
import { Provider as ThemeProvider } from 'browser-core-lumen-ios/build/modules/mobile-cards-vertical/withTheme';
import Onboarding from './lumen-onboarding';

const nativeBridge = NativeModules.JSBridge;

// set app global for debugging
// TODO chrmod: get rid of startup
const appStart = startup.then((app) => {
global.app = app;
return app;
});

const styles = StyleSheet.create({
@@ -25,89 +30,158 @@ const styles = StyleSheet.create({
flexDirection: 'column',
backgroundColor: 'transparent'
},
footer: {
height: 20,
backgroundColor: '#656d7e',
alignItems: 'center',
justifyContent: 'center',
borderBottomLeftRadius: 5,
borderBottomRightRadius: 5
},
searchEnginesContainer: {
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 20,
marginBottom: 100,
},
searchEngineIcon: {
height: 20,
width: 20,
borderRadius: 10,
overflow: 'hidden',
},
});

// wrapper for a component to add top padding on iOS
function AppContainer(App, appStart) {
return () => (
<View style={styles.container}>
<App appStart={appStart} />
</View>
);
}

class MobileCards extends React.Component {
constructor(props) {
super(props);
this.state = {
onboarding: props.showSearchOnboarding,
results: {
results: [],
meta: {}
},
theme: 'lumen-light'
}

this.cliqz = new Cliqz();
this.isDeveloper = prefs.get('developer', false);
this.appStart = props.appStart || Promise.resolve();
this.appStart = appStart || Promise.resolve();

events.sub('search:results', this.updateResults);
events.sub('mobile-browser:notify-preferences', this.updatePreferences);
events.sub('mobile-browser:set-search-engine', this.setSearchEngine);
addConnectionChangeListener();
}

state = {
results: {
results: [],
meta: {}
},
theme: 'light'
this.eventEmitter = new NativeEventEmitter(nativeBridge);
this.eventEmitter.addListener('action', this.onAction);
}

componentWillUnmount() {
events.un_sub('mobile-browser:notify-preferences', this.updatePreferences);
events.un_sub('mobile-browser:set-search-engine', this.setSearchEngine);
events.un_sub('search:results', this.updateResults);
removeConnectionChangeListener();
this.eventEmitter.removeAllListeners();
}

setSearchEngine = (engine) => {
setDefaultSearchEngine(engine);
onAction = ({ action, args, id }) => {
const [module, name] = action.split(':');
// TODO chrmod: it breaks in `inject.es` when you type clear and type again
// TODO chrmod: block messages
return this.appStart.then((app) => {
return app.modules[module].action(name, ...args).then((response) => {
if (typeof id !== 'undefined') {
nativeBridge.replyToAction(id, response);
}
return response;
});
}).catch(e => console.error(e));
}

_setTheme(incognito) {
const theme = incognito ? 'dark' : 'light';
this.setState({ theme });
setSearchEngine = (engine) => {
setDefaultSearchEngine(engine);
}

updatePreferences = (_prefs) => {
// clear cache with every visit to tab overiew and settings
this.appStart.then(() => {
Object.keys(_prefs).forEach((key) => {
prefs.set(key, _prefs[key]);
if ((key === 'incognito')) {
this._setTheme(_prefs[key]);
}
});
});
}

updateResults = results => this.setState({ results });
updateResults = results => this.setState({ results, onboarding: false });

onTryNowPressed = () => {
// TODO chrmod: let messages pass
}

render() {
const { results, suggestions, meta } = this.state.results;
const { results, suggestions, meta, query } = this.state.results;
const appearance = this.state.theme;
const layout = 'vertical';
const SearchComponent = layout === "horizontal" ? SearchUI : SearchUIVertical;
return (
if (this.state.onboarding) {
return (
<Onboarding onTryNowPressed={this.onTryNowPressed} />
);
} else {
NativeModules.QuerySuggestion.showQuerySuggestions(query, suggestions);
return (
<View style={styles.container}>
<CliqzProvider value={this.cliqz}>
<ThemeProvider value={appearance}>
<SearchComponent
results={results}
suggestions={suggestions}
meta={meta}
theme={appearance}
/>
<ScrollView bounces={false} >
<SearchComponent
results={results}
meta={meta}
theme={appearance}
style={{ backgroundColor: 'transparent', }}
cardListStyle={{ paddingLeft: 0, paddingRight: 0 }}
header={<View />}
separator={<View style={{ height: 0.5, backgroundColor: '#D9D9D9' }} />}
footer={<View />}
/>
<>
{ /* TODO chrmod: colors and font sizes and translations */ }
{ results.length === 0 &&
<View style={{ backgroundColor: 'white', height: 80, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: '#656d7e' }}>KEINE TREFFER GEFUNDEN</Text>
</View>
}
<View style={styles.footer}>
<Text style={{ color: 'white', }}>
DIESE SUCHANFRAGE IST ANONYM
</Text>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', marginTop: 20 }}>
<Text style={{ color: 'white' }}>Lumen Suche trotzdem verlassen?</Text>
</View>
<View style={styles.searchEnginesContainer}>
{ /* TODO chrmod: list + send openlink event onclick + real pngs */ }
<Image
style={styles.searchEngineIcon}
source={{ uri: 'https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-512.png' }}
/>
<Image
style={styles.searchEngineIcon}
source={{ uri: 'https://duckduckgo.com/assets/icons/meta/DDG-icon_256x256.png' }}
/>
<Image
style={styles.searchEngineIcon}
source={{ uri: 'https://www.sclance.com/pngs/bing-png/bing_png_121500.png' }}
/>
</View>
</>
</ScrollView>
</ThemeProvider>
</CliqzProvider>
</View>
);
);
}
}
}


AppRegistry.registerComponent('ExtensionApp', () => AppContainer(MobileCards, appStart));
AppRegistry.registerComponent('ExtensionApp', () => MobileCards);
ProTip! Use n and p to navigate between commits in a pull request.