rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #36 from learnhouse/feat/ui-refresh

Browse source 
Feat/UI refresh
This commit is contained in:
Badr B 2023-01-15 17:39:03 +01:00 • committed by GitHub
commit d7f1e6f94a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 3839 additions and 461 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -21,7 +21,6 @@ dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/

4
front/app/_orgs/[orgslug]/collections/new/page.tsx
View file

@ -57,7 +57,7 @@ function NewCollection(params : any) {
}, [params.params.orgslug]);
return (
<Layout>
<>
<Title>Add new</Title>
<br />
<input type="text" placeholder="Name" value={name} onChange={handleNameChange} />
@ -90,7 +90,7 @@ function NewCollection(params : any) {
<input type="text" placeholder="Description" value={description} onChange={handleDescriptionChange} />
<br />
<button onClick={handleSubmit}>Submit</button>
</Layout>
</>
);
}

4
front/app/_orgs/[orgslug]/collections/page.tsx
View file

@ -35,7 +35,7 @@ function Collections(params:any) {
}, []);
return (
<Layout>
<>
<Title>
{orgslug} Collections :{" "}
<Link href={"/collections/new"}>
@ -61,7 +61,7 @@ function Collections(params:any) {
))}
</div>
)}
</Layout>
</>
);
}

4
front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx
View file

@ -225,7 +225,7 @@ function CourseEdit(params: any) {
};
return (
<Layout>
<>
<Header></Header>
<Title>
Edit Course Chapters{" "}
@ -283,7 +283,7 @@ function CourseEdit(params: any) {
</DragDropContext>
</ChapterlistWrapper>
)}
</Layout>
</>
);
}

9
front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/edit/page.tsx
View file

