olly/codebox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new snippet

Browse Source
This commit is contained in:
Olly Hearn
2023-05-27 02:25:02 +03:00
parent 0053f57d52
commit 0932458d41
9 changed files with 164 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/app/backend/settings.py
View File

@ -25,7 +25,7 @@ SECRET_KEY = "django-insecure-o27968vc7m@z*=+$ykqo!b2v+ycc)r2^d8u=)ee)gi5bas-+wm
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = ['ovz1.ollyhearn.gmzem.vps.myjino.ru']
ALLOWED_HOSTS = ['ovz1.ollyhearn.gmzem.vps.myjino.ru', 'localhost', '127.0.0.1']
# Application definition

2
docker-compose.yml
View File

@ -15,7 +15,7 @@ services:
ports:
- "3000"
environment:
- REACT_APP_DOMAIN=ovz1.ollyhearn.gmzem.vps.myjino.ru
- REACT_APP_DOMAIN=localhost
volumes:
- ./react/app:/app:z
# - ./docker_cache/node_modules:/app/node_modules

36
react/Dockerfile
View File

@ -1,17 +1,21 @@
# stage1 - build react app first
FROM node:20-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./app/package.json /app/
COPY ./app/yarn.lock /app/
RUN yarn
COPY /app /app
RUN yarn build
FROM node:20.1
# stage 2 - build the final image and copy the react build files
FROM nginx:1.25.0-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
ENV CI=true
ENV PORT=3000
ENV HOST=0.0.0.0
ENV WDS_SOCKET_PORT=0
ENV REACT_APP_DOMAIN=127.0.0.1
WORKDIR /app
COPY /app /app
# COPY package.json /app/package.json
# COPY package-lock.json /app/package-lock.json
# Same as npm install
RUN npm ci
# COPY . /app
#
RUN printenv
CMD [ "npm", "start" ]

34
react/app/src/App.js
View File

@ -5,25 +5,29 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { AuthProvider } from "./context/AuthContext";
import AuthPage from './pages/AuthPage'
import SnippetPage from './pages/SnippetPage'
import NewSnippet from './pages/NewSnippetPage'
function App() {
return (
return (
<Router>
<AuthProvider>
<Routes>
<Route path="/auth" element={<AuthPage />} />
<Route path="/" element={<div className="App">
<HomePage />
</div>} />
<Route path="/snippet/:id" element={<div className="App">
<SnippetPage />
</div>} />
</Routes>
</AuthProvider>
</Router>
<Router>
<AuthProvider>
<Routes>
<Route path="/auth" element={<AuthPage />} />
<Route path="/" element={<div className="App">
<HomePage />
</div>} />
<Route path="/snippet/:id" element={<div className="App">
<SnippetPage />
</div>} />
<Route path="/new-snippet" element={<div className="App">
<NewSnippet />
</div>} />
</Routes>
</AuthProvider>
</Router>
);
);
}
export default App;

5
react/app/src/components/Header.jsx
View File

