Added Raw code editor path for writing to database rawly main

Browse Source
This commit is contained in:
Nikolaj Frey 2024-04-30 19:27:42 +10:00
parent 7bfc88ea26
commit 131416f65d
10 changed files with 204 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
remix/app/Providers/Chakra/space.tsx
View File

@ -1,10 +1,12 @@
const spaceObj = {} const spaceObj = {};
const start = 0 const start = 0;
const end = 9999 const end = 9999;
for (let i = start; i <= end; i++) { for (let i = start; i <= end; i++) {
spaceObj[i] = `${i * 0.25}rem` spaceObj[i] = `${i * 0.25}rem`;
} }
export const space = spaceObj spaceObj['container'] = '700px';
export const space = spaceObj;

137
remix/app/Providers/Chakra/theme.tsx
View File

@ -6,58 +6,59 @@ import {
NumberInputField, NumberInputField,
NumberInputStepper, NumberInputStepper,
Select, Select,
Switch, Switch
} from "@chakra-ui/react" } from '@chakra-ui/react';
import { colors } from "./colors" import { colors } from './colors';
import { space } from "./space" import { space } from './space';
export const theme = extendTheme({ export const theme = extendTheme({
colors, colors,
// edit Input defaultProps // edit Input defaultProps
space, space,
sizes: space,
styles: { styles: {
global: { global: {
// make all elements padding and margin animate // make all elements padding and margin animate
"*": { '*': {
transition: "padding 0.2s ease, margin 0.2s ease-out", transition: 'padding 0.2s ease, margin 0.2s ease-out'
}, },
// make all elements have a transparent focus border // make all elements have a transparent focus border
"input:focus": { 'input:focus': {
boxShadow: "none !important", boxShadow: 'none !important',
borderColor: "transparent !important", borderColor: 'transparent !important'
}, },
// make all elements have a transparent focus border // make all elements have a transparent focus border
"textarea:focus": { 'textarea:focus': {
boxShadow: "none !important", boxShadow: 'none !important',
borderColor: "transparent !important", borderColor: 'transparent !important'
}, },
// make all elements have a transparent focus border // make all elements have a transparent focus border
"select:focus": { 'select:focus': {
boxShadow: "none !important", boxShadow: 'none !important',
borderColor: "transparent !important", borderColor: 'transparent !important'
}, },
// make all elements have a transparent focus border // make all elements have a transparent focus border
"button:focus": { 'button:focus': {
boxShadow: "none !important", boxShadow: 'none !important',
borderColor: "transparent !important", borderColor: 'transparent !important'
}, },
// make all elements have a transparent focus border // make all elements have a transparent focus border
"div:focus": { 'div:focus': {
boxShadow: "none !important", boxShadow: 'none !important',
borderColor: "transparent !important", borderColor: 'transparent !important'
}, },
// make all elements have a transparent focus border // make all elements have a transparent focus border
"a:focus": { 'a:focus': {
boxShadow: "none !important", boxShadow: 'none !important',
borderColor: "transparent !important", borderColor: 'transparent !important'
}, },
// make all elements have a transparent focus border // make all elements have a transparent focus border
"span:focus": { 'span:focus': {
boxShadow: "none !important", boxShadow: 'none !important',
borderColor: "transparent !important", borderColor: 'transparent !important'
}, }
}, }
}, },
components: { components: {
Input: { Input: {
@ -70,8 +71,8 @@ export const theme = extendTheme({
// "padding-inline-start": "0px", // "padding-inline-start": "0px",
field: { field: {
// "padding-inline-start": "0px", // "padding-inline-start": "0px",
}, }
}, }
}, },
Select: { Select: {
baseStyle: { baseStyle: {
@ -80,73 +81,73 @@ export const theme = extendTheme({
}, },
icon: { icon: {
// height: "8px", // height: "8px",
width: "14px", width: '14px'
}, }
}, }
}, },
Switch: { Switch: {
baseStyle: { baseStyle: {
track: { track: {
background: "grays.medium", background: 'grays.medium',
_checked: { _checked: {
background: "chakras.throat", background: 'chakras.throat'
}, }
}, }
}, }
}, },
NumberInput: { NumberInput: {
baseStyle: { baseStyle: {
field: { field: {
width: "auto", width: 'auto'
// border: "none", // border: "none",
}, }
}, }
}, }
}, }
}) });
Switch.defaultProps = { Switch.defaultProps = {
...Switch.defaultProps, ...Switch.defaultProps,
as: "div", as: 'div'
} };
Select.defaultProps = { Select.defaultProps = {
...Select.defaultProps, ...Select.defaultProps,
focusBorderColor: "transparent", focusBorderColor: 'transparent',
outline: "0px solid", outline: '0px solid',
border: "none", border: 'none',
ps: "0px", ps: '0px',
px: "0px", px: '0px',
sx: { sx: {
paddingInlineStart: "0px", paddingInlineStart: '0px',
paddingInlineEnd: "24px", paddingInlineEnd: '24px'
}, }
} };
NumberInput.defaultProps = { NumberInput.defaultProps = {
...NumberInput.defaultProps, ...NumberInput.defaultProps,
variant: "unstyled", variant: 'unstyled'
} };
NumberInputField.defaultProps = { NumberInputField.defaultProps = {
...NumberInputField.defaultProps, ...NumberInputField.defaultProps,
height: "100%", height: '100%',
pr: 3, pr: 3,
fontSize: "inherit", fontSize: 'inherit'
// variant: "unstyled", // variant: "unstyled",
} };
NumberInputStepper.defaultProps = { NumberInputStepper.defaultProps = {
...NumberInputStepper.defaultProps, ...NumberInputStepper.defaultProps,
border: "none", border: 'none',
color: "grays.medium", color: 'grays.medium'
} };
NumberIncrementStepper.defaultProps = { NumberIncrementStepper.defaultProps = {
...NumberIncrementStepper.defaultProps, ...NumberIncrementStepper.defaultProps,
border: "none", border: 'none'
} };
NumberDecrementStepper.defaultProps = { NumberDecrementStepper.defaultProps = {
...NumberDecrementStepper.defaultProps, ...NumberDecrementStepper.defaultProps,
border: "none", border: 'none'
} };

