c4patino/qoverflow
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mdPreview component

Browse source
This commit is contained in:
tejusk2 2022-07-17 15:17:54 -05:00
commit 35ac179efd
10 changed files with 110 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

15
package-lock.json generated
View file

@ -17,6 +17,7 @@
"formik": "^2.2.9",
"gh-pages": "^4.0.0",
"javascript-time-ago": "^2.5.6",
"nvm": "^0.0.4",
"react": "^18.2.0",
"react-gravatar": "^2.6.3",
"react-markdown": "^8.0.3",
@ -12819,6 +12820,15 @@
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
"node_modules/nvm": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/nvm/-/nvm-0.0.4.tgz",
"integrity": "sha512-jvmyELykYcdyd0VCGY0E8Aqe5MngEasVvlPvrcJHbwBMUbVqa72mPdQuPzyTcykEtEx7jDrMY0QA5MoV+8EhgA==",
"deprecated": "This is NOT the correct nvm. Visit https://nvm.sh and use the curl command to install it.",
"bin": {
"nvm": "bin/nvm"
}
},
"node_modules/nwsapi": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.1.tgz",
@ -27419,6 +27429,11 @@
"boolbase": "^1.0.0"
}
},
"nvm": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/nvm/-/nvm-0.0.4.tgz",
"integrity": "sha512-jvmyELykYcdyd0VCGY0E8Aqe5MngEasVvlPvrcJHbwBMUbVqa72mPdQuPzyTcykEtEx7jDrMY0QA5MoV+8EhgA=="
},
"nwsapi": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.1.tgz",

1
package.json
View file

@ -13,6 +13,7 @@
"formik": "^2.2.9",
"gh-pages": "^4.0.0",
"javascript-time-ago": "^2.5.6",
"nvm": "^0.0.4",
"react": "^18.2.0",
"react-gravatar": "^2.6.3",
"react-markdown": "^8.0.3",

64
src/App.jsx
View file

