Merge pull request #195 from koiosonline/develop

Develop

.eslintrc.json

@@ -9,12 +9,13 @@
     "extends": [
       "eslint:recommended",
       "plugin:@typescript-eslint/eslint-recommended",
-      "plugin:@typescript-eslint/recommended"
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react-hooks/recommended"
     ],
     "rules": {
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/no-explicit-any": "off",
-        "indent": ["error", 2],
+        "indent": ["error", 2, { "SwitchCase": 1, "ignoredNodes": ["ConditionalExpression"] }],
         "no-multi-spaces": ["error"],
         "semi": ["error", "always"]
     }

.github/workflows/develop.yml

@@ -19,7 +19,6 @@ jobs:
   deploy_job:
     runs-on: ubuntu-latest
     name: build&deploy
-    if: github.event.pull_request.merged == true
     steps:
       # To use this repository's private action, you must check out the repository
       - name: Checkout

.github/workflows/production.yml

@@ -19,7 +19,6 @@ jobs:
   deploy_job:
     runs-on: ubuntu-latest
     name: build&deploy
-    if: github.event.pull_request.merged == true
     steps:
       # To use this repository's private action, you must check out the repository
       - name: Checkout

.prettierrc.json

@@ -3,5 +3,6 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
-  "bracketSpacing": true
+  "bracketSpacing": true,
+  "printWidth": 120
 }

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package.json

@@ -19,7 +19,6 @@
     "@types/react-router-dom": "^5.1.7",
     "@walletconnect/web3-provider": "^1.6.5",
     "@widgetbot/react-embed": "^1.4.0",
-    "axios": "^0.21.1",
     "dids": "^2.4.0",
     "evm-chains": "^0.2.0",
     "ipfs-http-client": "^55.0.0",
@@ -64,6 +63,7 @@
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "@typescript-eslint/parser": "^5.2.0"
+    "@typescript-eslint/parser": "^5.2.0",
+    "eslint-plugin-react-hooks": "^4.3.0"
   }
 }

src/App.tsx

@@ -1,59 +1,59 @@
-import { Route, HashRouter as Router, Switch, Redirect } from "react-router-dom";
-import "./assets/css/koios.scss";
-import { Worlds } from "./pages/Worlds";
-import { WorldDetail } from "./pages/WorldDetail/WorldDetail";
-import { Layout } from "./components/Layout/Layout";
-import { Leaderboard } from "./pages/Leaderboard";
-import WorldOverview from "./pages/WorldOverview";
-import { Profile } from "./pages/Profile";
-import { ComingSoon } from "./pages/ComingSoon";
-import { useMemo, useState } from "react";
-import { UserContext } from "./Context/UserContext";
-import { Error404 } from "./pages/Error404";
-import Contribute from "./pages/Contribute";
-import ScrollToTop from "./components/Util/scrollTop";
-import ExplanationVideos from "./pages/ExplanationVideos";
-import Earn from "./pages/Earn";
-import VacancyDetail from "./pages/VacancyDetail";
-import { MarkdownEditor } from "./pages/MarkdownEditor";
+import { Route, HashRouter as Router, Switch, Redirect } from 'react-router-dom';
+import './assets/css/koios.scss';
+import { Worlds } from './pages/Worlds';
+import { WorldDetail } from './pages/WorldDetail/WorldDetail';
+import { Layout } from './components/Layout/Layout';
+import { Leaderboard } from './pages/Leaderboard';
+import WorldOverview from './pages/WorldOverview';
+import { Profile } from './pages/Profile/Profile';
+import { ComingSoon } from './pages/ComingSoon';
+import { Error404 } from './pages/Error404';
+import Contribute from './pages/Contribute';
+import ScrollToTop from './components/Util/scrollTop';
+import ExplanationVideos from './pages/ExplanationVideos';
+import Earn from './pages/Earn';
+import VacancyDetail from './pages/VacancyDetail';
+import { MarkdownEditor } from './pages/MarkdownEditor';
+import { AuthContextProvider } from './Context/AuthContext';
+import { UserContextProvider } from './Context/UserContext';
 
 export const App = () => {
-  const [user, setUser] = useState(null);
-  const providerValue = useMemo(() => ({ user, setUser }), [user, setUser]);
 
   return (
     <Router>
-      <UserContext.Provider value={providerValue}>
-        <ScrollToTop />
-        <Switch>
-          <Route path={["/editor"]} exact>
-            <Switch>
-              <Route path="/editor" exact component={MarkdownEditor} />
-            </Switch>
-          </Route>
-
-          <Route>
-            <Layout>
+      <AuthContextProvider>
+        <UserContextProvider>
+          <ScrollToTop />
+          <Switch>
+            <Route path={['/editor']} exact>
               <Switch>
-                <Route path="/worlds" exact component={Worlds} />
-                <Route path="/worlds/:worldContent" exact component={WorldOverview} />
-                <Route path="/worlds/:worldContent/:worldDetail/:videoSlug?" exact component={WorldDetail} />
-                <Route path="/coming-soon" exact component={ComingSoon} />
-                <Route path="/profile" exact component={Profile} />
-                <Route path="/leaderboard" exact component={Leaderboard} />
-                <Route path="/contribute" exact component={Contribute} />
-                <Route path="/explanation" exact component={ExplanationVideos} />
-                <Route path="/earn" exact component={Earn} />
-                <Route path="/earn/:vacancyDetail" exact component={VacancyDetail} />
-                <Route path="/" exact>
-                  <Redirect to="/worlds" />
-                </Route>
-                <Route component={Error404} />
+                <Route path="/editor" exact component={MarkdownEditor} />
               </Switch>
-            </Layout>
-          </Route>
-        </Switch>
-      </UserContext.Provider>
+            </Route>
+
+            <Route>
+              <Layout>
+                <Switch>
+                  <Route path="/worlds" exact component={Worlds} />
+                  <Route path="/worlds/:worldContent" exact component={WorldOverview} />
+                  <Route path="/worlds/:worldContent/:worldDetail/:videoSlug?" exact component={WorldDetail} />
+                  <Route path="/coming-soon" exact component={ComingSoon} />
+                  <Route path="/profile" exact component={Profile} />
+                  <Route path="/leaderboard" exact component={Leaderboard} />
+                  <Route path="/contribute" exact component={Contribute} />
+                  <Route path="/explanation" exact component={ExplanationVideos} />
+                  <Route path="/earn" exact component={Earn} />
+                  <Route path="/earn/:vacancyDetail" exact component={VacancyDetail} />
+                  <Route path="/" exact>
+                    <Redirect to="/worlds" />
+                  </Route>
+                  <Route component={Error404} />
+                </Switch>
+              </Layout>
+            </Route>
+          </Switch>
+        </UserContextProvider>
+      </AuthContextProvider>
     </Router>
   );
 };

