Ignore:
Timestamp:
01/20/23 22:57:18 (21 months ago)
Author:
viktor <viktor@…>
Branches:
main
Children:
8dffe02
Parents:
4abf55a
Message:

prefinal

File:
1 edited

Legend:

Unmodified
Added
Removed

  • reactapp/src/Pages/Home.js

    r4abf55a r9bf1f8d  
    1 import React, { useContext } from "react";
    2 import { MainWrapper, MainTitle } from "../Components/Styled/Main.style";
    3 import { Outlet } from "react-router-dom";
    4 import Search from "../Components/Search";
    5 import UserHeader from "../Components/UserHeader";
    6 import AuthApi from "../api/AuthApi";
     1import React, {useEffect, useState} from 'react';
     2import JSOG from "jsog";
     3import {OpinionCard, OpinionCardContent, OpinionCardContentTime} from "../Components/Styled/OpinionCard.style";
     4import LoadingSpinner from "../Components/Styled/LoadingSpinner.style";
     5import {dateConverter} from "../Util/dateConverter";
     6import {findParentThread} from "../Util/findParentThread";
     7import {CurrentPageNav} from "../Components/Styled/Main.style";
    78
    8 function Home({ user, userLoaded }) {
    9   const { auth, setAuth } = useContext(AuthApi);
     9const Home = () => {
     10    const [latestOpinions, setLatestOpinions] = useState(null);
     11    const [loadedLatestOpinions, setLoadedLatestOpinions] = useState(false);
     12    const [latestThreads, setLatestThreads] = useState(null);
     13    const [loadedLatestThreads, setLoadedLatestThreads] = useState(false);
    1014
    11   return (
    12     <MainWrapper>
    13       <style>
    14         @import
    15         url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
    16       </style>
    17       <style>
    18         {
    19           "body { background-color: papayawhip;} * {margin: 0; padding: 0; box-sizing: border-box;}"
    20         }
    21       </style>
    22       <a href="/">
    23         <MainTitle>profesori.mk</MainTitle>
    24       </a>{" "}
    25       <Search />
    26       {auth && <UserHeader />}
    27       <div style={{ marginTop: "140px" }}></div>
    28       <Outlet />
    29     </MainWrapper>
    30   );
    31 }
     15    useEffect(() => {
     16        Promise.all([fetch(`http://192.168.1.254:8080/public/latest10opinions`),
     17            fetch(`http://192.168.1.254:8080/public/latest10threads`)])
     18            .then(([resOpinions, resThreads]) => Promise.all([resOpinions.json(), resThreads.json()]))
     19            .then(([dataOpinions, dataThreads]) => {
     20                let cyclicGraph1 = dataOpinions;
     21                let jsogStructure1 = JSOG.encode(cyclicGraph1);
     22                cyclicGraph1 = JSOG.decode(jsogStructure1);
     23                setLatestOpinions(cyclicGraph1);
     24                setLoadedLatestOpinions(true);
     25
     26                let cyclicGraph2 = dataThreads;
     27                let jsogStructure2 = JSOG.encode(cyclicGraph2);
     28                cyclicGraph2 = JSOG.decode(jsogStructure2);
     29                setLatestThreads(cyclicGraph2);
     30                setLoadedLatestThreads(true);
     31            })
     32
     33    }, []);
     34
     35    return (
     36        <>
     37            <CurrentPageNav>
     38                &#187;{" "}
     39                <a href={"/university/1"}>
     40                    Универзитет „Св. Кирил и Методиј“
     41                </a>
     42            </CurrentPageNav>
     43        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"40px", marginTop:"60px"}}>
     44
     45        <div id="latestOpinions" style={{gridColumn:"1", paddingLeft:"20px"}}>
     46            <h2 style={{fontWeight:"normal", marginBottom:"30px"}}>Последни мислења за <span style={{fontWeight:"bold"}}>професори</span></h2>
     47            {loadedLatestOpinions ? latestOpinions.slice(5).map(opinion => {
     48                opinion.timePosted = undefined;
     49                return <OpinionCard key={opinion.postId}>
     50                    <OpinionCardContent>
     51                        <p style={{marginBottom:"10px"}}>
     52                        во дискусија за{" "}
     53                        <a href={"/professor/" + opinion.targetProfessor.professorId}>
     54                                    {opinion.targetProfessor.professorName}
     55                        </a>
     56                        </p>
     57                        <p style={{ fontStyle: "italic", marginBottom: "10px" }}>
     58                            <a href={"/user/" + opinion.author.id}>
     59                                {opinion.author.username}
     60                            </a>{" "}
     61                            напишал
     62                        </p>
     63                        <p style={{ marginBottom: "10px", maxWidth: "90%" }}>
     64                            {opinion.content}
     65                        </p>
     66                        {new Date(opinion.timePosted).setMilliseconds(0) === new Date(opinion.timeLastEdited).setMilliseconds(0) ? (
     67                            <OpinionCardContentTime>
     68                                {dateConverter(
     69                                    new Date(opinion.timePosted).toString().slice(4, -43)
     70                                )} <span style={{fontStyle:"normal",color:"blue"}}>#{opinion.postId}</span>
     71                            </OpinionCardContentTime>
     72                        ) : (
     73                            <OpinionCardContentTime>
     74                                {dateConverter(
     75                                    new Date(opinion.timeLastEdited)
     76                                        .toString()
     77                                        .slice(4, -43)
     78                                )}{" "} <span style={{fontStyle:"normal",color:"blue"}}>#{opinion.postId}</span>{" "}
     79                                (едитирано од модератор)
     80                            </OpinionCardContentTime>
     81                        )}
     82                    </OpinionCardContent>
     83                </OpinionCard>
     84            }) : <LoadingSpinner/>}
     85        </div>
     86
     87    <div id="latestThreads" style={{gridColumn:"2", paddingRight:"20px"}}>
     88        <h2 style={{fontWeight:"normal", marginBottom:"30px"}}>Последни мислења за <span style={{fontWeight:"bold"}}>предмети</span></h2>
     89        {loadedLatestThreads ? latestThreads.slice(5).map(thread => {
     90            return <OpinionCard key={thread.postId}>
     91                <OpinionCardContent>
     92                    <p style={{marginBottom:"10px"}}>
     93                        во дискусија за{" "}
     94                        <a href={
     95                                thread.parent === null
     96                                    ? "/topic/" + thread.postId
     97                                    : "/topic/" + findParentThread(thread).postId
     98                            }
     99                        > {thread.targetSubject.subjectName}
     100                        </a>
     101                    </p>
     102                    <p style={{ fontStyle: "italic", marginBottom: "10px" }}>
     103                        <a href={"/user/" + thread.author.id}>
     104                            {thread.author.username}
     105                        </a>{" "}
     106                        напишал
     107                    </p>
     108                    <p style={{ marginBottom: "10px", maxWidth: "90%" }}>
     109                        {thread.content}
     110                    </p>
     111                    {new Date(thread.timePosted).setMilliseconds(0) === new Date(thread.timeLastEdited).setMilliseconds(0) ? (
     112                        <OpinionCardContentTime>
     113                            {dateConverter(
     114                                new Date(thread.timePosted).toString().slice(4, -43)
     115                            )} <span style={{fontStyle:"normal",color:"blue"}}>#{thread.postId}</span>
     116                        </OpinionCardContentTime>
     117                    ) : (
     118                        <OpinionCardContentTime>
     119                            {dateConverter(
     120                                new Date(thread.timeLastEdited)
     121                                    .toString()
     122                                    .slice(4, -43)
     123                            )}{" "} <span style={{fontStyle:"normal",color:"blue"}}>#{thread.postId}</span>{" "}
     124                            (едитирано од модератор)
     125                        </OpinionCardContentTime>
     126                    )}
     127                </OpinionCardContent>
     128            </OpinionCard>
     129        }) : null}
     130    </div>
     131        </div>
     132        </>
     133    );
     134};
    32135
    33136export default Home;
Note: See TracChangeset for help on using the changeset viewer.