cleanup githubStore && add 'Repo not found' && R refactor

Author: mydearxym

containers/UniversePanel/Modal.js

@@ -35,6 +35,18 @@ export const EditorBar = styled(BaseBar)`
   position: relative;
   left: -50%;
 `
+export const AlertBar = styled(BaseBar)`
+  position: relative;
+  padding: 18px;
+  left: -50%;
+  color: #365760;
+  &:before {
+    content: '⚠ ';
+    margin-right: 10px;
+    color: tomato;
+  }
+`
+
 export const InfoBar = styled(BaseBar)`
   padding: 10px;
   min-height: 100px;

containers/UniversePanel/index.js

@@ -20,6 +20,7 @@ import {
   EditorBar,
   Wraper,
   InputBar,
+  AlertBar,
   AddOn,
   AvatarImg,
   AvatarWrapper,
@@ -33,19 +34,20 @@ import {
 
 const debug = makeDebugger('C:UniversePanel')
 
-function inputChange(e) {
-  logic.search(e.target.value)
-}
+// R.isEmpty(repos.toJSON()) && !isSearching && !R.isEmpty(inputValue)
+
+// const repoNotFound = R.and()
 
-const SearchEditor = () => (
+const SearchEditor = ({ value }) => (
   <EditorBar>
     <AddOn>&#9906;</AddOn>
     <InputBar
       spellCheck={false}
       autoCapitalize={false}
       autoCorrect="off"
       autoComplete="off"
-      onChange={inputChange}
+      value={value}
+      onChange={logic.search}
     />
   </EditorBar>
 )
@@ -62,14 +64,21 @@ class UniversePanelContainer extends React.Component {
   }
 
   render() {
-    const repos = this.props.store.githubRepos
-    debug('repos: ', repos.toJSON())
+    const store = this.props.store
+    const { reposData, inputValue } = store
+
+    // debug('repos: ', repos)
+    // debug('searching: ', searching)
+    // debug('logic.repoNotFound2(store): ', logic.repoNotFound2(store))
 
     return (
       <PanelContainer>
-        <SearchEditor />
+        <SearchEditor value={inputValue} />
+
+        {logic.repoNotFound(store) && <AlertBar>Repo not found</AlertBar>}
+
         <Wraper>
-          {repos.map(repo => (
+          {reposData.map(repo => (
             <InfoBar key={repo.id}>
               <AvatarWrapper onClick={logic.watshData}>
                 <AvatarImg src={repo.owner.avatar_url} alt="repo avatar" />

containers/UniversePanel/logic.js

@@ -12,28 +12,51 @@ const repoData = R.map(
   R.pick(['id', 'name', 'description', 'language', 'owner', 'stargazers_count'])
 )
 
-export function watshData() {
-  debug('watshData')
+// const RLog = x => debug('R log: ', x)
+
+const reposIsEmpty = R.compose(R.isEmpty, R.prop('reposData'))
+const inputValueIsNotEmpty = R.compose(R.not, R.isEmpty, R.prop('inputValue'))
+const isNotSearching = R.compose(R.not, R.prop('searching'))
+
+export const repoNotFound = R.allPass([
+  reposIsEmpty,
+  inputValueIsNotEmpty,
+  isNotSearching,
+])
+
+/*
+export function repoNotFound() {
+  return (
+    R.isEmpty(store.reposData) &&
+    !store.searching &&
+    !R.isEmpty(store.inputValue)
+  )
 }
+*/
 
-export function search(val) {
+export function search(e) {
   // console.log('search: ', val)
-  Pigeon.search(val)
+  const value = e.target.value
+  store.markState('inputValue', value)
+  store.markState('searching', true)
+  Pigeon.search(value)
 }
 
 export function init(selectedStore) {
-  debug('store', store)
   store = selectedStore
+  debug('store', store)
   Pigeon = new SearchService()
 
   Pigeon.get().subscribe(res => {
     debug('Pigeon get: ', res)
     // debug('washed: ', repoData(res.items))
+    store.markState('searching', false)
     store.replaceRepos(repoData(res.items))
   })
 
   Pigeon.emptyInput().subscribe(() => {
     debug('Pigeon get emptyInput!')
+    store.markState('searching', false)
     store.clearRepos()
   })
 }

stores/GithubEampleStore/index.js

@@ -26,13 +26,15 @@ const Repo = t.model('Repo', {
 const GithubEampleStore = t
   .model('GithubEampleStore', {
     repos: t.optional(t.array(Repo), []),
+    inputValue: t.optional(t.string, ''),
+    searching: t.optional(t.boolean, false),
   })
   .views(self => ({
     get app() {
       return getParent(self)
     },
-    get githubRepos() {
-      return self.repos
+    get reposData() {
+      return self.repos.toJSON()
     },
   }))
   .actions(self => ({
@@ -43,6 +45,9 @@ const GithubEampleStore = t
     clearRepos() {
       self.repos = []
     },
+    markState(key, val) {
+      self[key] = val
+    },
   }))
 
 export default GithubEampleStore