src/Context/AuthContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, useState } from "react";
+
+export const AuthContext = createContext(null);
+
+export const AuthContextProvider = (props) => {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const [isAuthenticating, setIsAuthenticating] = useState<boolean>(false);
+  const [authError, setAuthError] = useState<string>(null);
+  const [provider, setProvider] = useState(null);
+
+  const providerValue = {
+    isAuthenticated,
+    setIsAuthenticated,
+    isAuthenticating,
+    setIsAuthenticating,
+    authError,
+    setAuthError,
+    provider,
+    setProvider
+  };
+
+  return (
+    <AuthContext.Provider value={providerValue}>
+      {props.children}
+    </AuthContext.Provider>
+  );
+};

src/Context/UserContext.tsx

@@ -1,3 +1,19 @@
-import { createContext } from "react";
+import { createContext, useState } from "react";
+import { UserAccount, UserAccountContext } from "../types/UserProfile/UserAccount";
 
-export const UserContext = createContext(null);
+export const UserContext = createContext<UserAccountContext>({} as UserAccountContext);
+
+export const UserContextProvider: React.FC = (props) => {
+  const [userAccount, setUserAccount] = useState<UserAccount>(null);
+
+  const providerValue: UserAccountContext = {
+    userAccount,
+    setUserAccount
+  };
+
+  return (
+    <UserContext.Provider value={providerValue}>
+      {props.children}
+    </UserContext.Provider>
+  );
+};

src/api/Api.ts

@@ -5,7 +5,7 @@ type getLiteratureProps = {
 };
 
 export const getVideoInfo = async (levelAddress) => {
-  const baseUrl = "https://cloudflare-ipfs.com/ipfs/";
+  const baseUrl = 'https://cloudflare-ipfs.com/ipfs/';
   try {
     const getVideos = await fetch(`${baseUrl + levelAddress}`);
     const videos = await getVideos.json();
@@ -16,16 +16,13 @@ export const getVideoInfo = async (levelAddress) => {
 };
 
 export const getLiterature = async (props: getLiteratureProps) => {
-  const baseUrl =
-    "https://raw.githubusercontent.com/koiosonline/literature/main";
+  const baseUrl = 'https://raw.githubusercontent.com/koiosonline/literature/main';
   const world = props.world;
   const worldLevel = props.worldLevel;
   const article = props.article;
 
   try {
-    const fetchLiteratureFile = await fetch(
-      `${baseUrl}/${world}/${worldLevel}/${article}`
-    );
+    const fetchLiteratureFile = await fetch(`${baseUrl}/${world}/${worldLevel}/${article}`);
 
     if (fetchLiteratureFile.ok) {
       return await fetchLiteratureFile.text();
@@ -35,4 +32,20 @@ export const getLiterature = async (props: getLiteratureProps) => {
   } catch (e) {
     console.log(e);
   }
-};
+};
+
+export const getDiscordProfile = async (discordUsername: string) => {
+  const baseUrl = process.env.REACT_APP_DISCORD_LEVELS;
+
+  if (discordUsername) {
+    try {
+      const getDiscordProfileData = await fetch(`${baseUrl + discordUsername}`);
+      const discordProfileData = await getDiscordProfileData.json();
+      return discordProfileData[0];
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  return undefined;
+};

src/assets/css/base/_grid.scss

@@ -3,6 +3,7 @@
   padding-right: 15px;
   margin-left: auto;
   margin-right: auto;
+  max-width: 1080px;
 }
 
 .content-container {

src/assets/css/base/_main.scss

@@ -1,3 +1,7 @@
+body {
+  background-color: $color-07;
+}
+
 .main {
   width: 100%;
   height: calc(100% - 58px);
@@ -11,7 +15,7 @@
   background-repeat: no-repeat;
   margin-top: 60px;
 
-  @include for-size($desktop) {
+  @include for-size(1200px) {
     margin-left: 300px;
     margin-top: 0;
   }
@@ -22,6 +26,14 @@
   text-decoration: none;
 }
 
+.icon {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+}
+
 ::-webkit-scrollbar {
   width: 0;
   @include for-size($desktop) {
@@ -44,4 +56,3 @@
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
-

src/assets/css/base/_reset.scss

@@ -120,7 +120,7 @@ button {
 }
 
 svg {
-  display: block;
+  display: inline-block;
   width: 100%;
   height: 100%;
 }