Feature/core/add firebase

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "rapid-ce500"
+  }
+}

.gitignore

@@ -11,11 +11,12 @@ build/
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*

firebase.json

@@ -0,0 +1,30 @@
+{
+  "firestore": {
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
+  },
+  "hosting": {
+    "public": "build",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  },
+  "storage": {
+    "rules": "storage.rules"
+  },
+  "emulators": {
+    "firestore": {
+      "port": 69420
+    },
+    "hosting": {
+      "port": 42069
+    },
+    "ui": {
+      "enabled": true
+    }
+  }
+}

firestore.indexes.json

@@ -0,0 +1,4 @@
+{
+  "indexes": [],
+  "fieldOverrides": []
+}

firestore.rules

@@ -0,0 +1,18 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+
+    // This rule allows anyone with your database reference to view, edit,
+    // and delete all data in your Firestore database. It is useful for getting
+    // started, but it is configured to expire after 30 days because it
+    // leaves your app open to attackers. At that time, all client
+    // requests to your Firestore database will be denied.
+    //
+    // Make sure to write security rules for your app before that time, or else
+    // all client requests to your Firestore database will be denied until you Update
+    // your rules
+    match /{document=**} {
+      allow read, write: if request.time < timestamp.date(2020, 8, 29);
+    }
+  }
+}

package.json

@@ -11,6 +11,7 @@
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@types/react-router-dom": "^5.1.5",
     "emotion-theming": "^10.0.27",
+    "firebase": "^7.17.1",
     "mobx": "^5.15.4",
     "mobx-react-lite": "^2.0.7",
     "node-sass": "^4.14.1",
@@ -20,7 +21,8 @@
     "react-icons": "^3.10.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "react-wavify": "^1.3.0"
+    "react-wavify": "^1.3.0",
+    "typescript": "~3.7.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/organisms/DisplayNavAndPage.tsx

@@ -6,7 +6,7 @@ import NavSidebar from './NavSidebar'
 interface IDisplayNavAndPage {
   children: JSX.Element[] | JSX.Element
 }
