feature: supabase

haikelfazzani · Aug 6, 2022 · 3622e05 · 3622e05
1 parent 63324ce
commit 3622e05
Show file tree

Hide file tree

Showing 40 changed files with 2,801 additions and 2,463 deletions.
diff --git a/.env b/.env
diff --git a/.env.production b/.env.production
@@ -0,0 +1,2 @@
+CI=false
+GENERATE_SOURCEMAP=false
diff --git a/.netlify/edge-functions-import-map.json b/.netlify/edge-functions-import-map.json
@@ -0,0 +1 @@
+{"imports":{"netlify:edge":"https://edge.netlify.com/v1/index.ts"}}
diff --git a/README.md b/README.md
@@ -1,11 +1,22 @@
 # Kody
 is an online web editor for modern front end development that makes creating and sharing web apps faster. Including most popular frameworks like VueNext, ReactJs and more.
 
-- [x] typescript, coffeescript, babel
-- [x] Sass and Less
+## Features
+
+- [x] Transpilers: typescript, coffeescript, babel, livescript
+- [x] Css: Sass and Less
 - [x] Templates : React, Preact, VueNext, NanoJsx, RxJS, Jquery
-- [x] Oauth 2.0 Dropbox
+- [x] Oauth Github
 - [x] PWA
+- [ ] CRUD
+
+## Built with
+- Superbase
+- React
+- React Router
+- Ace Editor
+- Recoil
+- Netlify
 
 ### Captures
 ![](https://i.ibb.co/QkrTBbD/editor.png)

diff --git a/functions/index.js b/functions/index.js
@@ -0,0 +1,8 @@
+// import axios from 'axios';
+// import { Handler } from "@netlify/functions";
+
+exports.handler =  async (event) => {
+
+  return { statusCode: 200, body: JSON.stringify('gggdggdg') }
+
+}
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,3 @@
+[build]
+  functions = 'functions'
+  publish = 'build'
diff --git a/package.json b/package.json
@@ -1,27 +1,31 @@
 {
   "name": "kody",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": true,
   "dependencies": {
-    "ace-builds": "^1.4.14",
-    "axios": "^0.26.1",
+    "@supabase/supabase-js": "^1.35.5",
+    "ace-builds": "^1.8.1",
+    "axios": "^0.27.2",
     "react": "^17.0.2",
-    "react-ace": "^9.5.0",
+    "react-ace": "^10.1.0",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "react-split": "^2.0.14",
-    "recoil": "^0.7.0",
-    "unquer": "^1.0.1"
+    "recoil": "^0.7.4",
+    "unquer": "^1.0.3"
   },
   "alias": {
     "ace/lib/es5-shim": "ace-builds/src-noconflict/ace.js"
   },
   "scripts": {
+    "start:lambda": "NODE_ENV=dev netlify dev",
+    "build:lambda": "NODE_ENV=production netlify build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy":"NODE_ENV=production netlify deploy"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/public/index.html b/public/index.html
@@ -41,19 +41,17 @@
 </head>
 
 <body>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Dropbox-sdk.min.js" async></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ace.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/mode-javascript.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/mode-css.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/mode-html.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/theme-monokai.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/mode-jsx.js" async></script>
 
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ace.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/mode-javascript.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/mode-css.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/mode-html.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/theme-monokai.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/mode-jsx.js" async></script>
-
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ext-language_tools.js" async></script>  
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/worker-html.js" async></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/worker-css.js" async></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/worker-javascript.js" async></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ext-language_tools.js" async></script>  
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/worker-html.js" async></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/worker-css.js" async></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/worker-javascript.js" async></script>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify.js" async></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-css.js" async></script>

diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,15 @@
-import React, { Suspense, lazy } from "react";
+import React, { Suspense } from "react";
 import { BrowserRouter, Switch, Route,Redirect } from 'react-router-dom';
-
-import Auth from "./pages/Auth";
 import Spinner from "./components/Spinner";
+import routes from "./routes";
 // import PrivateRoute from "./auth/PrivateRoute";
 
-const Playground = lazy(() => import("./pages/Playground"));
-const Profile = lazy(() => import("./pages/profile/Profile"));
-const About = lazy(() => import("./pages/About"));
-const Login = lazy(() => import("./pages/Login"));
-
 export default function App () {
   return <BrowserRouter>
     <Suspense fallback={<Spinner />}>
       <Switch>
-        <Route exact path="/" component={Playground} />
-
-        <Route path="/auth" component={Auth} />
-        <Route path="/login" component={Login} />
 
-        <Route path="/profile" component={Profile} />
-        <Route path="/about" component={About} />
+        {routes.map((route, index) => <Route key={index} exact path={route.path} component={route.component} />)}
 
         <Redirect path="*" to="/" />
       </Switch>

diff --git a/src/pages/playground/LiveConsole.js → src/containers/playground/LiveConsole.js b/src/pages/playground/LiveConsole.js → src/containers/playground/LiveConsole.js
diff --git a/src/pages/playground/LiveEditor.js → src/containers/playground/LiveEditor.js b/src/pages/playground/LiveEditor.js → src/containers/playground/LiveEditor.js
@@ -5,16 +5,22 @@ import { useRecoilValue } from 'recoil';
 import AceEditor from "react-ace";
 import templates from '../../util/templates';
 import jsBeauty from '../../util/jsBeauty';
-import { DropboxService } from '../../services/DropboxService';
+
+import SuperbaseService from '../../services/SuperbaseService'
+
 import TemplatesService from '../../services/TemplatesService';
 
 import templateState from '../../atoms/templateState';
 import editorOptionsState from '../../atoms/editorOptionsState';
 import tabState from '../../atoms/tabState';
+import useAuth from '../../hooks/useAuth';
+import unquer from 'unquer';
 
 function LiveEditor() {
+  const authSession = useAuth();
+  const params = unquer.parse(window.location.href)
+
   const { playgroundState, dispatch } = useContext(PlaygroundContext);
-  const { service, file } = playgroundState;
   const [tabs, setTabs] = useState(templates['local']);
 
   const template = useRecoilValue(templateState);
@@ -25,16 +31,16 @@ function LiveEditor() {
     (async () => {
       try {
         await TemplatesService();
-        if (service && file) {
-          const content = await DropboxService.downloadFile(file)
-          const temp = tabs.slice(0);
-          temp[0] = content;
-          temp[1] = '';
-          temp[2] = '';
-          setTabs(temp);
+
+        if (params.p) {
+          const { content } = await SuperbaseService.getOnePaste(params.p);
+          const temp = JSON.parse(content);
+          setTabs(JSON.parse(content));
           localStorage.setItem('tabs', JSON.stringify(temp))
         }
-      } catch (error) { }
+      } catch (error) {
+        console.log(error);
+       }
     })();
     return () => { }
   }, [])

diff --git a/src/pages/playground/LiveIframe.js → src/containers/playground/LiveIframe.js b/src/pages/playground/LiveIframe.js → src/containers/playground/LiveIframe.js
diff --git a/src/pages/playground/LivePreview.js → src/containers/playground/LivePreview.js b/src/pages/playground/LivePreview.js → src/containers/playground/LivePreview.js
diff --git a/src/pages/playground/menu/AddLib.js → src/containers/top-menu/AddLib.js b/src/pages/playground/menu/AddLib.js → src/containers/top-menu/AddLib.js
@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import CDNService from '../../../services/CDNService';
-import debounce from '../../../util/debounce';
-import LocalExternalLibs from '../../../util/LocalExternalLibs';
+import CDNService from '../../services/CDNService';
+import debounce from '../../util/debounce';
+import LocalExternalLibs from '../../util/LocalExternalLibs';
 
 export default function AddLib() {
   const [libs, setLibs] = useState(LocalExternalLibs.getAll())

diff --git a/src/containers/AddPackage.js → src/containers/top-menu/AddPackage.js b/src/containers/AddPackage.js → src/containers/top-menu/AddPackage.js
diff --git a/src/pages/playground/menu/EditorOptions.js → src/containers/top-menu/EditorOptions.js b/src/pages/playground/menu/EditorOptions.js → src/containers/top-menu/EditorOptions.js
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import editorOptionsState from '../../../atoms/editorOptionsState';
+import editorOptionsState from '../../atoms/editorOptionsState';
 
 const themes = ['monokai', 'dracula', 'cobalt', 'one_dark', 'ambiance', 'eclipse', 'xcode', 'textmate', 'tomorrow'];
 

diff --git a/src/pages/playground/menu/FormSavePaste.js → src/containers/top-menu/FormSavePaste.js b/src/pages/playground/menu/FormSavePaste.js → src/containers/top-menu/FormSavePaste.js
@@ -1,19 +1,30 @@
 import React, { useState } from 'react';
 import { Link, withRouter } from 'react-router-dom';
-import { DropboxService } from '../../../services/DropboxService';
-import tabsToHTML from '../../../util/tabsToHTML';
+import useAuth from '../../hooks/useAuth';
+import SuperbaseService from '../../services/SuperbaseService';
 
 function FormSavePaste() {
+  const authSession = useAuth();
   const [fileInfos, setFileInfos] = useState();
-  const [errMsg, setErrMsg] = useState(null)
+  const [errMsg, setErrMsg] = useState(null);
 
   const onSaveSnippet = async (e) => {
     e.preventDefault();
+    if (!authSession || !authSession.user_metadata) return;
+
     try {
       let filename = e.target.elements[0].value;
-      let html = tabsToHTML(JSON.parse(localStorage.getItem('tabs')))
-      const response = await DropboxService.uploadFile(filename, html);
-      setFileInfos(response);
+      const tabsAsString = localStorage.getItem('tabs');
+
+      const response = await SuperbaseService.savePaste({
+        filename,
+        content: tabsAsString,
+        user_email: authSession.user_metadata.email
+      });
+
+      setErrMsg('Paste is saved successfully:' + response.id);
+
+      e.target.reset();
     } catch (error) {
       setErrMsg(error.message);
     }
@@ -32,12 +43,6 @@ function FormSavePaste() {
       </button>
     </form>
 
-    {fileInfos && <ul className='w-100 d-flex justify-between'>
-      <li className='green'>Saved</li>
-      <li>{fileInfos.name}</li>
-      <li>{fileInfos.size}</li>
-    </ul>}
-
     {errMsg && <p className='red'>{errMsg}</p>}
   </>);
 }

diff --git a/src/pages/playground/menu/Tab.js → src/containers/top-menu/Tab.js b/src/pages/playground/menu/Tab.js → src/containers/top-menu/Tab.js
@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import tabState from '../../../atoms/tabState';
+import tabState from '../../atoms/tabState';
 
-import Dropdown from '../../../components/DropDown';
-import Preprocessor from '../../../util/Preprocessor'
+import Dropdown from '../../components/DropDown';
+import Preprocessor from '../../util/Preprocessor'
 
 const tabs = [
   { name: 'html', icon: 'html5', color: 'red', preprocessor: ['html'] },

diff --git a/src/pages/playground/menu/Template.js → src/containers/top-menu/Template.js b/src/pages/playground/menu/Template.js → src/containers/top-menu/Template.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import templateState from '../../../atoms/templateState';
-import Dropdown from '../../../components/DropDown'
-import templates from '../../../util/templates';
+import templateState from '../../atoms/templateState';
+import Dropdown from '../../components/DropDown'
+import templates from '../../util/templates';
 
 export default function Template() {
   const template = useRecoilValue(templateState);
@@ -17,5 +17,4 @@ export default function Template() {
     data={Object.keys(templates)}
     onchange={onTemplateChange}
   />
-
 }
diff --git a/src/pages/playground/Menu.js → src/containers/top-menu/index.js b/src/pages/playground/Menu.js → src/containers/top-menu/index.js
@@ -1,29 +1,36 @@
-import React, { useState } from 'react';
+import React, { useState,useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import Modal from '../../components/Modal';
-import FormSavePaste from './menu/FormSavePaste';
-import EditorOptions from './menu/EditorOptions';
-import Template from './menu/Template';
-import DownloadButton from './menu/DownloadButton';
-import Tab from './menu/Tab';
-import AddLib from './menu/AddLib';
+import FormSavePaste from './FormSavePaste';
+import EditorOptions from './EditorOptions';
+import Template from './Template';
+
+import download from '../../util/download';
+import tabsToHTML from '../../util/tabsToHTML';
+
+import Tab from './Tab';
+import AddLib from './AddLib';
 
 export default function Menu() {
   const [showSaveModal, setShowSaveModal] = useState(false);
   const [showEditorOptionsModal, setShowEditorOptionsModal] = useState(false);
   const [showAddLibModal, setAddLibModal] = useState(false);
 
+  const onDownload = useCallback(() => {
+    download(tabsToHTML(), 'kody.html');
+  }, []);
+
   return <header className='w-100 d-flex justify-between align-center'>
 
     <Tab />
 
     <ul className='h-100 d-flex align-center'>
       <li><Template /></li>
-      <li title="Download Code"><DownloadButton /></li>
+      <li title="Download Code"><button className='white' onClick={onDownload}><i className="fa fa-download"></i></button></li>
       <li title='Add Library' onClick={() => { setAddLibModal(!showAddLibModal); }}><i className='fa fa-archive'></i></li>
       <li title='Save Paste' onClick={() => { setShowSaveModal(!showSaveModal); }}><i className='fa fa-save'></i></li>
       <li title='EditorOptions' onClick={() => { setShowEditorOptionsModal(!showEditorOptionsModal); }}><i className='fa fa-cog'></i></li>
-      <li title='Show Profile'><Link to="/profile"><i className="fas fa-user text-white"></i></Link></li>
+      <li title='Show Account'><Link to="/account"><i className="fas fa-user text-white"></i></Link></li>
     </ul>
 
     <Modal showModal={showAddLibModal} setShowModal={setAddLibModal}><AddLib /></Modal>

diff --git a/src/hooks/useAuth.js b/src/hooks/useAuth.js
@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react'
+import { supabase } from '../util/supabaseClient';
+
+export default function useAuth() {
+  const [authSession, setAuthSession] = useState(null);
+
+  useEffect(() => {
+
+    let authListener = null;
+
+    (async () => {
+      const token = localStorage.getItem('auth-token');
+      const { user, error } = await supabase.auth.api.getUser(token);
+      if (user) setAuthSession(user)
+
+      authListener = supabase.auth.onAuthStateChange(async (event, session) => {
+        if (session && session.user_metadata) setAuthSession(session);
+      });
+    })();
+
+    return () => {
+      if (authListener && authListener.data) authListener.data.unsubscribe();
+    }
+  }, []);
+
+  return authSession
+}
diff --git a/src/pages/About.js b/src/pages/About.js
@@ -1,8 +1,22 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Footer from '../components/Footer';
 import { withRouter } from 'react-router-dom';
+import axios from 'axios';
+
+function About() {
+
+  useEffect(() => {
+    axios.get('/.netlify/functions/index')
+      .then(v => {
+        console.log(v.data);
+      })
+
+    return () => {
+
+    }
+  }, [])
+
 
-function About () {
   return (<main>
 
     <div className="container text-center py-5">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"imports":{"netlify:edge":"https://edge.netlify.com/v1/index.ts"}}