@ -17,10 +17,11 @@ import {
} from 'mdb-react-ui-kit';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
import "@fortawesome/fontawesome-free/css/all.min.css";
import { Link } from 'react-router-dom';
import { Link, useLocation } from 'react-router-dom';
import AuthContext from "../context/AuthContext";
export default function App() {
const location = useLocation();
const [showBasic, setShowBasic] = useState(false);
const { user, logoutUser } = useContext(AuthContext);
@ -69,7 +70,7 @@ export default function App() {
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink disabled={user && false} href='#' tabIndex={-1} aria-disabled='true' background='#3b71ca'>
<MDBNavbarLink disabled={user && false} href='/new-snippet' tabIndex={-1} aria-disabled='true' background='#3b71ca'>
New snippet
</MDBNavbarLink>
</MDBNavbarItem>

86
react/app/src/components/NewSnippet.jsx Normal file
View File

@ -0,0 +1,86 @@
import React, { useContext, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
MDBInput,
} from 'mdb-react-ui-kit';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
import "@fortawesome/fontawesome-free/css/all.min.css";
import AuthContext from "../context/AuthContext";
import MonacoEditor from 'react-monaco-editor';
const NewSnippet = () => {
const { authTokens } = useContext(AuthContext);
const navigate = useNavigate();
const [ snippetContent, setSnippetContent ] = useState("");
const [ snippetTitle, setSnippetTitle ] = useState("");
const saveSnippet = async () => {
const response = await fetch(`http://${process.env.REACT_APP_DOMAIN}/api/snippets/`, {
method: "POST",
headers: {
"Authorization": `Bearer ${authTokens.access}`,
"Content-Type": "application/json"
},
body: JSON.stringify({ "content": snippetContent, "title": snippetTitle })
});
const data = await response.json();
if (response.status === 201) {
alert("Snippet created!")
navigate(`/snippet/${data?.id}`)
} else {
alert(`Error updating snippet: ${data?.detail}`)
}
};
const options = {
autoIndent: 'full',
contextmenu: true,
fontFamily: 'monospace',
fontSize: 13,
lineHeight: 24,
hideCursorInOverviewRuler: true,
matchBrackets: 'always',
minimap: {
enabled: true,
},
scrollbar: {
horizontalSliderSize: 4,
verticalSliderSize: 18,
},
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
cursorStyle: 'line',
automaticLayout: true,
};
return (
<>
<MDBCard>
<MDBCardBody>
<MDBInput type="text" placeholder='Your snippet title..' value={snippetTitle} onChange={(e) => setSnippetTitle(e.target.value)}/>
</MDBCardBody>
</MDBCard>
<div style={{textAlign: "left", height: "80vh"}}>
<MonacoEditor
height="80vh"
options={options}
value={snippetContent}
onChange={setSnippetContent}
/>
<MDBBtn className="mb-4 w-100" onClick={saveSnippet}>Create</MDBBtn>
</div>
</>
);
}
export default NewSnippet;

25
react/app/src/components/Snippet.jsx
View File

@ -11,9 +11,10 @@ import "@fortawesome/fontawesome-free/css/all.min.css";
import AuthContext from "../context/AuthContext";
import MonacoEditor from 'react-monaco-editor';
const Snippet = ({ id }) => {
const Snippet = ({ id = 0 }) => {
const { authTokens } = useContext(AuthContext);
const [ snippet, setSnippet ] = useState("");
const [ snippet, setSnippet ] = useState(null);
const [ snippetContent, setSnippetContent ] = useState("");
const getSnippet = async (id) => {
const response = await fetch(`http://${process.env.REACT_APP_DOMAIN}/api/snippets/${id}`, {
method: "GET",
@ -26,18 +27,20 @@ const Snippet = ({ id }) => {
if (response.status === 200) {
console.log(data)
setSnippet(data)
setSnippetContent(data?.content)
} else {
console.log(data, authTokens)
}
};
const updateSnippet = async (id, snippet) => {
const updateSnippet = async () => {
console.log(snippet, snippetContent);
const response = await fetch(`http://${process.env.REACT_APP_DOMAIN}/api/snippets/${id}`, {
method: "POST",
method: "PATCH",
headers: {
"Authorization": `Bearer ${authTokens.access}`,
"Content-Type": "application/json"
},
body: snippet
body: JSON.stringify({...snippet, "content": snippetContent})
});
const data = await response.json();
@ -75,7 +78,7 @@ const Snippet = ({ id }) => {
};
return (
return snippet ? (
<>
<MDBCard>
<MDBCardBody>
@ -86,11 +89,19 @@ const Snippet = ({ id }) => {
<MonacoEditor
height="80vh"
options={options}
value={snippet.content}
value={snippetContent}
onChange={setSnippetContent}
/>
<MDBBtn className="mb-4 w-100" onClick={updateSnippet}>Save</MDBBtn>
</div>
</>
) : (
<MDBCard>
<MDBCardBody>
<MDBCardTitle>Snippet not found!</MDBCardTitle>
<MDBCardText>Create your own at New Snippet </MDBCardText>
</MDBCardBody>
</MDBCard>
);
}

6
react/app/src/context/AuthContext.jsx
View File

@ -40,8 +40,10 @@ export const AuthProvider = ({ children }) => {
setUser(jwt_decode(data.access));
localStorage.setItem("authTokens", JSON.stringify(data));
history("/");
} else {
alert(response.data?.message);
}
if (response.status === 401) {
alert("Given credentials invalid!")
}
};

12
react/app/src/pages/NewSnippetPage.jsx Normal file
View File

@ -0,0 +1,12 @@
import BasicPage from './BasicPage'
import NewSnippet from '../components/NewSnippet'
const NewSnippetPage = () => {
return (
<BasicPage style={{margin: "20%"}}>
<NewSnippet />
</BasicPage>
);
}
export default NewSnippetPage;