-export default function DisplayNavAndPage({
+export default function NavLayout({
   children,
 }: IDisplayNavAndPage): JSX.Element {
   return (

src/components/theme/index.tsx

@@ -1,11 +1,8 @@
-import {
-  ColorModeProvider,
-  CSSReset,
-  theme,
-  ThemeProvider,
-} from '@chakra-ui/core'
+import { ColorModeProvider, CSSReset, ThemeProvider } from '@chakra-ui/core'
 import React from 'react'
 
+import theme from './theme'
+
 const ThemedComponent: React.FunctionComponent = ({ children }) => (
   <ThemeProvider theme={theme}>
     <ColorModeProvider>

src/components/theme/theme.ts

@@ -0,0 +1,7 @@
+import { theme as DefaultTheme } from '@chakra-ui/core'
+
+const theme = {
+  ...DefaultTheme,
+}
+
+export default theme

src/data/Auth/index.tsx

@@ -0,0 +1,61 @@
+import { auth } from 'firebase'
+import { computed, observable } from 'mobx'
+import React from 'react'
+
+const defaultSucc = (user: any) => {
+  console.log(`Successfully signed in! \n\n ${JSON.stringify(user, null, 2)}`)
+}
+
+const defaultErr = (err: any) => {
+  console.error(
+    `Could not sign in through google. \n\n ${JSON.stringify(err, null, 2)}`
+  )
+}
+
+class IAuthStore {
+  @observable user: any = null
+  @observable authPending = true
+
+  listenToAuth: any
+
+  constructor() {
+    this.listenToAuth = auth().onAuthStateChanged(
+      (user) => {
+        this.user = user
+
+        this.authPending = false
+      },
+      (err) => {
+        console.error(err)
+      }
+    )
+  }
+
+  public async doSignInWithGoogle() {
+    const provider = new auth.GoogleAuthProvider()
+    await auth().signInWithPopup(provider).then(defaultSucc, defaultErr)
+  }
+
+  public async doSignInWithEmail(e: string, p: string) {
+    await auth().signInWithEmailAndPassword(e, p).then(defaultSucc, defaultErr)
+  }
+
+  @computed
+  public get isAuthed() {
+    return !!this.user
+  }
+}
+
+export const AuthStore = new IAuthStore()
+
+export const AuthContext = React.createContext(AuthStore)
+
+export const AuthProvider: React.FunctionComponent<React.ReactNode> = ({
+  children,
+}) => {
+  return (
+    <AuthContext.Provider value={AuthStore}>{children}</AuthContext.Provider>
+  )
+}
+
+export default AuthStore

src/data/Channels/index.tsx

@@ -0,0 +1,61 @@
+import { auth } from 'firebase'
+import { computed, observable } from 'mobx'
+import React from 'react'
+
+const defaultSucc = (user: any) => {
+  console.log(`Successfully signed in! \n\n ${JSON.stringify(user, null, 2)}`)
+}
+
+const defaultErr = (err: any) => {
+  console.error(
+    `Could not sign in through google. \n\n ${JSON.stringify(err, null, 2)}`
+  )
+}
+
+class IAuthStore {
+  @observable user: any = null
+  @observable authPending = true
+
+  listenToAuth: any
+
+  constructor() {
+    this.listenToAuth = auth().onAuthStateChanged(
+      (user) => {
+        this.user = user
+
+        this.authPending = false
+      },
+      (err) => {
+        console.error(err)
+      }
+    )
+  }
+
+  public async doSignInWithGoogle() {
+    const provider = new auth.GoogleAuthProvider()
+    await auth().signInWithPopup(provider).then(defaultSucc, defaultErr)
+  }
+
+  public async doSignInWithEmail(e: string, p: string) {
+    await auth().signInWithEmailAndPassword(e, p).then(defaultSucc, defaultErr)
+  }
+
+  @computed
+  public get isAuthed() {
+    return !!this.user
+  }
+}
+
+export const AuthStore = new IAuthStore()
+
+export const AuthContext = React.createContext(AuthStore)
+
+export const AuthProvider: React.FunctionComponent<React.ReactNode> = ({
+  children,
+}) => {
+  return (
+    <AuthContext.Provider value={AuthStore}>{children}</AuthContext.Provider>
+  )
+}
+
+export default AuthStore

src/data/index.ts

@@ -0,0 +1 @@
+export { default as AuthStore } from './Auth'

src/firebase/index.ts

@@ -0,0 +1,14 @@
+import { initializeApp } from 'firebase'
+
+const firebaseConfig = {
+  apiKey: process.env.REACT_APP_FapiKey,
+  authDomain: process.env.REACT_APP_FauthDomain,
+  databaseURL: process.env.REACT_APP_FdatabaseURL,
+  projectId: process.env.REACT_APP_FprojectId,
+  storageBucket: process.env.REACT_APP_FstorageBucket,
+  messagingSenderId: process.env.REACT_APP_FmessagingSenderId,
+  appId: process.env.REACT_APP_FappId,
+  measurementId: process.env.REACT_APP_FmeasurementId,
+}
+
+initializeApp(firebaseConfig)

src/pages/Chat.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import DisplayNavAndPage from '../components/organisms/DisplayNavAndPage'
+import NavLayout from '../components/organisms/DisplayNavAndPage'
 
 export default function Chat(): JSX.Element {
   return (
-    <DisplayNavAndPage>
+    <NavLayout>
       <h1>Messages</h1>
-    </DisplayNavAndPage>
+    </NavLayout>
   )
 }

src/pages/Community.tsx

@@ -4,12 +4,12 @@ import React from 'react'
 import GroupHeading from '../components/atoms/GroupHeading'
 import CommunityCardSmall from '../components/molecules/CommunityCardSmall'
 import Search from '../components/molecules/Search'
-import DisplayNavAndPage from '../components/organisms/DisplayNavAndPage'
+import NavLayout from '../components/organisms/DisplayNavAndPage'
 
 interface ICommunityPage {}
 export default function Community() {
   return (
-    <DisplayNavAndPage>
+    <NavLayout>
       <Flex alignItems="flex-end" marginLeft="auto" width="100%">
         <Search />
       </Flex>
@@ -39,6 +39,6 @@ export default function Community() {
           )
         })}
       </Stack>
-    </DisplayNavAndPage>
+    </NavLayout>
   )
 }

src/pages/Explore.tsx

@@ -3,15 +3,15 @@ import React from 'react'
 
 import GroupHeading from '../components/atoms/GroupHeading'
 import DropsList from '../components/molecules/DropsList'
-import DisplayNavAndPage from '../components/organisms/DisplayNavAndPage'
+import NavLayout from '../components/organisms/DisplayNavAndPage'
 import FindInterface from '../components/organisms/FindInterface'
 import Recommended from '../components/organisms/Recommended'
 import Trending from '../components/organisms/Trending'
 
 interface IExplorePage {}
 export default function ExplorePage() {
   return (
-    <DisplayNavAndPage>
+    <NavLayout>
       <FindInterface />
       <GroupHeading>
         <Text>Drops</Text>
@@ -31,6 +31,6 @@ export default function ExplorePage() {
           <Recommended />
         </Stack>
       </Stack>
-    </DisplayNavAndPage>
+    </NavLayout>
   )
 }

src/pages/Users.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 
-import DisplayNavAndPage from '../components/organisms/DisplayNavAndPage'
+import NavLayout from '../components/organisms/DisplayNavAndPage'
 import FriendList from '../components/organisms/FriendList'
 
 export default function UsersPage() {
   return (
-    <DisplayNavAndPage>
+    <NavLayout>
       <FriendList />
-    </DisplayNavAndPage>
+    </NavLayout>
   )
 }

storage.rules

@@ -0,0 +1,7 @@
+service firebase.storage {
+  match /b/{bucket}/o {
+    match /{allPaths=**} {
+      allow read, write: if request.auth!=null;
+    }
+  }
+}

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "include": ["src"],
   "compilerOptions": {
+    "experimentalDecorators": true,
     /* Basic Options */
     // "incremental": true,                   /* Enable incremental compilation */
     "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,