@ -1,5 +1,5 @@
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { UserProvider, QuestionProvider } from 'contexts';
import { UserProvider, QuestionProvider, FormProvider } from './contexts';
import {
Ask,
Buffet,
@ -14,42 +14,48 @@ import {
Register,
Reset,
Search,
} from 'containers';
} from './containers';
export default function App() {
return (
<BrowserRouter basename=''>
<UserProvider>
<Routes>
<Route path='/' element={<Layout />}>
<Route index element={<Buffet />} />
<FormProvider>
<Routes>
<Route path='/' element={<Layout />}>
<Route index element={<Buffet />} />
<Route path='users'>
<Route path='login' element={<Login />} />
<Route path='register' element={<Register />} />
<Route path='recover'>
<Route index element={<ForgotPassword />} />
<Route path=':username' element={<Reset />} />
<Route path='users'>
<Route path='login' element={<Login />} />
<Route path='register' element={<Register />} />
<Route path='recover'>
<Route index element={<ForgotPassword />} />
<Route path=':username' element={<Reset />} />
</Route>
</Route>
<Route path='mail' element={<Mail />} />
<Route path='questions'>
<Route index element={<Questions />} />
<Route path='search' element={<Search />} />
<Route path='ask' element={<Ask />} />
{/* <QuestionProvider> */}
<Route path=':question_id' element={<QA />} />
{/* </QuestionProvider> */}
</Route>
<Route path='dashboard' element={<Dashboard />} />
<Route path='*' element={<NotFound />} />
</Route>
<Route path='mail' element={<Mail />} />
<Route path='questions'>
<Route index element={<Questions />} />
<Route path='search' element={<Search />} />
<Route path='ask' element={<Ask />} />
{/* <QuestionProvider> */}
<Route path=':question_id' element={<QA />} />
{/* </QuestionProvider> */}
</Route>
<Route path='dashboard' element={<Dashboard />} />
<Route path='*' element={<NotFound />} />
</Route>
</Routes>
</Routes>
</FormProvider>
</UserProvider>
</BrowserRouter>
);

27
src/components/MdPreview.jsx Normal file
View file

@ -0,0 +1,27 @@
import { useForm } from "contexts"
import { useState } from "react"
import ReactMarkdown from "react-markdown"
import {Paper, Typography, Button} from '@mui/material'
export default function MdPreview(){
const [preview, setPreview] = useState(false)
const {content} = useForm()
function handleClick(){
setPreview(!preview)
}
return(
<div>
<Button fullWidth
onClick = {handleClick}
type='submit'
variant='contained'
color='primary'
sx={{ mt: '1vh' }}>
Show Markdown Preview
</Button>
{preview ? <Paper variant = "outlined"><Typography variant = "h5"> Text Preview: </Typography><ReactMarkdown children={content}/></Paper> : null}
</div>
)
}

2
src/components/index.js
View file

@ -6,6 +6,7 @@ import Navbar from './Navbar';
import PaginationEngine from './PaginationEngine';
import PaginatedList from './PaginatedList';
import SearchBar from './SearchBar';
import MdPreview from './MdPreview';
export {
CreationInfoTag,
@ -16,4 +17,5 @@ export {
PaginationEngine,
PaginatedList,
SearchBar,
MdPreview
};

20
src/containers/Ask.jsx
View file

@ -1,17 +1,14 @@
<<<<<<< HEAD
import { Card, CardContent, Paper, Typography } from '@mui/material';
import { AskForm } from '../controllers';
import { AskForm } from '../controllers/FormControllers';
import ReactMarkdown from 'react-markdown';
import { useForm } from '../contexts/FormContext';
import { useForm } from '../contexts';
import {MdPreview} from 'components'
=======
import { Card, CardContent } from '@mui/material';
import { AskForm } from 'controllers/FormControllers';
>>>>>>> fb8023fcd79e9e1390e47f3ea4f22a605274b5a4
export default function Ask() {
const {content} = useForm()
@ -28,13 +25,12 @@ export default function Ask() {
<Card>
<CardContent>
<AskForm></AskForm>
<MdPreview/>
</CardContent>
</Card>
<Paper variant = "outlined">
<Typography variant = "h5"> Text Preview: </Typography>
<ReactMarkdown children={content}/>
</Paper>
</div>

2
src/containers/Login.jsx
View file

@ -1,6 +1,6 @@
import { Link, useLocation } from 'react-router-dom';
import { Card, CardContent, Grid, Typography, Alert } from '@mui/material';
import { LoginForm } from '../controllers';
import { LoginForm } from '../controllers/FormControllers';
export default function Login() {
let location = useLocation();

4
src/containers/Mail.jsx
View file

@ -1,12 +1,16 @@
import { Card, CardContent } from '@mui/material';
import React from 'react';
import { Inbox, SendMail } from 'controllers';
import ReactMarkdown from 'react-markdown';
import { useForm } from 'contexts';
import { MdPreview } from 'components';
export default function Mail() {
return (
<Card>
<CardContent>
<SendMail />
<MdPreview/>
</CardContent>
<CardContent>
<Inbox />

19
src/contexts/ContextProvider.jsx
View file

@ -1,22 +1,11 @@
<<<<<<< HEAD
import { QuestionProvider, UserProvider, FormProvider} from '.';
=======
import { UserProvider } from 'contexts';
>>>>>>> fb8023fcd79e9e1390e47f3ea4f22a605274b5a4
import { UserProvider, FormProvider } from '.';
export default function ContextProvider({ children }) {
return (
<UserProvider>
<<<<<<< HEAD
<QuestionProvider>
<FormProvider>
{children}
</FormProvider>
</QuestionProvider>
=======
{children}
>>>>>>> fb8023fcd79e9e1390e47f3ea4f22a605274b5a4
<FormProvider>
{children}
</FormProvider>
</UserProvider>
);
}

18
src/controllers/SendMailController.jsx
View file

@ -3,10 +3,26 @@ import { Form } from 'controllers/FormControllers';
import { composeMailFields } from 'services/fields';
import { postMail } from 'services/mailServices';
import { mailSchema } from 'services/schemas';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
export default function SendMailController() {
const { userData } = useUser();
const navigate = useNavigate();
useEffect(() => {
if(checkAuth()){
navigate('/users/login', {state: {name : 'ask', msg : 'you need to be authenticated to access this feature' , prevPath: '/ask'}})
}
}, []);
function checkAuth(){
if(!userData.username){
return true;
}
}
const sendMail = ({ reciever, subject, text }) =>
postMail(userData.username, reciever, subject, text);