@ -1,19 +1,14 @@
"use client";
import { default as React, useEffect, useRef } from "react";
import Layout from "../../../../../../../../components/UI/Layout";
import { Title } from "../../../../../../../../components/UI/Elements/Styles/Title";
import dynamic from "next/dynamic";
import { useRouter } from "next/navigation";
import { getElement } from "../../../../../../../../services/courses/elements";
import AuthProvider from "../../../../../../../../components/Security/AuthProvider";
import EditorWrapper from "../../../../../../../../components/Editor/EditorWrapper";
import { getCourseMetadata } from "../../../../../../../../services/courses/courses";
// Workaround (Next.js SSR doesn't support tip tap editor)
const Editor: any = dynamic(() => import("../../../../../../../../components/Editor/EditorWrapper") as any, {
ssr: false,
});
function EditElement(params: any) {
const router = useRouter();

129
front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx
View file

@ -1,50 +1,157 @@
"use client";
import { useRouter } from "next/navigation";
import Link from "next/link";
import React, { useMemo } from "react";
import Layout from "../../../../../../../components/UI/Layout";
import { getElement } from "../../../../../../../services/courses/elements";
import { getBackendUrl } from "../../../../../../../services/config";
import Canva from "../../../../../../../components/Canva/Canva";
import Canva from "../../../../../../../components/LectureViews/DynamicCanva/DynamicCanva";
import styled from "styled-components";
import { getCourse, getCourseMetadata } from "../../../../../../../services/courses/courses";
import VideoLecture from "@components/LectureViews/Video/Video";
function ElementPage(params: any) {
const router = useRouter();
const elementid = params.params.elementid;
const courseid = params.params.courseid;
const orgslug = params.params.orgslug;
const [element, setElement] = React.useState<any>({});
const [course, setCourse] = React.useState<any>({});
const [isLoading, setIsLoading] = React.useState(true);
async function fetchElementData() {
setIsLoading(true);
const element = await getElement("element_" + elementid);
setElement(element);
}
async function fetchCourseData() {
const course = await getCourseMetadata("course_" + courseid);
setCourse(course);
setIsLoading(false);
}
React.useEffect(() => {
if (elementid) {
fetchElementData();
fetchCourseData();
}
return () => {};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [elementid]);
return (
<Layout>
<>
{isLoading ? (
<div>Loading...</div>
) : (
<div>
<p>element</p>
<h1>{element.name} </h1>
<hr />
<LectureLayout>
<LectureTopWrapper>
<LectureThumbnail>
<Link href={`/org/${orgslug}/course/${courseid}`}>
<img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
</Link>
</LectureThumbnail>
<LectureInfo>
<p>Course</p>
<h1>{course.course.name}</h1>
</LectureInfo>
</LectureTopWrapper>
<ChaptersWrapper>
{course.chapters.map((chapter: any) => {
return (
<>
<div style={{ display: "flex", flexDirection: "row" }} key={chapter.chapter_id}>
{chapter.elements.map((element: any) => {
return (
<>
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
<ChapterIndicator key={element.id} />
</Link>{" "}
</>
);
})}
</div>
&nbsp;&nbsp;&nbsp;&nbsp;
</>
);
})}
</ChaptersWrapper>
<CourseContent>
{element.type == "dynamic" && <Canva content={element.content} element={element} />}
{/* todo : use apis & streams instead of this */}
{element.type == "video" && (
<video controls src={`${getBackendUrl()}content/uploads/video/${element.content.video.element_id}/${element.content.video.filename}`}></video>
{element.type == "video" && <VideoLecture course={course} element={element} />}
</CourseContent>
</LectureLayout>
)}
</div>
)}
</Layout>
</>
);
}
const LectureLayout = styled.div``;
const LectureThumbnail = styled.div`
padding-right: 30px;
justify-self: center;
img {
box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42);
border-radius: 7px;
width: 100px;
height: 57px;
}
`;
const LectureInfo = styled.div`
h1 {
margin-top: 0px;
}
p {
margin-top: 0;
margin-bottom: 0;
font-weight: 700;
}
`;
const ChaptersWrapper = styled.div`
display: flex;
// row
flex-direction: row;
justify-content: space-around;
width: 100%;
width: 1300px;
margin: 0 auto;
`;
const ChapterIndicator = styled.div`
border-radius: 20px;
height: 5px;
background: #151515;
border-radius: 3px;
width: 35px;
background-color: black;
margin: 10px;
margin-bottom: 0px;
margin-left: 0px;
transition: all 0.2s ease;
&:hover {
width: 50px;
cursor: pointer;
}
`;
const LectureTopWrapper = styled.div`
width: 1300px;
padding-top: 50px;
margin: 0 auto;
display: flex;
`;
const CourseContent = styled.div`
display: flex;
background-color: white;
min-height: 600px;
`;
export default ElementPage;

105
front/app/_orgs/[orgslug]/course/[courseid]/page.tsx
View file

@ -21,7 +21,6 @@ const CourseIdPage = (params : any) => {
setCourseInfo(course);
setIsLoading(false);
}
@ -34,7 +33,7 @@ const CourseIdPage = (params : any) => {
}, [courseid && orgslug]);
return (
<Layout>
<>
{isLoading ? (
<div>Loading...</div>
) : (
@ -43,30 +42,26 @@ const CourseIdPage = (params : any) => {
<p>Course</p>
<h1>
{courseInfo.course.name}{" "}
<Link
href={`/org/${orgslug}/course/${courseid}/edit`}
rel="noopener noreferrer">
<Link href={`/org/${orgslug}/course/${courseid}/edit`} rel="noopener noreferrer">
<Pencil2Icon />
</Link>{" "}
</h1>
<br />
<ChaptersWrapper>
{courseInfo.chapters.map((chapter: any) => {
return <>
return (
<>
{chapter.elements.map((element: any) => {
return <>
return (
<>
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
<ChapterIndicator />
</Link>{" "}
</>;
</>
);
})}
&nbsp;&nbsp;&nbsp;&nbsp;
</>;
</>
);
})}
</ChaptersWrapper>
@ -75,48 +70,54 @@ const CourseIdPage = (params : any) => {
</CourseThumbnailWrapper>
<h2>Description</h2>
<BoxWrapper>
<p>{courseInfo.course.description}</p>
</BoxWrapper>
<h2>What you will learn</h2>
<BoxWrapper>
<p>{courseInfo.course.learnings == ![] ? "no data" : courseInfo.course.learnings}</p>
</BoxWrapper>
<h2>Course Lessons</h2>
<BoxWrapper>
{courseInfo.chapters.map((chapter: any) => {
return <>
return (
<>
<h3>Chapter : {chapter.name}</h3>
{chapter.elements.map((element: any) => {
return <>
return (
<>
<p>
Element {element.name}
<Link
href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}
rel="noopener noreferrer">
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`} rel="noopener noreferrer">
<EyeOpenIcon />
</Link>{" "}
</p>
</>;
</>
);
})}
&nbsp;&nbsp;&nbsp;&nbsp;
</>;
</>
);
})}
</BoxWrapper>
</CoursePageLayout>
)}
</Layout>
</>
);
};
const CourseThumbnailWrapper = styled.div`
display: flex;
padding-bottom: 20px;
img {
width: 794px;
height: 224.28px;
width: 100%;
height: 300px;
object-fit: cover;
object-position: top;
object-position: center;
background: url(), #d9d9d9;
border: 1px solid rgba(255, 255, 255, 0.19);
box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42);
@ -124,21 +125,39 @@ const CourseThumbnailWrapper = styled.div`
}
`;
const CoursePageLayout = styled.div`
margin-left: 40px;
margin-right: 40px;
width: 1300px;
margin: 0 auto;
p {
margin-bottom: 0px;
letter-spacing: -0.05em;
color: #727272;
font-weight: 700;
}
h1 {
margin-top: 5px;
letter-spacing: -0.05em;
margin-bottom: 10px;
}
`;
const ChaptersWrapper = styled.div`
display: flex;
justify-content: space-around;
width: 100%;
`;
const ChapterIndicator = styled.div`
border-radius: 20px;
height: 5px;
background: #151515;
border-radius: 3px;
width: 40px;
width: 35px;
background-color: black;
margin: 10px;
margin-bottom: 20px;
margin-left: 0px;
transition: all 0.2s ease;
@ -148,4 +167,24 @@ const ChapterIndicator = styled.div`
}
`;
const BoxWrapper = styled.div`
background: #ffffff;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);
border-radius: 7px;
padding: 20px;
padding-top: 7px;
padding-left: 30px;
p {
font-family: "DM Sans";
font-style: normal;
font-weight: 500;
line-height: 16px;
letter-spacing: -0.02em;
color: #9d9d9d;
}
`;
export default CourseIdPage;

6
front/app/_orgs/[orgslug]/courses/new/page.tsx
View file

@ -1,3 +1,4 @@
"use client";
import { useRouter } from "next/navigation";
import React from "react";
import { Header } from "../../../../../components/UI/Header";
@ -55,8 +56,7 @@ const NewCoursePage = (params: any) => {
return (
<Layout title="New course">
<Header></Header>
<>
<Title>New Course </Title>
<hr />
Name : <input onChange={handleNameChange} type="text" /> <br />
@ -64,7 +64,7 @@ const NewCoursePage = (params: any) => {
Cover Photo : <input onChange={handleThumbnailChange} type="file" /> <br />
Learnings (empty for now) (separated by ; ) : <textarea id="story" name="story" rows={5} cols={33} /> <br />
<button onClick={handleSubmit}>Create</button>
</Layout>
</>
);
};

11
front/app/_orgs/[orgslug]/courses/page.tsx
View file

@ -46,14 +46,11 @@ const CoursesIndexPage = (params : any) => {
}, [isLoading, orgslug]);
return (
<Layout title="Courses">
<Header></Header>
<>
<Title>
{orgslug} Courses :{" "}
<Link href={"/courses/new"}>
<button>+</button>
</Link>{" "}
</Title>
@ -65,26 +62,22 @@ const CoursesIndexPage = (params : any) => {
{courses.map((course: any) => (
<div key={course.course_id}>
<Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id)}>
<h2>{course.name}</h2>
<CourseWrapper>
<img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
</CourseWrapper>
</Link>
<button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
Delete
</button>
<Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
<button>Edit Chapters</button>
</Link>
</div>
))}
</div>
)}
</Layout>
</>
);
};

14
front/app/_orgs/[orgslug]/layout.tsx Normal file
View file

@ -0,0 +1,14 @@
import "../../../styles/globals.css";
import { Menu } from "../../../components/UI/Elements/Menu";
import AuthProvider from "../../../components/Security/AuthProvider";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<>
<AuthProvider>
<Menu></Menu>
{children}
</AuthProvider>
</>
);
}

10
front/app/_orgs/[orgslug]/page.tsx
View file

@ -1,10 +1,7 @@
"use client";
import { useRouter, useSearchParams, useSelectedLayoutSegment } from "next/navigation";
import Layout from "../../../components/UI/Layout";
import { Title } from "../../../components/UI/Elements/Styles/Title";
import { Header } from "../../../components/UI/Header";
import { Title } from "@components/UI/Elements/Styles/Title";
import Link from "next/link";
import { usePathname } from 'next/navigation';
import { usePathname } from "next/navigation";
const OrgHomePage = (params: any) => {
const orgslug = params.params.orgslug;
@ -12,13 +9,10 @@ const OrgHomePage = (params: any) => {
return (
<div>
<Layout orgslug={orgslug} title={"Org " + orgslug}>
<Header></Header>
<Title>Welcome {orgslug} 👋🏻</Title>
<Link href={pathname + "/courses"}>
<button>See Courses </button>
</Link>
</Layout>
</div>
);
};

25
front/app/_orgs/[orgslug]/template.tsx Normal file
View file

@ -0,0 +1,25 @@
"use client";
import { motion } from "framer-motion";
export default function Template({ children }: { children: React.ReactNode }) {
const variants = {
hidden: { opacity: 0, x: 0, y: 0 },
enter: { opacity: 1, x: 0, y: 0 },
exit: { opacity: 0, x: 0, y: 0 },
};
return (
<div>
<motion.main
variants={variants} // Pass the variant object into Framer Motion
initial="hidden" // Set the initial state to variants.hidden
animate="enter" // Animated state to variants.enter
exit="exit" // Exit state (used later) to variants.exit
transition={{ type: "linear" }} // Set the transition to linear
className=""
>
{children}
</motion.main>
</div>
);
}

36
front/app/layout.tsx
View file

@ -1,15 +1,31 @@
import '../styles/globals.css'
import StyledComponentsRegistry from '../services/lib/styled-registry'
"use client";
import "../styles/globals.css";
import StyledComponentsRegistry from "../components/lib/styled-registry";
import { motion } from "framer-motion";
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
export default function RootLayout({ children }: { children: React.ReactNode }) {
const variants = {
hidden: { opacity: 0, x: 0, y: 0 },
enter: { opacity: 1, x: 0, y: 0 },
exit: { opacity: 0, x: 0, y: 0 },
};
return (
<html>
<html className="" lang="en">
<head />
<body> <StyledComponentsRegistry>{children}</StyledComponentsRegistry></body>
<body>
<StyledComponentsRegistry>
<motion.main
variants={variants} // Pass the variant object into Framer Motion
initial="hidden" // Set the initial state to variants.hidden
animate="enter" // Animated state to variants.enter
exit="exit" // Exit state (used later) to variants.exit
transition={{ type: "linear" }} // Set the transition to linear
className=""
>
{children}
</motion.main>
</StyledComponentsRegistry>
</body>
</html>
)
);
}

4
front/app/login/page.tsx
View file

@ -34,7 +34,7 @@ const Login = () => {
return (
<div>
<Layout title="Login">
< >
<Header></Header>
<Title>Login</Title>
@ -45,7 +45,7 @@ const Login = () => {
Login
</button>
</form>
</Layout>
</>
</div>
);
};

3
front/app/page.tsx
View file

@ -6,7 +6,7 @@ import learnhouseBigIcon from "public/learnhouse_bigicon.png";
import Image from "next/legacy/image";
import Link from "next/link";
const Home: NextPage = () => {
export default function Home() {
return (
<HomePage>
<motion.div
@ -89,4 +89,3 @@ const HomePage = styled.div`
}
`;
export default Home;

1
front/app/signup/page.tsx
View file

@ -1,3 +1,4 @@
"use client";
import React from "react";
import { Header } from "../../components/UI/Header";
import Layout from "../../components/UI/Layout";

19
front/components/Editor/Editor.tsx
View file

@ -18,6 +18,7 @@ import WarningCallout from "./Extensions/Callout/Warning/WarningCallout";
import ImageBlock from "./Extensions/Image/ImageBlock";
import Youtube from "@tiptap/extension-youtube";
import VideoBlock from "./Extensions/Video/VideoBlock";
import { Save } from "lucide-react";
interface Editor {
content: string;
@ -97,7 +98,9 @@ function Editor(props: Editor) {
{" "}
<b>{props.course.course.name}</b> <SlashIcon /> {props.element.name}{" "}
</EditorInfoDocName>
<EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>Save</EditorSaveButton>
<EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>
Save <Save size={12} />
</EditorSaveButton>
</EditorInfoWrapper>
<EditorButtonsWrapper>
<ToolbarButtons editor={editor} />
@ -146,7 +149,7 @@ const Page = styled.div`
`;
const EditorTop = styled.div`
background-color: #ffffffb8;
background-color: #ffffffeb;
border-radius: 15px;
backdrop-filter: saturate(180%) blur(14px);
margin: 40px;
@ -213,24 +216,28 @@ const EditorInfoDocName = styled.div`
const EditorSaveButton = styled.div`
display: flex;
border-radius: 6px;
border-radius: 8px;
padding: 5px;
font-size: 12px;
margin-right: 5px;
margin-left: 7px;
background: rgba(176, 176, 176, 0.145);
background: #ffffff8d;
color: #5252528d;
border: solid 1px #52525257;
align-items: center;
justify-content: space-between;
width: 53px;
&.is-active {
background: rgba(176, 176, 176, 0.5);
&:hover {
background: rgba(139, 139, 139, 0.5);
background: rgba(31, 31, 31, 0.5);
cursor: pointer;
}
}
&:hover {
background: rgba(217, 217, 217, 0.48);
cursor: pointer;
}
`;

21
front/components/Canva/Canva.tsx → front/components/LectureViews/DynamicCanva/DynamicCanva.tsx
View file

@ -2,12 +2,13 @@ import React from "react";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
// Custom Extensions
import InfoCallout from "../Editor/Extensions/Callout/Info/InfoCallout";
import WarningCallout from "../Editor/Extensions/Callout/Warning/WarningCallout";
import ImageBlock from "../Editor/Extensions/Image/ImageBlock";
import InfoCallout from "@editor/Extensions/Callout/Info/InfoCallout";
import WarningCallout from "@editor/Extensions/Callout/Warning/WarningCallout";
import ImageBlock from "@editor/Extensions/Image/ImageBlock";
import Youtube from "@tiptap/extension-youtube";
import { EditorContentWrapper } from "../Editor/Editor";
import VideoBlock from "../Editor/Extensions/Video/VideoBlock";
import { EditorContentWrapper } from "@editor/Editor";
import VideoBlock from "@editor/Extensions/Video/VideoBlock";
import { styled } from "styled-components";
interface Editor {
content: string;
@ -46,10 +47,16 @@ function Canva(props: Editor) {
});
return (
<EditorContentWrapper>
<CanvaWrapper>
<EditorContent editor={editor} />
</EditorContentWrapper>
</CanvaWrapper>
);
}
const CanvaWrapper = styled.div`
padding-top: 20px;
width: 1300px;
margin: 0 auto;
`;
export default Canva;

72
front/components/LectureViews/Video/Video.tsx Normal file
View file

@ -0,0 +1,72 @@
import { getBackendUrl } from "@services/config";
import React from "react";
import styled from "styled-components";
function VideoLecture({ element, course }: { element: any; course: any }) {
function getChapterName() {
let chapterName = "";
let chapterId = element.chapter_id;
course.chapters.forEach((chapter: any) => {
if (chapter.chapter_id === chapterId) {
chapterName = chapter.name;
}
});
return chapterName;
}
return (
<VideoLectureLayout>
<VideoTitle>
<p>Chapter : {getChapterName()}</p>
{element.name}
</VideoTitle>
<VideoPlayerWrapper>
<video controls src={`${getBackendUrl()}content/uploads/video/${element.content.video.element_id}/${element.content.video.filename}`}></video>
</VideoPlayerWrapper>
</VideoLectureLayout>
);
}
export default VideoLecture;
const VideoLectureLayout = styled.div`
display: flex;
flex-direction: column;
margin-top: 10px;
background: #141414;
min-width: 100%;
min-height: 1200px;
`;
const VideoTitle = styled.div`
display: flex;
width: 1300px;
margin: 0 auto;
padding-top: 20px;
font-size: 24px;
font-weight: 700;
color: #fff;
flex-direction: column;
p {
font-size: 14px;
padding: 0;
margin: 0;
color: #ffffffaa;
}
`;
const VideoPlayerWrapper = styled.div`
display: flex;
width: 1300px;
margin: 0 auto;
justify-content: center;
padding-top: 20px;
video {
width: 1300px;
height: 500px;
border-radius: 7px;
background-color: black;
}
`;

1
front/components/Modals/CourseEdit/NewElement.tsx
View file

@ -2,7 +2,6 @@ import React, { useState } from "react";
import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
import Modal from "../Modal";
import styled from "styled-components";
import dynamic from "next/dynamic";
import DynamicCanvaModal from "./NewElementModal/DynamicCanva";
import VideoModal from "./NewElementModal/Video";

5
front/components/Security/AuthProvider.tsx
View file

@ -34,10 +34,7 @@ const AuthProvider = ({ children }: any) => {
userInfo = await getUserInfo(access_token);
setAuth({ access_token, isAuthenticated: true, userInfo, isLoading });
// if user is authenticated and tries to access login or signup page, redirect to home
if (NON_AUTHENTICATED_ROUTES.includes(router.pathname)) {
router.push("/");
}
} else {
setAuth({ access_token, isAuthenticated: false, userInfo, isLoading });
//router.push("/login");

6
front/components/UI/Layout.tsx
View file

@ -1,4 +1,4 @@
"use client";
import React from "react";
import Head from "next/head";
import styled from "styled-components";
@ -14,8 +14,6 @@ const Layout = (props: any) => {
};
return (
<html>
<body>
<AuthProvider>
<ProjectPhaseLabel>🚧 Dev Phase</ProjectPhaseLabel>
<Menu orgslug={props.orgslug}></Menu>
@ -33,8 +31,6 @@ const Layout = (props: any) => {
<p>LearnHouse © 2021 - {new Date().getFullYear()} - All rights reserved</p>
</Footer>
</AuthProvider>
</body>
</html>
);
};

30
front/components/lib/styled-registry.tsx Normal file
View file

@ -0,0 +1,30 @@
'use client';
import React, { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
export default function StyledComponentsRegistry({
children,
}: {
children: React.ReactNode;
}) {
// Only create stylesheet once with lazy initial state
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement();
styledComponentsStyleSheet.instance.clearTag();
return <>{styles}</>;
});
if (typeof window !== 'undefined') return <>{children}</>;
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
{children as React.ReactChild}
</StyleSheetManager>
);
}

3673
front/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
front/package.json
View file

@ -24,7 +24,7 @@
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^18.2.0",
"styled-components": "^5.3.5",
"styled-components": "^6.0.0-beta.9",
"y-indexeddb": "^9.0.9",
"y-webrtc": "^10.2.3",
"yjs": "^13.5.42"

2
front/services/auth/auth.ts
View file

@ -76,3 +76,5 @@ export async function signup(body: NewAccountBody): Promise<any> {
.then((result) => result.json())
.catch((error) => console.log("error", error));
}

43
front/tsconfig.json
View file

@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@ -22,32 +18,17 @@
{
"name": "next"
}
]
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"baseUrl": ".",
"paths": {
"@components/*": [
"components/*"
],
"@public/*": [
"public/*"
],
"@images/*": [
"public/img/*"
],
"@services/*": [
"services/*"
],
"@editor/*": [
"components/Editor/*"
]
},
"exclude": [
"node_modules"
]
"@components/*": ["components/*"],
"@public/*": ["public/*"],
"@images/*": ["public/img/*"],
"@services/*": ["services/*"],
"@editor/*": ["components/Editor/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}