Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/new layout #441

Merged
merged 3 commits into from
Sep 7, 2023
Merged

Feature/new layout #441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e1caf77
feat: new layout
JasonNotJson Sep 6, 2023
e9af231
feat: whole new layout will merge to parent branch to get inifinte sc…
JasonNotJson Sep 7, 2023
2c55a82
fix: fixing actions to compatible version
JasonNotJson Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/actions/microapp/action.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ runs:
shell: bash
working-directory: ${{ inputs.path }}
run: |
npm install -g pnpm@6
npm install -g pnpm
pnpm install --filter .

# - name: Test
Expand Down
115 changes: 80 additions & 35 deletions apps/forum/src/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,44 +15,43 @@ const App = () => {
const { theme, setTheme } = React.useContext(ThemeContext);

return (
<div className="flex flex-col">
<div className="flex flex-col h-screen">
<BrowserRouter>
<div className="basis-[67px]">
<HeaderWithModal
modal={SearchTags}
title={t("navigation.forum")}
onInputChange={() => {}}
placeholder={t("search placeholder")}
inputText=""
isBlur={false}
theme={theme}
setTheme={setTheme}
changeLang={(lng: string | undefined) => i18n.changeLanguage(lng)}
/>
</div>
<div className="basis-[calc(100vh-67px)] flex flex-col">
{/* <div className="basis-[60px] lg:basis-[20%] bg-zinc-100 dark:bg-zinc-700 dark:text-dark-text1">
<BoardMenu />
</div> */}
<div className="justify-between">
<BoardMenu />
<div className="flex-shrink-0 h-16">
<div className="basis-[67px]">
<HeaderWithModal
modal={SearchTags}
title={t("navigation.forum")}
onInputChange={() => {}}
placeholder={t("search placeholder")}
inputText=""
isBlur={false}
theme={theme}
setTheme={setTheme}
changeLang={(lng: string | undefined) => i18n.changeLanguage(lng)}
/>
</div>
{/* <div className="basis-[calc(100vh-187px)] lg:basis-[80%] dark:text-dark-text1"> */}
<div className="flex h-screen justify-between pl-2 gap-4">
<div className="flex flex-row w-full">
</div>
<div className="basis-[calc(100vh-67px)] flex flex-col mt-[23px]">
<div className="flex-grow flex flex-row">
<div className="flex flex-col sm:ml-5 lg:ml-10 w-1/5 ">
{/* FilterMenu and BoardMenu stacked vertically */}
<FilterMenu />
<div className="w-5/6">
<Routes>
<Route element={<Board />} path="forum/:boardSlug" />
<Route
element={<Thread />}
path="forum/:boardSlug/:threadUuid"
/>
</Routes>
</div>
<div className="bg-gray-100 md:h-full flex w-1/6">
<h1 className="my-auto">Advertisement</h1>
</div>
<BoardMenu />
</div>

{/* Remaining part */}
<div className="flex flex-col w-3/5">
<Routes>
<Route element={<Board />} path="forum/:boardSlug" />
<Route
element={<Thread />}
path="forum/:boardSlug/:threadUuid"
/>
</Routes>
</div>
<div className="flex flex-col w-1/5 h-1/2 bg-gray-100">
<h1>Advertisement</h1>
</div>
</div>
</div>
Expand All @@ -62,3 +61,49 @@ const App = () => {
};

export default App;

// return (
// <div className="flex flex-col">
// <BrowserRouter>
// <div className="basis-[67px]">
// <HeaderWithModal
// modal={SearchTags}
// title={t("navigation.forum")}
// onInputChange={() => {}}
// placeholder={t("search placeholder")}
// inputText=""
// isBlur={false}
// theme={theme}
// setTheme={setTheme}
// changeLang={(lng: string | undefined) => i18n.changeLanguage(lng)}
// />
// </div>
// <div className="basis-[calc(100vh-67px)] flex flex-col">
// {/* <div className="basis-[60px] lg:basis-[20%] bg-zinc-100 dark:bg-zinc-700 dark:text-dark-text1">
// <BoardMenu />
// </div> */}

// {/* <div className="basis-[calc(100vh-187px)] lg:basis-[80%] dark:text-dark-text1"> */}
// <div className="flex h-screen justify-between pl-2 gap-4 pt-4 mt-[23px]">
// <div className="flex flex-col w-full">
// <FilterMenu />
// <BoardMenu />
// {/* <div className="justify-between"></div> */}
// <div className="w-5/6 mt-2">
// <Routes>
// <Route element={<Board />} path="forum/:boardSlug" />
// <Route
// element={<Thread />}
// path="forum/:boardSlug/:threadUuid"
// />
// </Routes>
// </div>
// <div className="bg-gray-100 md:h-full flex w-1/6">
// <h1 className="my-auto">Advertisement</h1>
// </div>
// </div>
// </div>
// </div>
// </BrowserRouter>
// </div>
// );
4 changes: 3 additions & 1 deletion apps/forum/src/components/Board.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,15 @@ const Board = () => {
name: "BoardData",
});

const uid = "uid";

// fetching the board data
useEffect(() => {
var currentBoardId =
boards.find((board) => board.slug === boardSlug)?.slug || "academic";
setBoardId(currentBoardId);

API.get("wasedatime-dev", `/forum/${currentBoardId}`, {
API.get("wasedatime-dev", `/forum/${currentBoardId}?uid=${uid}`, {
headers: {
"Content-Type": "application/json",
},
Expand Down
40 changes: 33 additions & 7 deletions apps/forum/src/components/BoardMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,42 @@ import boards from "@app/constants/boards.json";

const BoardMenu = () => {
return (
<div className="flex text-lg justify-evenly">
{boards.map((board, i) => (
<div key={i} className="px-3.5 py-2 md:py-6">
<div className={`text-center hover:text-light-main cursor-pointer`}>
<Link to={`forum/${board.slug}`}>{board.title}</Link>
<div className="pl-2 md:pl-4 lg:pl-10">
<h1 className="form-item-title">Topics</h1>
<div className="flex flex-col sm:text-lg text-sm text-light-text1">
{boards.map((board, i) => (
<div
key={i}
className="px-3.5 py-1 md:py-4 flex hover:text-light-main"
>
<span className="text-left list-inside list-disc">•</span>
<div className="text-left ml-2 cursor-pointer ">
<Link to={`forum/${board.slug}`}>{board.title}</Link>
</div>
</div>
</div>
))}
))}
</div>
</div>
);
};

export default BoardMenu;

// const BoardMenu = () => {
// return (
// <div className="w-40 text-left px-4">
// <h1 className="form-item-title">Topics</h1>
// <div className="flex text-lg justify-evenly flex-col">
// {boards.map((board, i) => (
// <div key={i} className="px-3.5 py-2 md:py-6">
// <div className={`text-center hover:text-light-main cursor-pointer`}>
// <Link to={`forum/${board.slug}`}>{board.title}</Link>
// </div>
// </div>
// ))}
// </div>
// </div>
// );
// };

// export default BoardMenu;
8 changes: 4 additions & 4 deletions apps/forum/src/components/CreateThread.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ const CreateThread = () => {
onChange={handleTitleChange}
/>
<textarea
placeholder={`Share something in ${boards[findBoardIndex].title}...`}
placeholder={`Anything interesting?`}
className=" h-36 pl-2 pb-28 w-full hover:outline-0 focus:outline-0"
value={textContent}
onChange={handleBodyChange}
Expand All @@ -144,7 +144,7 @@ const CreateThread = () => {
onClick={() => setExpandTags(!expandTags)}
>
{expandTags ? (
<div className="bg-light-main text-black border-light-main border absolute h-32 w-32 top-8 left-0 rounded-lg">
<div className="bg-light-main text-black border-light-main border absolute h-32 w-32 top-8 left-0 rounded-lg z-10">
{tags.map((tag) => (
<div
key={tag.id}
Expand All @@ -166,7 +166,7 @@ const CreateThread = () => {
>
Groups
{expandGroups ? (
<div className="bg-white border border-light-main absolute h-32 w-32 top-8 left-0 rounded-lg">
<div className="bg-white border border-light-main absolute h-32 w-32 top-8 left-0 rounded-lg z-10">
Text
</div>
) : null}
Expand All @@ -184,7 +184,7 @@ const CreateThread = () => {
<div>
<div className="cursor-pointer" onClick={handleOpenForm}>
<h1 className="border-2 p-2 rounded-lg border-light-main">
Start a new thread
Anything interesting?
</h1>
</div>
<SignInModal
Expand Down
6 changes: 3 additions & 3 deletions apps/forum/src/components/FilterMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const FilterMenu = () => {
};

return (
<div className="w-64 text-center px-4">
<div className=" text-center pl-2 lg:pl-10">
<div className="my-2 mx-auto">
<h1 className="form-item-title">School</h1>
<button
Expand All @@ -48,7 +48,7 @@ const FilterMenu = () => {
)}
</div>

{Object.keys(groups).map((groupCategory, groupCategoryId) => (
{/* {Object.keys(groups).map((groupCategory, groupCategoryId) => (
<CheckList
key={groupCategoryId}
listId={groupCategoryId.toString()}
Expand All @@ -57,7 +57,7 @@ const FilterMenu = () => {
onListItemToggle={toggleGroup}
isItemChecked={isGroupChecked}
/>
))}
))} */}
</div>
);
};
Expand Down
6 changes: 4 additions & 2 deletions apps/forum/src/components/SchoolFilterForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ const SchoolFilterForm = ({ isOpen, setOpen }: SchoolFilterFormProps) => {
const [currentGroups, setCurrentGroups] = useRecoilState(currentGroupsState);

const toggleGroup = (group: string) => {
console.log(group);
if (currentGroups.includes(group)) {
var groups = [...currentGroups];
const index = groups.indexOf(group);
Expand All @@ -93,7 +94,8 @@ const SchoolFilterForm = ({ isOpen, setOpen }: SchoolFilterFormProps) => {
className={
(currentGroups.includes(school)
? "border-light-main"
: "border-light-bgMain") + " border-2 rounded grow-0 shrink-0 m-2 cursor-pointer"
: "border-light-bgMain") +
" border-2 rounded grow-0 shrink-0 m-2 cursor-pointer"
}
onClick={() => toggleGroup(school)}
>
Expand All @@ -107,7 +109,7 @@ const SchoolFilterForm = ({ isOpen, setOpen }: SchoolFilterFormProps) => {
!isOpen
? "hidden "
: "" +
"fixed top-0 left-0 right-0 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full z-0"
"fixed top-0 left-0 right-0 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full z-40"
}
>
<div
Expand Down
52 changes: 47 additions & 5 deletions apps/forum/src/components/ThreadBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { getIdToken } from "wasedatime-ui";
import API from "@aws-amplify/api";
import { ConfirmModal } from "@app/components/form/ConfirmModal";
import { EditThreadForm } from "@app/components/form/EditThreadForm";
import getSchoolIconPath from "@app/utils/get-school-icon-path";

type Props = {
isPreview: boolean;
Expand All @@ -18,6 +19,34 @@ const ThreadBlock = ({ isPreview, thread }: Props) => {
const [editModalOpen, setEditModalOpen] = useState(false);
const [deleteModalOpen, setDeleteModalOpen] = useState(false);

const convertUrlsToLinks = (text: string) => {
if (!text) return null;

const urlRegex = /https?:\/\/[^\s]+/g;
const parts = text.split(urlRegex);
const matches = text.match(urlRegex);

return (
<div>
{parts.map((part, index) => (
<>
{part}
{matches && matches[index] ? (
<a
href={matches[index]}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600"
>
{matches[index]}
</a>
) : null}
</>
))}
</div>
);
};

useEffect(() => {
const updateLoginStatus = async () => {
const idToken = await getIdToken();
Expand Down Expand Up @@ -101,7 +130,7 @@ const ThreadBlock = ({ isPreview, thread }: Props) => {
<div
className={
isPreview
? `border-2 mt-12 mx-4 rounded-xl shadow-lg pb-6 hover:bg-gray-50 golden-gradient-border`
? `border-2 mt-12 mx-4 rounded-xl shadow-lg pb-6 hover:bg-gray-50`
: `cursor-default`
}
>
Expand All @@ -121,8 +150,12 @@ const ThreadBlock = ({ isPreview, thread }: Props) => {
</h1>
<div>
{/* ToDo: create component for tag within Thread Block */}
<div className="bg-red-500 rounded-lg"> {thread.group_id}</div>
<div className="bg-red-500 rounded-lg"> {thread.tag_id}</div>
<img
src={getSchoolIconPath(thread.group_id, "en")}
width={40}
height={40}
/>

{/* ToDO: There is no author for now will add later on */}
{/* <h2 className="text-sm text-light-text2 my-auto">
{thread.author}
Expand Down Expand Up @@ -159,9 +192,18 @@ const ThreadBlock = ({ isPreview, thread }: Props) => {
}
</div>
</div>
<p className="justify-left text-light-text1 pt-4">{thread.body}</p>
<p
className="justify-left text-light-text1 pt-4"
style={{ whiteSpace: "pre-line" }}
>
{convertUrlsToLinks(thread.body)}
</p>
</div>
<div className="inline-block text-blue-600 rounded-lg pl-2 pt-2">
{" "}
{`# ${thread.tag_id}`}
</div>
<hr className="mx-2 pt-4 mt-6" />
<hr className="mx-2 pt-2 mt-6" />
<div>
<h3>Views: {thread.views}</h3>
</div>
Expand Down
Loading