11 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/store/action-types/editor.ts:
--------------------------------------------------------------------------------
1 | export const SET_SOURCE = 'editor/SET_SOURCE';
2 | export const SET_STDOUT = 'editor/SET_STDOUT';
3 | export const SET_STDIN = 'editor/SET_STDIN';
4 | export const SET_RETURN_CODE = 'editor/SET_RETURN_CODE';
5 | export const SET_STUBS = 'editor/SET_STUBS';
6 | export const SET_LANGUAGES = 'editor/SET_LANGUAGES';
7 | export const SET_SELECTED_LANGUAGE_BY_ID = 'editor/SET_SELECTED_LANGUAGE_BY_ID';
8 | export const SET_FONT_SIZE = 'editor/SET_FONT_SIZE';
9 | export const SET_FILENAME = 'editor/SET_FILENAME';
10 |
--------------------------------------------------------------------------------
/src/services/api.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import Config from '~/config';
3 | import { getJwt } from '~/utils/jwt';
4 |
5 | const client = axios.create({
6 | baseURL: Config.API.HOST + '/api',
7 | responseType: 'json',
8 | });
9 |
10 | client.interceptors.request.use(
11 | (request) => {
12 | const token = getJwt();
13 | if (token) request.headers['Authorization'] = `JWT ${token}`;
14 | return request;
15 | },
16 | (error) => {
17 | console.error(error);
18 | },
19 | );
20 |
21 | export default client;
22 |
--------------------------------------------------------------------------------
/src/services/judge.ts:
--------------------------------------------------------------------------------
1 | import Api from './api';
2 | const BASE_URL = '/judge';
3 |
4 | export async function getLanguages() {
5 | return Api.get(`${BASE_URL}/languages`);
6 | }
7 |
8 | export async function getSubmission(submissionId: string) {
9 | return Api.get(`${BASE_URL}/submissions/${submissionId}`);
10 | }
11 |
12 | export async function runCode(data: { source_code; language_id; stdin }) {
13 | return Api.post(`${BASE_URL}/run`, data);
14 | }
15 |
16 | export async function getStubs() {
17 | return Api.get(`${BASE_URL}/stubs`);
18 | }
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react",
4 | "lib": ["dom"],
5 | "target": "es2019",
6 | "module": "commonjs",
7 | "moduleResolution": "node",
8 | "outDir": "./dist",
9 | "emitDecoratorMetadata": true,
10 | "experimentalDecorators": true,
11 | "esModuleInterop": true,
12 | "sourceMap": true,
13 | "allowJs": true,
14 | "baseUrl": "src",
15 | "rootDir": "src",
16 | "paths": {
17 | "~/*": ["*"]
18 | },
19 | "resolveJsonModule": true
20 | },
21 | "include": ["src"]
22 | }
23 |
--------------------------------------------------------------------------------
/src/data/banner.json:
--------------------------------------------------------------------------------
1 | {
2 | "SANTA": {
3 | "content": "Start your new year with Coding, use code on all courses! 🎉",
4 | "link": "https://codingminutes.com/#course_gallery"
5 | },
6 | "COMPETITIVE_PROGRAMMING_ESSENTIALS": {
7 | "content": "Kickstart Coding, enroll in for ",
8 | "link": "https://www.udemy.com/course/learn-coding-for-beginners/?referralCode=B9C51C703049157C1298"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/services/auth.ts:
--------------------------------------------------------------------------------
1 | import Api from './api';
2 | const BASE_URL = '/auth';
3 |
4 | export async function loginWithGoogle(token: string) {
5 | const response = await Api.post(`${BASE_URL}/login`, { token });
6 | return response.data;
7 | }
8 |
9 | export async function loginWithGithub(code: string) {
10 | const response = await Api.post(`${BASE_URL}/login`, { code, strategy: "github" })
11 | return response.data;
12 | }
13 |
14 | export async function verifyToken() {
15 | const response = await Api.post(`${BASE_URL}/verify`);
16 | return response;
17 | }
18 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true
5 | },
6 | "extends": ["plugin:react/recommended", "airbnb"],
7 | "parser": "@typescript-eslint/parser",
8 | "parserOptions": {
9 | "ecmaFeatures": {
10 | "jsx": true
11 | },
12 | "ecmaVersion": 12,
13 | "sourceType": "module"
14 | },
15 | "plugins": ["react", "@typescript-eslint"],
16 | "rules": {
17 | "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
18 | "no-use-before-define": "off",
19 | "@typescript-eslint/no-use-before-define": ["error"]
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/services/ide.ts:
--------------------------------------------------------------------------------
1 | import Api from './api';
2 | import useSWR from 'swr';
3 | const BASE_URL = '/code';
4 |
5 | export function saveCode(data) {
6 | return Api.post(`${BASE_URL}/`, data);
7 | }
8 |
9 | export async function getCodeById(id: string) {
10 | return Api.get(`${BASE_URL}/${id}`);
11 | }
12 |
13 | export async function updateCode(id: string, data) {
14 | return Api.patch(`${BASE_URL}/${id}`, data);
15 | }
16 |
17 | export async function getSavedCodes(page: number = 1, query = '') {
18 | const { data } = useSWR(`${BASE_URL}/saved?page=${page}&query=${query}`, (url) => Api.get(url));
19 | return data;
20 | }
21 |
--------------------------------------------------------------------------------
/src/initializers/user.ts:
--------------------------------------------------------------------------------
1 | import { verifyToken } from '~/services/auth';
2 | import { clearJwt, getJwt } from '~/utils/jwt';
3 | import { Dispatch } from 'redux';
4 | import { loginUser } from '~/store/action/auth';
5 |
6 | export async function getUserFromJwt(dispatch: Dispatch) {
7 | try {
8 | const jwt = getJwt();
9 | if (!jwt) return;
10 |
11 | const response = await verifyToken();
12 | const user = response.data;
13 |
14 | dispatch(
15 | loginUser({
16 | user,
17 | jwt,
18 | isLoggedIn: true,
19 | }),
20 | );
21 | } catch (error) {
22 | console.error(error);
23 | clearJwt();
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/tasks/savecodelist.ts:
--------------------------------------------------------------------------------
1 | import { getSavedCodes } from '~/services/ide';
2 | import { Dispatch } from 'redux';
3 | import { setCurrentPage, updateSavelist, setPageMetaData } from '~/store/action/savelist';
4 | import { batch } from 'react-redux';
5 |
6 | export async function fetchSavedCodes(dispatch: Dispatch, page: number = 1, query = '') {
7 | const response = await getSavedCodes(page, query);
8 | if (response?.data) {
9 | const data = response.data;
10 |
11 | batch(() => {
12 | dispatch(setCurrentPage(page));
13 | dispatch(updateSavelist(data.data));
14 | dispatch(setPageMetaData(data.count, data.next, data.previous, data.total_pages));
15 | });
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/initializers/settings.ts:
--------------------------------------------------------------------------------
1 | import { batch } from 'react-redux';
2 | import { Dispatch } from 'redux';
3 | import { IO_PANEL } from '~/constants/panel';
4 | import { getSettings } from '~/services/settings';
5 | import { setLanguageById, setFontSize } from '~/store/action/editor';
6 | import { setActivePanel } from '~/store/action/ui';
7 |
8 | export const loadSettings = (dispatch: Dispatch) => {
9 | const settings = getSettings();
10 | batch(() => {
11 | if (settings?.lang_id) {
12 | dispatch(setLanguageById(settings.lang_id));
13 | }
14 | if (settings?.fontSize) {
15 | dispatch(setFontSize(settings.fontSize));
16 | }
17 | dispatch(setActivePanel(IO_PANEL));
18 | });
19 | };
20 |
--------------------------------------------------------------------------------
/src/store/getters/editor.ts:
--------------------------------------------------------------------------------
1 | export const getSelectedLanguage = () => (state) => state.editor.selectedLanguage;
2 | export const getCurrentSource = () => (state) =>
3 | state.editor.sourceLanguageMap[state.editor.selectedLanguage?.id] || ' ';
4 | export const getStdin = () => (state) => state.editor.stdin;
5 | export const getStdout = () => (state) => state.editor.stdout;
6 | export const getReturnCode = () => (state) => state.editor.returnCode;
7 | export const getLanguages = () => (state) => Object.values(state.editor.languages);
8 | export const getFontSize = () => (state) => state.editor.fontSize;
9 | export const getLanguageMap = () => (state) => state.editor.languages;
10 | export const getFilename = () => (state) => state.editor.filename;
11 |
--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
1 | import { combineReducers, createStore } from 'redux';
2 | import { composeWithDevTools } from 'redux-devtools-extension';
3 |
4 | import { editorReducer } from '~/store/reducers/editor';
5 | import { uiReducer } from '~/store/reducers/ui';
6 | import { authReducer } from '~/store/reducers/auth';
7 | import { savelistReducer } from '~/store/reducers/savelist';
8 |
9 | export const initStore = () => {
10 | const rootReducer = combineReducers({
11 | editor: editorReducer,
12 | ui: uiReducer,
13 | auth: authReducer,
14 | savelist: savelistReducer,
15 | });
16 | const composeEnhancers = composeWithDevTools({});
17 | const store = createStore(rootReducer, composeEnhancers());
18 |
19 | return store;
20 | };
21 |
--------------------------------------------------------------------------------
/src/components/base/toast.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSelector, useDispatch } from 'react-redux';
3 | import { setToast } from '~/store/action/ui';
4 | import { getToast } from '~/store/getters/ui';
5 |
6 | interface Props {}
7 |
8 | export const Toast: React.FCOutput
12 | {stdout}
13 | {message}
;
25 | };
26 |
--------------------------------------------------------------------------------
/src/components/editor/io-nav/input-fragment.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { setStdin } from '~/store/action/editor';
4 | import { getStdin } from '~/store/getters/editor';
5 |
6 | export const InputFragment: React.FC = () => {
7 | const dispatch = useDispatch();
8 |
9 | const stdin = useSelector(getStdin());
10 | const setInput = (input) => dispatch(setStdin(input));
11 |
12 | return (
13 |
14 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/src/components/layout/banner.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { toggleBanner } from '~/store/action/ui';
3 | import { useDispatch } from 'react-redux';
4 |
5 | interface Props {
6 | content: string;
7 | link: string;
8 | }
9 |
10 | export const Banner: React.FCEnter Input
15 |
20 |
20 |
21 |
22 |
23 |
24 |
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/store/action/savelist.ts:
--------------------------------------------------------------------------------
1 | import {
2 | SET_CURRENT_PAGE,
3 | SET_SAVELIST,
4 | CLEAR_SAVELIST,
5 | SET_PAGE_METADATA,
6 | } from '../action-types/savelist';
7 | import { Codefile } from '../reducers/savelist';
8 |
9 | export const setCurrentPage = (page: number = 1) => ({
10 | type: SET_CURRENT_PAGE,
11 | payload: page,
12 | });
13 |
14 | export const updateSavelist = (codes: Array
25 | ✕
26 |
27 |
27 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/store/action/ui.ts:
--------------------------------------------------------------------------------
1 | import {
2 | TOGGLE_IO_PANE,
3 | SET_ACTIVE_MODAL,
4 | TOGGLE_BANNER,
5 | TOGGLE_OPTIONS_MENU,
6 | SET_ACTIVE_PANEL,
7 | SET_TOAST,
8 | } from '~/store/action-types/ui';
9 | import { Toast, ToastType } from '~/store/reducers/ui';
10 |
11 | export const toggleIOPane = () => ({
12 | type: TOGGLE_IO_PANE,
13 | });
14 |
15 | export const setActiveModal = (modalName?: string) => ({
16 | type: SET_ACTIVE_MODAL,
17 | payload: modalName || null,
18 | });
19 |
20 | export const toggleBanner = () => ({
21 | type: TOGGLE_BANNER,
22 | });
23 |
24 | export const toggleOptionsMenu = () => ({
25 | type: TOGGLE_OPTIONS_MENU,
26 | });
27 |
28 | export const setActivePanel = (panel?: string) => ({
29 | type: SET_ACTIVE_PANEL,
30 | payload: panel || null,
31 | });
32 |
33 | export const setToast = (toast: Partial
28 |
30 | {props.children}
29 | SORRY :(
10 | 
16 |
17 | IDE doesn't support screen widths smaller than 768px at the moment! To give
18 | you an idea why, we've kept every non-responsive piece transparent in the background!
19 |
20 | YUP! Pretty broken. :) 21 |
22 |
23 | 20 | YUP! Pretty broken. :) 21 |
24 | Move to a bigger screen size, fix your aspect ratio or just zoom out to sort this issue.
25 | IDE's shouldn't have mobile views in the first place but we're working on it for you. Hope
26 | you had fun interacting with a fellow dev who wanted to vent.
27 |
28 | Thanks for hearing me out! HAPPY CODING. :) 29 |
30 | 28 | Thanks for hearing me out! HAPPY CODING. :) 29 |
36 | {activePanel == SAVELIST_PANEL &&
44 | );
45 | };
46 |
--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
1 | name: Deployment
2 | on:
3 | push:
4 | branches:
5 | - master
6 | jobs:
7 | deploy:
8 | runs-on: ubuntu-latest
9 | strategy:
10 | matrix:
11 | node-version: [12.x]
12 | steps:
13 | - uses: actions/checkout@v1
14 | - name: Use Node.js ${{ matrix.node-version }}
15 | uses: actions/setup-node@v1
16 | with:
17 | node-version: ${{ matrix.node-version }}
18 | - name: Install Packages
19 | run: npm install
20 | - name: Build page
21 | run: npm run build
22 | env:
23 | API_HOST: 'https://ide-backend.codingminutes.com'
24 | NODE_ENV: 'production'
25 | REACT_APP_GOOGLE_CLIENT_ID: ${{ secrets.REACT_APP_GOOGLE_CLIENT_ID }}
26 | REACT_APP_GITHUB_CLIENT_ID: ${{ secrets.REACT_APP_GITHUB_CLIENT_ID }}
27 | - name: Upload Build
28 | uses: appleboy/scp-action@master
29 | with:
30 | host: ${{ secrets.HOST }}
31 | username: ${{ secrets.USERNAME }}
32 | key: ${{ secrets.KEY }}
33 | source: 'dist'
34 | target: 'temp'
35 | - name: Replace New Build
36 | uses: appleboy/ssh-action@master
37 | with:
38 | host: ${{ secrets.HOST }}
39 | username: ${{ secrets.USERNAME }}
40 | key: ${{ secrets.KEY }}
41 | script: rm -rf ~/frontends/ide/* && cp -rf ~/temp/dist/* ~/frontends/ide && rm -rf ~/temp
42 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | const mode = process.env.NODE_ENV || 'development';
5 |
6 | require('dotenv').config();
7 |
8 | module.exports = {
9 | entry: './src/index.tsx',
10 | mode,
11 | output: {
12 | path: path.resolve(__dirname, 'dist'),
13 | filename: mode === 'production' ? 'bundle-[contenthash].js' : 'bundle.js',
14 | chunkFilename: mode === 'production' ? '[id]-[chunkhash].js' : '[id].js',
15 | publicPath: '/',
16 | },
17 | resolve: {
18 | alias: {
19 | '~': __dirname + '/src',
20 | },
21 | extensions: ['.tsx', '.ts', '.js'],
22 | },
23 | module: {
24 | rules: [
25 | {
26 | test: /\.[tj]sx?$/,
27 | use: [
28 | {
29 | loader: 'ts-loader',
30 | options: {
31 | configFile: 'tsconfig.json',
32 | },
33 | },
34 | ],
35 | exclude: /node_modules/,
36 | },
37 | {
38 | test: /\.s[ac]ss$/,
39 | use: ['style-loader', 'css-loader', 'sass-loader'],
40 | exclude: /node_modules/,
41 | },
42 | ],
43 | },
44 | plugins: [
45 | new webpack.DefinePlugin({
46 | 'process.env': Object.keys(process.env).reduce((acc, curr) => {
47 | acc[curr] = JSON.stringify(process.env[curr]);
48 | return acc;
49 | }, {}),
50 | }),
51 | new HtmlWebpackPlugin({
52 | template: __dirname + '/src/index.html',
53 | filename: 'index.html',
54 | inject: 'body',
55 | }),
56 | ],
57 | };
58 |
--------------------------------------------------------------------------------
/src/store/action/editor.ts:
--------------------------------------------------------------------------------
1 | import { Language } from '~/store/reducers/editor';
2 | import {
3 | SET_RETURN_CODE,
4 | SET_SELECTED_LANGUAGE_BY_ID,
5 | SET_SOURCE,
6 | SET_STDIN,
7 | SET_STDOUT,
8 | SET_STUBS,
9 | SET_LANGUAGES,
10 | SET_FONT_SIZE,
11 | SET_FILENAME,
12 | } from '~/store/action-types/editor';
13 | import { listToMap } from '~/utils/store';
14 | import { setSettings } from '~/services/settings';
15 |
16 | interface CodeStub {
17 | language_id: number;
18 | stub: string;
19 | }
20 |
21 | export const setSource = (source: string) => ({
22 | type: SET_SOURCE,
23 | payload: source,
24 | });
25 |
26 | export const setStdout = (stdout: string) => ({
27 | type: SET_STDOUT,
28 | payload: stdout,
29 | });
30 |
31 | export const setStdin = (stdin: string) => ({
32 | type: SET_STDIN,
33 | payload: stdin,
34 | });
35 |
36 | export const setReturnCode = (returnCode: number) => ({
37 | type: SET_RETURN_CODE,
38 | payload: returnCode,
39 | });
40 |
41 | export const setCodeStubs = (codeStubs: Array
39 |
42 | )}
43 |
60 | {showBanner &&
82 |
83 | );
84 | };
85 |
--------------------------------------------------------------------------------
/src/components/editor/run-fab/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { batch, useDispatch, useSelector } from 'react-redux';
3 | import { useTask } from 'react-use-task';
4 |
5 | import { pollSubmission, Submission } from '~/components/editor/run-fab/actions';
6 | import { sleep } from '~/components/editor/run-fab/utils';
7 | import { runCode } from '~/services/judge';
8 | import { getCurrentSource, getSelectedLanguage, getStdin } from '~/store/getters/editor';
9 | import { setReturnCode, setStdout } from '~/store/action/editor';
10 |
11 | const MAX_RETRIES = 20;
12 |
13 | export enum FabState {
14 | idle = 'idle',
15 | correct = 'correct',
16 | error = 'error',
17 | }
18 | export interface RunFabProps {
19 | state: FabState;
20 | }
21 |
22 | export const RunFAB = (props: RunFabProps) => {
23 | const dispatch = useDispatch();
24 |
25 | const currentSource = useSelector(getCurrentSource());
26 | const selectedLanguage = useSelector(getSelectedLanguage());
27 | const currentInput = useSelector(getStdin());
28 |
29 | const setOutput = (stdout) => dispatch(setStdout(stdout));
30 | const setCode = (returnCode) => dispatch(setReturnCode(returnCode));
31 |
32 | const [{ isRunning }, perform] = useTask(function* (source, language, input) {
33 | const response: any = yield runCode({
34 | source_code: btoa(source),
35 | language_id: language,
36 | stdin: btoa(input),
37 | });
38 |
39 | const submissionId = response.data.submission_id;
40 |
41 | let retry = MAX_RETRIES;
42 | while (retry--) {
43 | yield sleep(1000);
44 | const submission: Submission = yield pollSubmission(submissionId);
45 |
46 | if (submission.time || submission.compile_output || submission.stderr || submission.stdout) {
47 | batch(() => {
48 | setOutput(submission.compile_output || submission.stderr || submission.stdout);
49 | setCode(submission.stderr || submission.compile_output ? 1 : 0);
50 | });
51 | return;
52 | }
53 | }
54 | });
55 |
56 | const execute = () => perform(currentSource, selectedLanguage.id, currentInput);
57 |
58 | const ButtonClassMap = {
59 | idle: 'run-button--run-code',
60 | correct: 'run-button--success',
61 | error: 'run-button--error',
62 | };
63 |
64 | const IconMap = {
65 | idle: 'https://minio.codingminutes.com/assets/play-white.svg',
66 | correct: 'https://minio.codingminutes.com/assets/play-white.svg',
67 | error: 'https://minio.codingminutes.com/assets/play-white.svg',
68 | };
69 |
70 | const buttonClass = ButtonClassMap[props.state];
71 | const icon = IconMap[props.state];
72 |
73 | return (
74 |
96 | );
97 | };
98 |
--------------------------------------------------------------------------------
/src/components/editor/io-nav/savelist.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import {
4 | getCurrentPageNumber,
5 | getCurrentPageList,
6 | getNextPageNumber,
7 | getPreviousPageNumber,
8 | getTotalPages,
9 | } from '~/store/getters/savelist';
10 | import { fetchSavedCodes } from '~/tasks/savecodelist';
11 | import { setCurrentPage } from '~/store/action/savelist';
12 | import { getLanguageMap } from '~/store/getters/editor';
13 |
14 | const Savelist = (props) => {
15 | const [query, setQuery] = React.useState('');
16 | const dispatch = useDispatch();
17 | const savelist = useSelector(getCurrentPageList());
18 | const currentPageNumber = useSelector(getCurrentPageNumber());
19 | const totalPages = useSelector(getTotalPages());
20 | const previousPage = useSelector(getPreviousPageNumber());
21 | const nextPage = useSelector(getNextPageNumber());
22 | const languageMap = useSelector(getLanguageMap());
23 |
24 | fetchSavedCodes(dispatch, currentPageNumber, query);
25 |
26 | function changePageNumber(page) {
27 | dispatch(setCurrentPage(page));
28 | }
29 |
30 | return (
31 | <>
32 |
66 |
81 |
67 |
71 |
68 |
70 |
74 |
80 |
75 | 
76 |
77 |
78 | {/*
76 | Toggle I/O pane
*/}
79 |
33 |
105 |
106 | );
107 | };
108 |
109 | export default Savelist;
110 |
--------------------------------------------------------------------------------
/src/components/auth/login-modal.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useDispatch, batch } from 'react-redux';
3 | import { GoogleLogin } from 'react-google-login';
4 | import OauthPopup from 'react-oauth-popup';
5 | import jwt_decode from "jwt-decode"
6 | import { LOGIN_MODAL } from '~/constants/modal';
7 | import { loginUser } from '~/store/action/auth';
8 | import { BaseModal } from '~/components/base/modal';
9 | import Config from '~/config';
10 | import { loginWithGoogle, loginWithGithub } from '~/services/auth';
11 | import { setActiveModal } from '~/store/action/ui';
12 | import { setJwt } from '~/utils/jwt';
13 |
14 | export const LoginModal: React.FC = () => {
15 | const dispatch = useDispatch();
16 | const [loading, setLoading] = React.useState(false);
17 |
18 | const loginGoogleSuccess = async (response) => {
19 | try {
20 | setLoading(true);
21 | const token = response.getAuthResponse().id_token;
22 | const res = await loginWithGoogle(token);
23 | const { jwt } = res;
24 |
25 | const basicProfile = response.getBasicProfile();
26 | const user = {
27 | email: basicProfile.getEmail(),
28 | first_name: basicProfile.getGivenName(),
29 | last_name: basicProfile.getFamilyName(),
30 | };
31 |
32 | batch(() => {
33 | dispatch(
34 | loginUser({
35 | user,
36 | jwt,
37 | isLoggedIn: true,
38 | }),
39 | );
40 | dispatch(setActiveModal(null));
41 | });
42 | setJwt(jwt);
43 | } catch (error) {
44 | console.error(error);
45 | } finally {
46 | setLoading(false);
47 | }
48 | };
49 |
50 | const loginGithubSuccess = async (code, params) => {
51 | try {
52 | setLoading(true);
53 | const res = await loginWithGithub(code);
54 | const { jwt } = res;
55 | const decoded :any = jwt_decode(jwt);
56 |
57 | const user = {
58 | email: decoded.email,
59 | first_name: decoded.first_name,
60 | last_name: decoded.last_name,
61 | };
62 |
63 | batch(() => {
64 | dispatch(
65 | loginUser({
66 | user,
67 | jwt,
68 | isLoggedIn: true,
69 | }),
70 | );
71 | dispatch(setActiveModal(null));
72 | });
73 | setJwt(jwt);
74 | } catch (error) {
75 | console.error(error);
76 | } finally {
77 | setLoading(false);
78 | }
79 | }
80 |
81 | const loginFailure = (e) => {
82 | e?.preventDefault?.();
83 | console.error('Failure = ', e);
84 | };
85 |
86 | function getGithubOAuthURL() {
87 | const GITHUB_CLIENT_ID = Config.GITHUB_CLIENT_ID;
88 | const scopes = "read:user+user:email";
89 | const redirect_uri = window.location.href;
90 | const url = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&scope=${scopes}&redirect_uri=${redirect_uri}`;
91 | return url;
92 | }
93 |
94 | return (
95 |
34 |
52 |
53 |
35 |
51 | Saved Codes
36 |
37 |
50 |
38 | setQuery(e.target.value)}
43 | className="transparent-input w-100"
44 | />
45 |
49 |
46 | 
47 |
48 |
47 |
54 |
85 |
86 |
93 |
104 |
94 | Showing {currentPageNumber} of {totalPages}
95 |
96 |
103 | Welcome to
97 |
102 |
103 | Login to your account
104 | {loading && Loading...
} 105 | {!loading && ( 106 | <> 107 |
108 | ; }) => (
113 |
120 |
114 | 
115 |
117 | )}
118 | />
119 |
115 | Continue with Google
116 |
129 |
134 |
130 | 
131 |
133 |
131 | Continue with Github
132 |
100 |
207 | );
208 | };
209 |
--------------------------------------------------------------------------------
/src/style/app.scss:
--------------------------------------------------------------------------------
1 | // Base Classes
2 | %button-generic {
3 | font-weight: 700;
4 | padding: 0.5rem 1.75rem;
5 | border-radius: 5px;
6 |
7 | &:focus {
8 | border: unset;
9 | box-shadow: unset;
10 | outline: unset;
11 | }
12 | }
13 |
14 | // Variables
15 | $accent-color-green: #7ac25b;
16 | $accent-color-purple: #5848ea;
17 | $accent-color-pink: #9549eb;
18 |
19 | $secondary-color-green: #6cc644;
20 |
21 | $accent-gradient-purple: linear-gradient(to right, $accent-color-purple, $accent-color-pink);
22 | $button-gradient: linear-gradient(
23 | to right,
24 | $accent-color-purple,
25 | $accent-color-pink,
26 | $accent-color-purple
27 | );
28 |
29 | $primary-dark: #1e1e1e;
30 | $overlay-dark: #25282e;
31 | $secondary-dark: #404040;
32 | $tertiary-dark: #5c5c5c;
33 |
34 | $primary-light: #ffffff;
35 | $secondary-light: #d1d1d1;
36 | $tertiary-light: #adadad;
37 |
38 | $banner-height: 5vh;
39 | $banner-background: #25282e;
40 |
41 | // Animations
42 | @keyframes button-gradient {
43 | 0% {
44 | background-position: 0% 50%;
45 | }
46 | 50% {
47 | background-position: 100% 50%;
48 | }
49 | 100% {
50 | background-position: 0% 50%;
51 | }
52 | }
53 |
54 | // Classes and Overrides
55 | html {
56 | font-size: 14px;
57 | }
58 |
59 | .h-inherit {
60 | height: inherit;
61 | }
62 |
63 | .no-scrollbar {
64 | scrollbar-width: none;
65 |
66 | &::-webkit-scrollbar {
67 | display: none;
68 | }
69 | }
70 |
71 | .width-fit {
72 | width: fit-content;
73 | }
74 |
75 | .w-100 {
76 | width: 100%;
77 | }
78 |
79 | button {
80 | background: none;
81 | border: none;
82 | padding: unset;
83 | }
84 |
85 | .button-primary {
86 | @extend %button-generic;
87 | background: $button-gradient;
88 | cursor: pointer;
89 | background-size: 200% 200%;
90 | color: white;
91 |
92 | &:hover {
93 | animation: button-gradient 3s ease infinite;
94 | }
95 | }
96 |
97 | .flex-col {
98 | flex-direction: column;
99 | }
100 |
101 | .flex-1 {
102 | flex: 1;
103 | }
104 |
105 | .pulse {
106 | display: flex;
107 | align-items: center;
108 | justify-content: center;
109 | height: 1px;
110 | width: 1px;
111 | border-radius: 50%;
112 | position: relative;
113 | border: none;
114 | box-shadow: 0 0 0 0 #fff;
115 |
116 | &:hover {
117 | animation: pulse 1s infinite cubic-bezier(0.2, 0, 0, 1);
118 | }
119 |
120 | @keyframes pulse {
121 | to {
122 | box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
123 | }
124 | }
125 | }
126 |
127 | .row-link-container {
128 | position: relative;
129 |
130 | .row-link {
131 | position: absolute;
132 | height: 100%;
133 | width: 100%;
134 | top: 0;
135 | left: 0;
136 | }
137 | }
138 |
139 | .ide-container {
140 | height: 100vh;
141 | width: 100%;
142 | overflow: hidden;
143 | position: relative;
144 | display: flex;
145 | flex-direction: column;
146 |
147 | &--dark {
148 | background: $primary-dark;
149 | color: $primary-light;
150 | }
151 |
152 | .navbar-top {
153 | border-bottom: solid 1px $tertiary-dark;
154 | height: 60px;
155 | padding: 0 30px;
156 |
157 | .cm-logo {
158 | height: 20px;
159 | }
160 |
161 | &__option {
162 | font-size: 1.142rem;
163 | color: $primary-light;
164 | padding: 0 1rem;
165 | cursor: pointer;
166 | text-decoration: none;
167 | display: flex;
168 | align-items: center;
169 |
170 | &__icon {
171 | height: 18px;
172 | }
173 |
174 | &:hover {
175 | color: $accent-color-green;
176 | }
177 |
178 | &:first-child:focus-visible &:not(:first-child) {
179 | display: none;
180 | }
181 | }
182 |
183 | .save-button-container {
184 | position: relative;
185 | padding: 5px 1rem;
186 | border-radius: 50px;
187 | border: 1px solid $tertiary-dark;
188 |
189 | input {
190 | appearance: none;
191 | background: transparent;
192 | border: unset;
193 | color: $tertiary-light;
194 | transition: all 0.5s;
195 | width: 175px;
196 |
197 | &:focus-visible {
198 | outline: unset;
199 | color: $primary-light;
200 | width: 300px;
201 | }
202 |
203 | &::placeholder {
204 | opacity: 1;
205 | color: $tertiary-light;
206 | }
207 | }
208 |
209 | button {
210 | color: $primary-light;
211 | cursor: pointer;
212 |
213 | &:focus,
214 | &:hover {
215 | color: $accent-color-green;
216 | }
217 | }
218 | }
219 |
220 | select {
221 | -webkit-appearance: none;
222 | -moz-appearance: none;
223 | -ms-appearance: none;
224 | appearance: none;
225 | outline: 0;
226 | box-shadow: none;
227 | background: $primary-dark;
228 | background-image: none;
229 | color: #fff;
230 | cursor: pointer;
231 |
232 | &::-ms-expand {
233 | display: none;
234 | }
235 |
236 | option {
237 | background: $primary-dark;
238 | padding: 5px 0;
239 | }
240 | }
241 |
242 | .language-selector {
243 | border: 1px solid $accent-color-green;
244 | border-radius: 5px;
245 | padding: 5px 10px;
246 | margin-right: 30px;
247 | transition: all 0.25s;
248 |
249 | &:hover,
250 | &:focus {
251 | border: 1px solid $accent-color-purple;
252 | background: $tertiary-dark;
253 | }
254 |
255 | @media screen and (max-width: 1199px) {
256 | margin-right: 20px;
257 | }
258 | }
259 |
260 | .fontsize-selector {
261 | @extend .language-selector;
262 | font-weight: 700;
263 |
264 | option {
265 | padding: 5px 10px;
266 | }
267 | }
268 |
269 | .logged-in-user-menu {
270 | position: relative;
271 |
272 | .logged-in-user-box {
273 | font-size: 1.142rem;
274 | font-weight: 600;
275 | background: $overlay-dark;
276 | color: $primary-light;
277 | border-radius: 5px;
278 | padding: 5px 20px;
279 | cursor: pointer;
280 | }
281 |
282 | .floating-menu {
283 | position: absolute;
284 | width: 100%;
285 | bottom: -6rem;
286 | left: 0;
287 | background: $overlay-dark;
288 | border-radius: 5px;
289 | padding: 10px 15px;
290 | font-size: 1rem;
291 | z-index: 10000;
292 | color: $primary-light;
293 |
294 | &--hidden {
295 | display: none;
296 | }
297 |
298 | a,
299 | button {
300 | cursor: pointer;
301 | color: $primary-light;
302 | }
303 |
304 | &__option {
305 | display: flex;
306 | align-items: center;
307 |
308 | &:hover {
309 | color: $accent-color-green;
310 | }
311 | }
312 | }
313 | }
314 |
315 | @media screen and (max-width: 1199px) {
316 | .save-button-container {
317 | input {
318 | width: 125px;
319 |
320 | &:focus-visible {
321 | width: 200px;
322 | }
323 | }
324 | }
325 | }
326 |
327 | @media screen and (max-width: 991px) {
328 | padding: 0 20px;
329 |
330 | .cm-logo {
331 | height: 15px;
332 | }
333 |
334 | &__option {
335 | font-size: 0.857rem;
336 | padding: 0.5rem;
337 |
338 | &__icon {
339 | height: 15px;
340 | }
341 | }
342 |
343 | .language-selector {
344 | font-size: 0.857rem;
345 | }
346 |
347 | .logged-in-user-menu {
348 | .logged-in-user-box {
349 | font-size: 0.857rem;
350 | }
351 |
352 | .floating-menu {
353 | font-size: 0.7857rem;
354 | }
355 | }
356 |
357 | .save-button-container {
358 | input {
359 | width: 75px;
360 |
361 | &:focus-visible {
362 | width: 125px;
363 | }
364 | }
365 | }
366 | }
367 | }
368 |
369 | .run-button__container {
370 | position: fixed;
371 | bottom: calc(1.5rem + 60px);
372 | right: calc(3rem + 60px);
373 | transition: all 0.75s;
374 |
375 | .run-button {
376 | display: flex;
377 | align-items: center;
378 | justify-content: center;
379 | height: 60px;
380 | width: 60px;
381 | border-radius: 50px;
382 | cursor: pointer;
383 | padding: 20px;
384 | position: absolute;
385 | top: 0;
386 | left: 0;
387 | transition: all 0.75s;
388 |
389 | img {
390 | width: 100%;
391 | margin-right: -5px;
392 | }
393 |
394 | &--run-code {
395 | background: $button-gradient;
396 | border: solid 1px $button-gradient;
397 | background-size: 200% 200%;
398 |
399 | &:hover {
400 | animation: button-gradient 3s infinite;
401 | }
402 | }
403 |
404 | &--success {
405 | background: $accent-color-green;
406 | border: solid 1px $accent-color-green;
407 | }
408 |
409 | &--error {
410 | background: #e6bf12;
411 | border: solid 1px #e6bf12;
412 | }
413 | }
414 |
415 | .ring-animation {
416 | position: absolute;
417 | visibility: visible;
418 | opacity: 1;
419 | transition: all 0.25s;
420 |
421 | &--small {
422 | top: -5px;
423 | left: -5px;
424 | }
425 |
426 | &--large {
427 | top: -12.5px;
428 | left: -12.5px;
429 | display: none;
430 | }
431 |
432 | circle {
433 | animation: rotate 5s linear infinite;
434 | fill: transparent;
435 | stroke: $accent-color-green;
436 | stroke-width: 4;
437 | stroke-dasharray: 250;
438 | stroke-dashoffset: 1000;
439 | }
440 |
441 | @keyframes rotate {
442 | to {
443 | stroke-dashoffset: 0;
444 | }
445 | }
446 | }
447 |
448 | @media screen and (max-width: 991px) {
449 | right: calc(2rem + 60px);
450 | }
451 | }
452 |
453 | .main-container {
454 | height: calc(100vh - 60px);
455 | position: relative;
456 | flex: 1;
457 |
458 | .ide-section {
459 | flex: 1;
460 | width: 60%;
461 | max-width: calc(100vw - 30px);
462 | }
463 |
464 | .io-section {
465 | border-left: solid 1px $tertiary-dark;
466 | width: 40%;
467 | max-width: 500px;
468 | position: relative;
469 | transition: all 0.75s;
470 |
471 | &--hidden {
472 | width: 30px !important;
473 | overflow: hidden;
474 |
475 | * {
476 | visibility: hidden;
477 | }
478 | }
479 |
480 | &--hidden ~ .run-button__container {
481 | bottom: calc(3rem + 60px);
482 |
483 | .run-button {
484 | transform: scale(125%);
485 | }
486 |
487 | .ring-animation {
488 | &--large {
489 | display: block;
490 | }
491 |
492 | &--small {
493 | display: none;
494 | }
495 | }
496 | }
497 |
498 | &--hidden ~ .ide-section {
499 | width: calc(100vw - 30px);
500 | }
501 |
502 | &--hidden ~ .open-io-button {
503 | background: $accent-color-green;
504 | right: calc(3rem - 10px);
505 |
506 | .open-io-button__icon {
507 | transform: rotate(180deg);
508 | }
509 | }
510 |
511 | .saved-list-section {
512 | padding: 30px;
513 | position: relative;
514 |
515 | .table-container {
516 | max-height: 55%;
517 | overflow: auto;
518 | }
519 |
520 | table {
521 | width: 100%;
522 | table-layout: fixed;
523 |
524 | .main-key {
525 | width: 40%;
526 | }
527 |
528 | .sub-key {
529 | width: 30%;
530 | }
531 |
532 | tr {
533 | td {
534 | white-space: nowrap;
535 | overflow: hidden;
536 | text-overflow: ellipsis;
537 | }
538 |
539 | &:hover {
540 | td {
541 | color: $accent-color-green;
542 | }
543 | }
544 | }
545 | }
546 |
547 | &__navigation {
548 | position: absolute;
549 | bottom: 30px;
550 | left: 30px;
551 | font-size: 1rem;
552 |
553 | .savelist-pagination-buttons {
554 | font-weight: 600;
555 |
556 | &:hover {
557 | color: $accent-color-green;
558 | cursor: pointer;
559 | }
560 | }
561 | }
562 |
563 | @media screen and (max-width: 991px) {
564 | padding: 20px;
565 |
566 | &__navigation {
567 | font-size: 0.785rem;
568 | }
569 |
570 | table {
571 | thead {
572 | font-size: 0.857rem;
573 | }
574 |
575 | tbody {
576 | font-size: 0.785rem;
577 | }
578 |
579 | .main-key {
580 | width: 35%;
581 | }
582 |
583 | .sub-key {
584 | width: 32.5%;
585 | }
586 | }
587 | }
588 | }
589 |
590 | .io-header {
591 | font-size: 1.142rem;
592 | font-weight: 700;
593 | }
594 |
595 | @media screen and (max-width: 991px) {
596 | &--hidden ~ .open-io-button {
597 | right: calc(2rem - 10px);
598 | }
599 |
600 | .io-header {
601 | font-size: 1rem;
602 | }
603 | }
604 | }
605 |
606 | .io-box {
607 | max-height: 100vh;
608 | textarea {
609 | background: $primary-dark;
610 | width: 100%;
611 | height: 80%;
612 | border: none;
613 | resize: none;
614 | appearance: none;
615 | color: $primary-light;
616 | transition: padding 0.25s;
617 |
618 | &:focus {
619 | border: solid 1px $tertiary-dark !important;
620 | outline: 0 none !important;
621 | box-shadow: 0 0 5px rgba($color: $accent-color-green, $alpha: 1) inset !important;
622 | border-radius: 5px;
623 | padding: 20px;
624 | }
625 | }
626 |
627 | .input-box {
628 | padding: 30px;
629 | border-bottom: solid 1px $tertiary-dark;
630 | height: 50%;
631 | overflow: auto;
632 | }
633 |
634 | .output-box {
635 | padding: 30px;
636 | background: $primary-dark;
637 | height: 50%;
638 | overflow: auto;
639 | }
640 |
641 | pre {
642 | color: $primary-light;
643 | }
644 |
645 | @media screen and (max-width: 991px) {
646 | .input-box {
647 | padding: 20px;
648 | }
649 |
650 | .output-box {
651 | padding: 20px;
652 | }
653 | }
654 | }
655 |
656 | .io-navigation {
657 | display: flex;
658 | align-items: center;
659 | font-size: 1.25rem;
660 | background: $tertiary-dark;
661 | width: 100%;
662 |
663 | & .tab {
664 | cursor: pointer;
665 | display: flex;
666 | align-items: center;
667 | padding: 15px 25px;
668 |
669 | &:hover,
670 | &.active {
671 | background: $primary-dark;
672 | }
673 | }
674 | }
675 |
676 | .open-io-button {
677 | cursor: pointer;
678 | font-weight: bold;
679 | position: absolute;
680 | top: 20px;
681 | right: 3rem;
682 | height: 40px;
683 | width: 40px;
684 | border-radius: 50%;
685 | display: flex;
686 | align-items: center;
687 | justify-content: center;
688 | z-index: 100;
689 | border: 1px solid $accent-color-green;
690 | transition: all 0.75s;
691 |
692 | &__icon {
693 | transition: all 0.75s;
694 | }
695 |
696 | @media screen and (max-width: 991px) {
697 | right: 2rem;
698 | top: 10px;
699 | }
700 | }
701 | }
702 |
703 | .overlay {
704 | height: 100vh;
705 | width: 100vw;
706 | position: fixed;
707 | top: 0;
708 | left: 0;
709 | z-index: 500;
710 | background: rgba($color: #363a43, $alpha: 0.6);
711 | display: flex;
712 | align-items: center;
713 | justify-content: center;
714 |
715 | &--hidden {
716 | display: none;
717 | }
718 |
719 | &__modal {
720 | height: fit-content;
721 | max-height: 80%;
722 | overflow: auto;
723 | width: 90vw;
724 | max-width: 500px;
725 | background: $primary-dark;
726 | border-radius: 10px;
727 | padding: 50px 30px;
728 | display: flex;
729 | justify-content: center;
730 | align-items: center;
731 | position: relative;
732 |
733 | &__close-button {
734 | position: absolute;
735 | top: 30px;
736 | right: 30px;
737 | cursor: pointer;
738 | }
739 |
740 | .w-100 {
741 | text-align: center;
742 | }
743 |
744 | &__title {
745 | color: $primary-light;
746 | font-weight: 700;
747 | font-size: 1.285rem;
748 | }
749 |
750 | &__divider {
751 | background-color: $tertiary-dark;
752 | margin: 30px 0;
753 | height: 1px;
754 | width: 100%;
755 | }
756 | }
757 | }
758 |
759 | .login-card {
760 | padding: 0.75rem 1.5rem;
761 | font-weight: 700;
762 | font-size: 1.142rem;
763 | width: 60%;
764 | min-width: fit-content;
765 | color: $primary-light;
766 | border-radius: 5px;
767 | margin: 0 auto;
768 | cursor: pointer;
769 | transition: all 0.5s ease;
770 |
771 | &--google {
772 | background: $primary-light;
773 | color: $primary-dark;
774 | border: 1px solid $primary-light;
775 |
776 | &:hover {
777 | color: $primary-light;
778 | }
779 | }
780 |
781 | &--github {
782 | background: $secondary-color-green;
783 | border: 1px solid $secondary-color-green;
784 | }
785 |
786 | &--linkedin {
787 | background: #0077b5;
788 | border: 1px solid #0077b5;
789 | }
790 |
791 | &:hover {
792 | background: transparent;
793 | }
794 | }
795 | }
796 |
797 | .top-banner {
798 | // position: absolute;
799 | padding: 10px 30px;
800 | height: $banner-height;
801 | display: flex;
802 | width: 100%;
803 | align-items: center;
804 | justify-content: space-between;
805 | background-color: $banner-background;
806 | color: $primary-light;
807 |
808 | a {
809 | text-decoration: none;
810 | color: inherit;
811 | }
812 | }
813 |
814 | .top-banner .top-banner--cross {
815 | color: $primary-light;
816 | font-size: 20px;
817 | cursor: pointer;
818 | }
819 |
820 | .top-banner .banner--green-text {
821 | color: $accent-color-green;
822 | }
823 |
824 | .input-container {
825 | position: relative;
826 |
827 | .transparent-input {
828 | appearance: none;
829 | background: transparent;
830 | padding: 10px 40px 10px 20px;
831 | border-radius: 50px;
832 | border: 1px solid $tertiary-dark;
833 | color: $tertiary-light;
834 |
835 | &:focus-visible {
836 | outline: unset;
837 | }
838 |
839 | &::placeholder {
840 | opacity: 1;
841 | color: $tertiary-light;
842 | }
843 |
844 | // &::after {
845 | // content: url(https://minio.codingminutes.com/assets/search.svg);
846 | // position: absolute;
847 | // right: 30px;
848 | // top: 0;
849 | // }
850 | }
851 |
852 | &__icon {
853 | position: absolute;
854 | right: 15px;
855 | top: 7.5px;
856 | }
857 | }
858 |
859 | .savelist-pagination-buttons {
860 | color: white;
861 | }
862 |
863 | .toast {
864 | position: absolute;
865 | bottom: -100px;
866 | left: 45vw;
867 |
868 | min-height: 30px;
869 | min-width: 10vw;
870 |
871 | border-radius: 10px;
872 | background: $button-gradient;
873 | background-size: 200% 200%;
874 | color: white;
875 | padding: 10px 20px;
876 | text-align: center;
877 | z-index: 1000;
878 |
879 | transition: all 0.5s ease-in-out;
880 |
881 | &:hover {
882 | animation: button-gradient 3s ease infinite;
883 | }
884 |
885 | &.active {
886 | bottom: 20px;
887 | }
888 | }
889 |
890 | // REUSE LATER
891 |
892 | // .language-selector {
893 | // padding: 10px 20px;
894 | // border: 1px solid $accent-color-green;
895 | // font-weight: 500;
896 | // border-radius: 5px;
897 | // cursor: pointer;
898 | // position: absolute;
899 | // right: 5rem;
900 | // top: calc(1.5rem + 2px);
901 | // min-width: 150px;
902 |
903 | // &__active {
904 | // text-align: center;
905 | // font-weight: bold;
906 | // }
907 |
908 | // &__content {
909 | // height: 0;
910 | // transition: all 0.25s;
911 |
912 | // &__item {
913 | // display: none;
914 | // }
915 | // }
916 |
917 | // &:hover,
918 | // &:active,
919 | // &:focus-within,
920 | // &:focus,
921 | // &:focus-visible {
922 | // background: $tertiary-dark;
923 | // border: solid 1px $accent-color-pink;
924 | // padding: 10px 20px;
925 |
926 | // .language-selector__content {
927 | // height: 150px;
928 | // padding-top: 15px;
929 | // overflow: auto;
930 |
931 | // scrollbar-width: none;
932 |
933 | // &::-webkit-scrollbar {
934 | // display: none;
935 | // }
936 |
937 | // &__item {
938 | // display: block;
939 |
940 | // &:hover {
941 | // color: $accent-color-green;
942 | // }
943 | // }
944 | // }
945 | // }
946 | // }
947 |
--------------------------------------------------------------------------------
101 |
206 |
102 |
205 |
103 |
104 |
109 |
110 |
111 | 
140 | New
141 |
142 |
143 |
152 |
109 |
110 |
111 |
112 |
113 |
128 |
129 |
130 |
136 |
140 | New
141 |
142 |
143 |
144 | 
148 | Copy Code
149 |
150 | {/*
148 | Copy Code
149 | Share
*/}
151 |
153 |
204 |
157 |
197 | )}
198 | {!isLoggedIn && (
199 |
202 | )}
203 |
161 |
165 | {isMenuOpen && (
166 |
162 | Hi, {user.first_name} {user.last_name}
163 |
164 |
167 | {activePanel != SAVELIST_PANEL && (
168 | changePanel(SAVELIST_PANEL)}
171 | >
172 | 
176 |
195 | )}
196 |
176 | Saved Codes
177 |
178 | )}
179 | {activePanel != IO_PANEL && (
180 | changePanel(IO_PANEL)}
183 | >
184 | I/O Pane
185 |
186 | )}
187 |
194 |