6
remix/app/api/utils/checkUserExists.ts → remix/app/api/utils/userCheckExists.ts
View File

@ -1,15 +1,15 @@
// query mongodb for user objects with the email provided // query mongodb for user objects with the username provided
// if user exists, return true // if user exists, return true
// if user does not exist, return false // if user does not exist, return false
import { createConnection } from './mongodb/connection'; import { createConnection } from './mongodb/connection';
export const checkUserExists = async ({ email }) => { export const userCheckExists = async ({ username }) => {
const client = await createConnection(); const client = await createConnection();
const db = client.db('auth'); const db = client.db('auth');
const collection = db.collection('users'); const collection = db.collection('users');
const user = await collection.findOne({ email }); const user = await collection.findOne({ username });
if (user) { if (user) {
return true; return true;

31
remix/app/api/utils/userValidatePassword.ts Normal file
View File

@ -0,0 +1,31 @@
// query mongodb for user objects with the username provided
// if user exists, return true
// if user does not exist, return false
import { createConnection } from './mongodb/connection';
import bcrypt from 'bcrypt';
export const userValidatePassword = async ({ username, password }) => {
const client = await createConnection();
const db = client.db('auth');
const collection = db.collection('users');
const user = await collection.findOne({ username });
if (!user) {
return false;
}
const { password: hash } = user;
const match = await bcrypt.compare(password, hash);
if (match) {
return true;
}
return false;
}

33
remix/app/components/Layout/Main.tsx
View File

@ -1,30 +1,41 @@
import { Box, Flex } from "@chakra-ui/react" import { Box, Flex } from '@chakra-ui/react';
import { Footer } from "../Nav/Footer" import { Footer } from '../Nav/Footer';
import { Nav } from "../Nav/Nav" import { Nav } from '../Nav/Nav';
import { ProfileDrawer } from "../Nav/ProfileDrawer" import { ProfileDrawer } from '../Nav/ProfileDrawer';
export const Main = (props) => { export const Main = (props) => {
return ( return (
<Flex <Flex
sx={{ sx={{
"*": { '*': {
whiteSpace: "pre-wrap", whiteSpace: 'pre-wrap'
}, }
}} }}
position="relative" position="relative"
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
flexDirection="column" flexDirection="column"
overflow="hidden" overflow="hidden"
width="100%"
minH="100vh"
maxWidth="100vw" maxWidth="100vw"
> >
{/* <ProfileDrawer></ProfileDrawer> */} {/* <ProfileDrawer></ProfileDrawer> */}
<Nav /> <Nav />
<Box width="100%" minHeight="100vh"> <Flex
position="relative"
alignItems="center"
justifyContent="center"
flexDirection="column"
overflow="hidden"
width="100%"
minH="100vh"
maxWidth="100vw"
>
{props.children} {props.children}
</Box> </Flex>
<Footer></Footer> <Footer></Footer>
</Flex> </Flex>
) );
} };

28
remix/app/components/MongoDB/Raw.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Suspense, useState } from 'react';
import { useThingtime } from '../Thingtime/useThingtime';
import { Flex, Heading, Box } from '@chakra-ui/react';
import Editor from '@monaco-editor/react';
export const Raw = () => {
const { thingtime } = useThingtime();
const [rawValue, setRawValue] = useState(thingtime?.rawValue || '// Raw');
return (
<Flex w="100%" position="relative" minH="50vh" maxW="container" flexDir={'column'}>
<Heading size="sm" pb={8}>
Raw
</Heading>
{/* only on client side render editor */}
<Suspense fallback={<div>Loading...</div>}>
{/* {editor} */}
<Flex flexGrow={1} position="relative">
<Box pos={'absolute'} top={'0'} left={'0'} right={'0'} bottom={'0'}>
<Editor defaultLanguage="javascript" defaultValue={rawValue}></Editor>;
</Box>
</Flex>
</Suspense>
</Flex>
);
};

25
remix/app/components/Thingtime/ThingtimeURL.tsx
View File

@ -84,36 +84,15 @@ export const ThingtimeURL = (props) => {
return ( return (
<Flex <Flex
ref={containerRef} ref={containerRef}
// position="sticky"
position="relative" position="relative"
alignItems={inEditorMode ? 'flex-start' : 'center'} alignItems={inEditorMode ? 'flex-start' : 'center'}
justifyContent="center" justifyContent="center"
// overflow="scroll"
// height="auto"
flexDirection={inEditorMode ? 'row' : 'column'} flexDirection={inEditorMode ? 'row' : 'column'}
maxWidth="100%" maxWidth="100%"
// maxHeight="100vh"
> >
{inEditorMode && ( {inEditorMode && (
<Box <Box ref={editorRef} position="relative" overflow="scroll" width="container" maxHeight="100vh">
ref={editorRef} <Thingtime path={path} thing={thing} render chakras={{ marginY: '200px' }}></Thingtime>
position="relative"
// position="sticky"
// top={200}
// alignSelf="flex-start"
overflow="scroll"
width="600px"
// width="100%"
maxHeight="100vh"
// paddingY={2}
>
<Thingtime
path={path}
thing={thing}
render
chakras={{ marginY: '200px' }}
// width="600px"
></Thingtime>
</Box> </Box>
)} )}
<Thingtime edit={inEditMode} path={path} thing={thing} chakras={{ marginY: '200px' }} width="600px"></Thingtime> <Thingtime edit={inEditMode} path={path} thing={thing} chakras={{ marginY: '200px' }} width="600px"></Thingtime>

43
remix/app/routes/api/v1/login/_login.tsx
View File

@ -1,34 +1,49 @@
import { checkUserExists } from "~/api/utils/checkUserExists"; import { userCheckExists } from '~/api/utils/userCheckExists';
import { userValidatePassword } from '~/api/utils/userValidatePassword';
export default function Index() { export default function Index() {
return <div>Login</div>; return <div>Login</div>;
} }
export const action = async ({ request }) => { export const action = async ({ request }) => {
console.log('nik request', request); console.log('nik request', request);
// get remix action body // get remix action body
const body = await request.json(); const body = await request.json();
const { username, password } = body; const { username, password } = body;
console.log('nik body', body) console.log('nik body', body);
console.log('nik username', username); console.log('nik username', username);
console.log('nik password', password); console.log('nik password', password);
const userExists = userCheckExists(username);
if (!userExists) {
// validate password
return earlyReturn({ status: 401, message: 'User does not exist' });
}
// validate password
const passwordMatches = userValidatePassword({ username, password });
if (!passwordMatches) {
return earlyReturn({ status: 401, message: 'Password does not match' });
}
return earlyReturn({ status: 200, message: 'Login successful' });
};
const earlyReturn = (args) => {
return { return {
status: 200, status: args?.status || 200,
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: { body: {
message: 'Hello, World!', message: 'Early return triggered in login action' + (args?.message ? `: ${args.message}` : '')
username,
password
}, },
cache: { cache: {
revalidate: 60 revalidate: 60

11
remix/app/routes/raw.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Raw } from '~/components/MongoDB/Raw';
export default function login() {
const template = (
<>
<Raw></Raw>
</>
);
return template;
}

2
remix/package.json
View File

@ -16,12 +16,14 @@
"@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.0",
"@monaco-editor/react": "^4.6.0",
"@remix-run/node": "^2.8.1", "@remix-run/node": "^2.8.1",
"@remix-run/react": "^2.8.1", "@remix-run/react": "^2.8.1",
"@remix-run/serve": "^2.8.1", "@remix-run/serve": "^2.8.1",
"@vercel/analytics": "^0.1.11", "@vercel/analytics": "^0.1.11",
"@vercel/remix": "^1.15.0", "@vercel/remix": "^1.15.0",
"axios": "^1.6.8", "axios": "^1.6.8",
"bcrypt": "^5.1.1",
"draft-js": "^0.11.7", "draft-js": "^0.11.7",
"emojis-list": "^3.0.0", "emojis-list": "^3.0.0",
"emotion": "^11.0.0", "emotion": "^11.0.0",